詳解js在html中的載入執行順序-html教學-PHP中文網

首頁

web前端

html教學

詳解js在html中的載入執行順序

高洛峰

Mar 12, 2017 pm 05:47 PM

htmljavascript

js在html中的載入執行順序

#1.載入順序：引入標記<script></script>的出現順序，

#頁面上的Javascript程式碼是HTML文件的一部分，所以Javascript在頁面裝載時執行的順序就是其引入標記<script></script>的出現順序，
<script><pre class='brush:php;toolbar:false;'><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题 3</title> <script> alert("1-最先执行"); </script> </head> <body onload="alert(&#39;3-最后执行&#39;);"> <script> alert("2-接着执行"); </script> </body> </html></pre><p>2、每個腳本<a href="http://www.php.cn/php/php-tp-definition.html" target="_blank">定義的全域<a href="http://www.php.cn/wiki/70.html" target="_blank">變數和<a href="http://www.php.cn/wiki/145.html" target="_blank">函數，都可以被後面執行的腳本所呼叫。 </script>

變數的調用，必須是前面已經聲明，否則獲取的變數值是undefined。

<script type="text/javscrpt">//<![CDATA[
  alert(tmp);  
//输出 undefined　var 
  tmp = 1;
  alert(tmp);  //输出 1//]]>
</script>

3.同一段腳本，函數定義可以出現在函數呼叫的後面，但是如果是分別在兩段程式碼，且函數呼叫在第一段程式碼中，則會報函數未定義錯誤。

<script type="text/javscrpt">//<![CDATA[
  aa();            //浏览器报错//]]>
</script>
<script type="text/javscrpt">//<![CDATA[
  aa();   //输出 1 
  function aa()
  {
    alert(1);
  }//]]>
</script>

4.document.write()會把輸出寫入到腳本文件所在的位置，瀏覽器解析完documemt.write()所在文件內容後，繼續解析document.write()輸出的內容，
然後在繼續解析HTML文件。

<script type="text/javascript">//<![CDATA[    
  document.write(&#39;<script type="text/javascript" src="test.js"><//script>&#39;);
  document.write(&#39;<script type="text/javascript">&#39;);    
  document.write(&#39;alert(2);&#39;)    
  document.write(&#39;alert("我是" + tmpStr);&#39;);    
  document.write(&#39;<//script>&#39;);    //]]>
</script> 
<script type="text/javascript">//<![CDATA[    
  alert(3);    //]]>
</script>

test.js的内容是： 
var tmpStr = 1;    
alert(tmpStr);

在Firefox和Opera中的彈出值的順序是：1、2、我是1、3
在IE中彈出值的順序是：2、1、3，同時瀏覽器報錯：tmpStr未定義
原因可能是IE在document.write時，並未等待載入SRC中的Javascript程式碼完畢後，才執行下一行，所以導致2先彈出，
並且執行到document .write('document.write("我是" + tmpStr)')呼叫tmpStr時，tmpStr並未定義，從而報錯。
解決這個問題，可以利用HTML解析是解析完一個HTML標籤，再執行下一個的原理，把程式碼拆分來實現：

這樣IE下和其他瀏覽器輸出值的順序都是一直以來的輸出值了：1、2、我是1、3

總結：ＩＥ下，用Document.Write方法引用js檔案時，js檔案會出現尚未載入就直接呼叫的情況，因此建議將引用的JS檔案單獨放在一個script區塊中。以確保引用的js檔案完全載入後，再繼續執行後面的Document.Write內容

5、同名ＪＳ函數執行順序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<script  type="text/javascript">
function aa() {
        alert(&#39;First aa&#39;)
    }   
</script>   
<title></title>
</head>
<body>
<form id="form1" runat="server">
<br />
<input id="Button1" type="button" value="button"  onclick="aa();"/>
</form>
</body>
<script  type="text/javascript">
function aa(s) {
        alert(&#39;Second aa&#39;);
    }
function aa(s) {
        alert(&#39;Last aa&#39;);
    }
</script>
</html>

　　點選「botton」執行結果：　Ｌast aa

# 在js裡出現同名函數後，你在web頁中呼叫改js函數後，總是呼叫頁面中最後一個載入的函數。

以上是詳解js在html中的載入執行順序的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract