浅谈Html的内容加载及JS执行顺序

原创 2015年07月07日 14:59:00

同事跟我说他用jQuery取不到页面上隐藏元素input的值,他的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>

HTML页面的加载顺序

html、css、js前端老三样,JSP服务器端页面,我们讨论的是加载顺序的问题
  • m0_37550086
  • m0_37550086
  • 2017年08月24日 00:04
  • 651

html、css、js加载顺序

浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联...
  • for_cxc
  • for_cxc
  • 2016年01月09日 16:05
  • 6068

html、css、js文件加载顺序及执行情况

html、css、js文件加载顺序及执行情况
  • muguli2008
  • muguli2008
  • 2016年09月26日 10:29
  • 1109

html页面加载顺序

HTML页面按顺序加载: 总体上,html的是按从上到下的顺序边加载边解析,边生成dom对象,至于在html中夹杂的:   document.write("xxxx");  ...
  • a468903507
  • a468903507
  • 2014年03月30日 13:31
  • 694

javascript运行机制之执行顺序详解

JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制,或者简单地...
  • czw2010
  • czw2010
  • 2014年01月19日 15:51
  • 36499

js 程序执行与顺序实现详解

声明:这是转载的 原帖地址:http://www.jb51.net/article/36755.htm JavaScript是一种描述型脚本语言,由浏览器进行动态的解析与执行,浏览器对于不同的方式...
  • bruce_sky
  • bruce_sky
  • 2015年06月08日 15:46
  • 5645

关于JS执行顺序的问题

在慕课网自由编程时,遇到一个要求: 在网页中插入JS代码,实现输出"JS进阶篇",并弹出对话框,内容为"关注JS高级篇"。 当时首先想到用innerHTML,代码如下: 我们...
  • liyidong2014
  • liyidong2014
  • 2016年10月09日 11:02
  • 143

JavaScript执行机制之执行顺序

JavaScript是一种描述型的脚本语言,不同于C#或者java,它不需要进行编译成中间语言,而是由浏览器动态的解析和执行。今天我们就来说一个JavaScript是如何解析的,它的执行顺序是怎么样的...
  • u014346301
  • u014346301
  • 2016年08月19日 13:39
  • 3792

js编译与执行顺序

JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制,或者简单地...
  • u012763269
  • u012763269
  • 2015年11月20日 09:26
  • 3582

js代码的执行顺序

文章转载自http://www.2cto.com/kf/201401/273825.html JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言...
  • goodgirl1991
  • goodgirl1991
  • 2016年01月05日 13:41
  • 3016
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:浅谈Html的内容加载及JS执行顺序
举报原因:
原因补充:

(最多只允许输入30个字)