淺談Html的內容載入及JS執行順序

淺談Html的內容載入及JS執行順序

同事跟我說他用jQuery取不到頁面上隱藏元素input的值，他的html頁面大概內容如下。

 

<script type=text/javascript src=jslib/jquery-1.11.2.min.js></script><script type=text/javascript>var userId = $('#hiddenUserId').val();var contextPath = $('#hiddenContextPath').val();var userName = $('#hiddenUserName').val();</script>

頁面中的JS指令碼在head中，JS指令碼要讀取的input在body中。瀏覽器對html頁面內容的載入是順序載入，也就是在html頁面中前面先載入，因此當載入到JS指令碼時，input還沒有載入到瀏覽器中。JS是一種解釋性的指令碼，也是從上而下順序執行，由於這段JS代碼是立即執行的，所以當JS在執行的時候，讀取不到input的值。

最直接的修改方法是把JS放到網頁的最下面執行。

 

<script type=text/javascript src=jslib/jquery-1.11.2.min.js></script> <script type=text/javascript>var userId = $('#hiddenUserId').val();var contextPath = $('#hiddenContextPath').val();var userName = $('#hiddenUserName').val();</script>把JS放到網頁的最下面，這樣在JS執行的時候，網頁內容都已經載入完畢。把JS放在網頁的最下面方法並不是最好的解決方案，大部分情況JS並不是總能放在網頁的最下面。這時可以用window的onload事件，onload事件在整個頁面都載入完成後才觸發，可以把JS指令碼放在onload裡面執行。不同瀏覽器onload事件添加方式也不一樣。

 

IE下事件：

 

window.attachEvent('onload', function(){var userId = $('#hiddenUserId').val();var contextPath = $('#hiddenContextPath').val();var userName = $('#hiddenUserName').val();});

 

 

Chrome/Firefox等DOM標準事件：

 

window.addEventListener('load', function(){var userId = $('#hiddenUserId').val();var contextPath = $('#hiddenContextPath').val();var userName = $('#hiddenUserName').val();});

由於不同瀏覽器的事件添加方式不一樣，jQuery為我們提供了通用的初始化方法，該方法在頁面載入完成時觸發。

 

 

$(function(){var userId = $('#hiddenUserId').val();var contextPath = $('#hiddenContextPath').val();var userName = $('#hiddenUserName').val();});

上面方法本質就是添加onload監聽事件。

 

 

最終修改後的頁面

 

<script type=text/javascript src=jslib/jquery-1.11.2.min.js></script><script type=text/javascript>$(function(){var userId = $('#hiddenUserId').val();var contextPath = $('#hiddenContextPath').val();var userName = $('#hiddenUserName').val();});</script>