浅谈Html的内容加载及JS执行顺序
来源:互联网 发布:什么是大数据挖掘 编辑:程序博客网 时间:2024/06/05 13:27
同事跟我说他用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();});
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>
1 1
- 浅谈Html的内容加载及JS执行顺序
- 浅谈Html的内容加载及JS执行顺序
- 浅谈Html的内容加载及JS执行顺序
- 浅谈Html的内容加载及JS执行顺序
- js在html中的加载执行顺序
- js在html中的加载执行顺序
- js在html中的加载执行顺序
- js在html中的加载执行顺序
- js在html中的加载执行顺序
- js在html中的加载执行顺序
- JS 的加载执行顺序
- JS 的加载执行顺序 .
- html css js加载顺序及执行情况
- Html页面内容的执行顺序
- 前端html页面内容的加载顺序
- js中页面加载完成后执行的几种方式及执行顺序
- html,js加载顺序
- js的并行加载与顺序执行
- JMeter数据库SQLServer测试计划
- js全屏
- css布局兼容细节
- SQL里面不带参数的存储过程与视图的区别
- STM32库函数uint8_t GPIO_ReadInputDataBit ( GPIO_TypeDef * GPIOx, uint16_t GPIO_Pin )
- 浅谈Html的内容加载及JS执行顺序
- jQueryEasyUi验证
- js固定div在屏幕最右边
- android开发的一些建议
- Git 学习
- 作用域测试
- opencart2 添加水印图片
- input的disable和readonle
- 【转】 slam 优化包g2o 学习