优质

html页面的加载顺序（js在html中的加载执行顺序）

丁均熙优秀作者

原创内容来源：小居数码网时间：2024-08-15 18:54:01 阅读() 收藏：52 分享：68 爆

导读：您正在阅读的是关于【数码知识】的问题，本文由科普作家协会，生活小能手，著名生活达人等整理监督编写。本文有1040个文字，大小约为4KB，预计阅读时间3分钟。

同事跟我说他用jQuery取不到页面上隐藏元素input的值，他的html页面大概内容如下。

js在html中的加载执行顺序

<!DOCTYPE html><html lang="zh"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script><title>浅谈Html页面内容执行顺序</title><script type="text/javascript">var userId = $('#hiddenUserId').val();var contextPath = $('#hiddenContextPath').val();var userName = $('#hiddenUserName').val();</script></head> <body><input type="hidden" id="hiddenUserId" value="101" /><input type="hidden" id="hiddenContextPath" value="/web" /><input type="hidden" id="hiddenUserName" value="小明" /></body> </html>

页面中的JS脚本在head中，JS脚本要读取的input在body中。浏览器对html页面内容的加载是顺序加载，也就是在html页面中前面先加载，因此当加载到JS脚本时，input还没有加载到浏览器中。JS是一种解释性的脚本，也是从上而下顺序执行，由于这段JS代码是立即执行的，所以当JS在执行的时候，读取不到input的值。

最直接的修改方法是把JS放到网页的最下面执行。

<!DOCTYPE html><html lang="zh"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script><title>浅谈Html页面内容执行顺序</title></head> <body><input type="hidden" id="hiddenUserId" value="101" /><input type="hidden" id="hiddenContextPath" value="/web" /><input type="hidden" id="hiddenUserName" value="小明" /><script type="text/javascript">var userId = $('#hiddenUserId').val();var contextPath = $('#hiddenContextPath').val();var userName = $('#hiddenUserName').val();</script></body> </html>

把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监听事件。

最终修改后的页面

<!DOCTYPE html><html lang="zh"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script type="text/javascript" src="jslib/jquery-1.11.2.min.js"></script><title>浅谈Html页面内容执行顺序</title><script type="text/javascript">$(function(){var userId = $('#hiddenUserId').val();var contextPath = $('#hiddenContextPath').val();var userName = $('#hiddenUserName').val();});</script></head> <body><input type="hidden" id="hiddenUserId" value="101" /><input type="hidden" id="hiddenContextPath" value="/web" /><input type="hidden" id="hiddenUserName" value="小明" /></body> </html>

上面就是小居数码小编今天给大家介绍的关于（js在html中的加载执行顺序）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

（537）个朋友认为回复得到帮助。

部分文章信息来源于以及网友投稿，转载请说明出处。

本文标题：html页面的加载顺序（js在html中的加载执行顺序）：http://sjzlt.cn/shuma/155965.html

上一篇：javascript特性包括（javascript有哪些常用的属性和方法）

下一篇：unicode编码与utf-8的关系（utf-8unicode区别）