浅谈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服务器端页面,我们讨论的是加载顺序的问题

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

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

html、css、js加载顺序

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

页面加载的顺序和window.onload的作用

在说我们的主题之前,我们首先来看几段代码:   例子一、首先我们把script代码块放在head标签内,运行之后发现,点击按钮没有反应。 test1 ...

页面的加载与渲染顺序

页面的加载与渲染顺序: 1.一个页面的加载顺序是从上到下顺序加载的,并且加载与渲染同时进行。 2.引用外部js文件时,当在加载过程中遇到标签时,浏览器会向服务器发送一个reques并等待该re...

关于jsp、js、html代码执行顺序

alert("going..."); function go() { alert("go"); } function go2() { alert("go2"); } 如上代码,...
  • itzyjr
  • itzyjr
  • 2017年04月22日 00:49
  • 744

对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

最近在研究HTML页面中JavaScript的执行顺序问题。在JavaScript中,定义一个方法或者函数有很多方式,最常见的有2中,function语句式与函数直接量方式。   对于function...

HTML+JS 代码块加载顺序

html页面中的来说是按照顺序向下执行的; 外链js数据是也是按照页面的引入顺序执行的;(其实可以看做引入的js就在当前引入的位置); $(function(){})这种代码块的数据会在页面等加载完以...

浏览器加载和渲染HTML的顺序

转载自 http://www.cnblogs.com/elegance/p/4233986.html 浏览器加载和渲染html的顺序 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服...

详细解析浏览器加载网页的整个过程

现代浏览器的工作原理简介浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工 作原理,我们将看到,从你在地址栏输入google.com到你看到google主页过程中都发生了什么。 将讨论的浏览器...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:浅谈Html的内容加载及JS执行顺序
举报原因:
原因补充:

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