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

最新推荐文章于 2024-03-09 22:59:25 发布
最新推荐文章于 2024-03-09 22:59:25 发布
阅读量3.3w 收藏 31
点赞数 8
分类专栏： Web前端 Web 文章标签： Web前端 jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/accountwcx/article/details/46788681
版权

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

死神的丧钟
关注
  • 8
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
浅谈Javascript 执行顺序
10-26
主要介绍了Javascript 执行顺序，有需要的朋友可以参考一下
js,css,html加载顺序(DOM执行）
mocas_wang的博客
08-29 7513
目录 1 DOM概念 1.1 什么是DOM 1.2 DOM节点 1.3 DOM树 2.js ,css,html执行顺序 2.1 正常网页加载的顺序: 2.2 HTML 加载顺序 2.3 JS加载示例 1 DOM概念 1.1 什么是DOM 首先，什么是DOM？DOM是Document Object Model（文档对象模型）的缩写，是专门操作HTML的API。众所周知，DOM包含核心DOM、XML DOM和HTML DOM，核心DOM能够直接操作所有的结构化文档（html，xml），是中
实现在html页面加载之后执行js方法
Mr_WoLong
01-05 4757
方法一、JS方法οnlοad="load(); 1.最简单的调用方式，直接写到html的body标签里面： <html> <body onload="load();"> </body> </html> 方法二：window.οnlοad=function 引入js,在script中使用window.onload=function方法 <!-- 全局js --> <script src="../js/jquery.min.
js【深度解析】代码的执行顺序
最新发布
朝阳39的博客
03-09 515
我们将每一句要执行的 js 代码当做一个任务，则 js 代码可以按照其执行方式的不同，按下图分类微任务：被放入微任务队列（micro task queue）中等待执行的代码因为Promise、async 、await 都是 ES6 语法定义的宏任务：被放入 Web APIs 中等待执行的代码因为 setTimeout 、setInterval 都是浏览器定义的。
html之页面自动执行（加载）js的几种方法
热门推荐
程序羊的博客
10-22 2万+
1、最简单的调用方式，直接写到html的body标签里面： <html> <body onload="load();"> </body> </html> 2、在脚本中用window.onload： <script type="text/javascript"> window.onload = myfun;...
Javascript在页面中执行的顺序
03-14 1498
一、在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对和之间 由标记的src属性制定外部的js文件 放在事件处理程序中，比如：点击我 作为URL的主体，这个URL使用特殊的Javascript：协议，比如：点击我 利用javascript本身的document.write()方法写入新的javascr
[学习心得][Html][JavaScript]页面加载时执行JavaScript的几种方式
jason_56的博客
05-04 3063
一、JavaScript方式 1.最简单的调用方式，直接写到html的body标签里面： 1 2 <bodyonload="myfunction()"> <html><bodyonload="func1();func2();func3();"></body></html> 2.在JavaScript语句中调用： 1 2 ...
js在html之前加载,js加载前显示loading（页面加载前）
weixin_42520573的博客
06-08 2986
工作中遇到，需要加loading。1、用jquery的load方法读取页面，页面读取完成前显示loading。2、首页js等加载过慢，页面加载完成前显示loading。(1).jquery .load()方法，load完成前显示loading$("#menu1").click(function(){$('#main_loading').show();$('#main-page').load('pa...
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
10-21
下面小编就为大家带来一篇浅谈js在html中的加载执行顺序,多个jquery ready执行顺序。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈JavaScript 的执行顺序
12-03
虽然现代浏览器可以并行的下载JavaScript（部分浏览器），但考虑到JavaScript的依赖关系，他们的执行依然是按照引入顺序进行的。 本文章记录本人在学习 JavaScript 中看书理解到的一些东西，加深记忆和并且整理记录...
html文件中Js执行顺序解析
BlueSea_W的专栏
03-01 1350
html文件中Js执行顺序解析 目录 常规顺序 代码： 控制台输出： 结论：先head代码再body代码 使用休眠时，“并行”还是“串行”处理？ 代码 控制台输出： 结论：并行处理 使用jquery时，ready和onload谁先执行？ 代码 执行结果： 结论，先ready再onload 使用ifram时，ifram内部js何时执行？ 代码 执行结果 结论，ifram内代码在ready后，onload前执行 html文件中js执行顺序受js代码位置、是否使用第三方库等因素
script加载执行顺序
weixin_42495828的博客
01-24 1711
类型 1. defer 异步加载，执行时机是在html解析完成之后，因此不会阻塞html解析，在DOMContentLoaded之前完成执行。多个defer的执行顺序和约定好的加载顺序保持一致 2. async 异步加载，加载完成后会立即执行，是否会阻塞html的解析，需要根据此时html解析是否完成来定。 多个async的执行顺序不确定，需要根据网络请求响应的速度 3. 动态注入script 异步加载和执行，不会阻塞html的解析。在html解析完成后才会去加载和执行脚本 ...
如何保证script标签的加载顺序
李卓书
06-21 1575
本章博文主要解决script标签的加载顺序问题。
JS在 HTML中的执行顺序
CSDNY_88的博客
12-30 1138
JS代码可以在HTML代码的和中引用 1、按照解析HTML代码的先后顺序来决定JS的执行顺序
JavaScript在HTML中的执行顺序与运行机制
DanielChen的博客
11-09 1540
1.JavaScript在HTML中的执行顺序与HTML的加载顺序相同。 执行顺序参考如下代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsOrder</title> <script> function onLoadAlert() {
【原创】Javascript在html中的执行顺序
our2848884的专栏
04-17 429
换了新的工作，需要接触Javascript了。以前总是写php的代码，对Javascript还是很不熟悉的。今天在写代码的时候，发现一个问题：Javascript在html中的执行顺序，特来总结一下。        下面是一段Javascript代码： http-equiv="Content-Type" content="text/html; charset=gb2312" /> 无标题 3
js脚本加载执行顺序
czz19910404的博客
03-14 1934
js脚本加载执行顺序
html与js加载顺序
Java_Zhuang的专栏
09-09 428
......... var initData=${initData}; var actid=initData.act.id; var cust_openid=initData.othermsg.cust_openid; $("#actid").val(actid); $("#cust_openid").val(cust_openid); window.onload=functi
dom vue 加载完 执行_浅谈Vue.js 关于页面加载完成后执行一个方法的问题
06-02
在 Vue.js 中，可以使用 `mounted` 钩子函数来执行页面加载完成后需要执行的方法。`mounted` 钩子函数会在组件挂载到 DOM 上后立即执行。 例如，我们定义了一个 `MyComponent` 组件，需要在页面加载完成后执行 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值