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

同事跟我说他用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>

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-10-24 19:52:26

浅谈Html的内容加载及JS执行顺序的相关文章

Javascript在页面加载时的执行顺序【转】

一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属性制定外部的js文件 放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p> 作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href="

浅谈android中异步加载之&quot;取消异步加载&quot;二

首先,我得解释一下为什么我的标题取消异步加载打引号,这是因为可能最后实现效果并不是你自己想象中的那样.大家看取消异步加载,这不是很简单吗?AsyncTask中不是有一个cancel方法吗?直接调用该方法不就行了吗?但是事实上是这样的吗?如果真是这样,我相信我就没有以写这个作为一篇博客的必要了.为什么会有这样的想法呢?实际上源于我上一篇中Demo中的一个BUG,然后解决该BUG,需要去取消异步任务,是怎么样,我们不妨来看看. 首先,还是来一起回顾一下上篇博客中加载进度条Demo吧. AsyncTa

异步加载脚本保持执行顺序

首先是外部脚本和行内脚本,对于异步加载的脚本,会导致竞争状态,使得出现未定义的错. 采用Script Dom技术测试: 代码: <script type="text/javascript"> var scriptElem = document.createElement('script');  scriptElem.src = "js/jquery-2.1.1.js"; document.getElementsByTagName('head')[0].a

再谈javascript图片预加载技术

图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展示出来,所以lightbox显示的图片的速度体验要比直接输出的差很多,而本文说提到的预加载技术主要针对获取图片尺寸. 一段典型的使用预加载获取图片大小的例子: var imgLoad = function (url, callback) {    var img = new Image();   

linux函数深入探索——open函数打开文件是否将文件内容加载到内存空间

转自:https://blog.csdn.net/qq_17019203/article/details/85051627 问题:open(2)函数打开文件是否将文件内容加载到内存空间 首先,文件打开后都会产生一个文件描述符fd,这个文件描述符其实是记录在PCB的文件描述符表中,而这个文件描述符实质上是一个结构体,用来存放跟打开文件相关的信息,基于此前提,我产生了两种假设 1.文件描述符结构体中只存储了文件在硬盘中的相应地址信息,并不将文件内容加载到内存中,这样做的好处是减少内存空间的占用,但大

jquery.ready可以在文档加载后尽快执行对文档的操作

jquery 1.12.4中ready的关键代码 1 jQuery.ready.promise = function( obj ) { 2 if ( !readyList ) { 3 4 readyList = jQuery.Deferred(); 5 6 // Catch cases where $(document).ready() is called 7 // after the browser event has already occurred. 8 // Support: IE6-1

easyui日期在未加载easyui-lang-zh_CN.js出现英文的情况下加载中文的方法

我们有时候在操作easyui的时候本来是加载了easyui-lang-zh_CN.js中文文件包,但是还是出现了英文.使得我们不得埋怨这框架咋这么不好用,其实我们仔细看看这个中文包就会发现里面很多都是重新修改了定义语言的参数.假如我们用jquery初始化加载方法$(function(){//这里是我们自定义的操作方法});这个方法里面的东西执行后发现更本没加载我们的中文下面是我写的datetimebox日期控件js代码: $(function () { function adddaytimes(

dojo实现加载新版本js库

使用dojo后一直纠结js文件内容有更新时如何加载,这两天终于把问题解决了,原来想加一个库文件代替dojo相应的函数,但发现dojo库纠緾得太紧了,就在原文件上改. 加载分两种情况一种dojo.text!加载或不用执行代码,另外一个是作为库加载,这两个要分开处理. 第一种是直接在加载的url后面加入版本号"?v=xxx". toUrl = req.toUrl = function(name, referenceModule){ var moduleInfo = getModuleInf

处理页面加载图片js（等比例压缩图片）

第一页面html  <div class="admin">${answer.content}</div> <div class="adminss">${answer.content}</div> 第二循环压缩${answer.content}内容中的大图片 <script> jQuery(function(){ setTimeout('imgLoad()'1000)//延长加载一分钟 }); functio