浅谈Html的内容加载及JS执行顺序
来源:互联网 发布:hishop销客多源码 编辑:程序博客网 时间:2024/06/05 02:25
同事跟我说他用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>
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();
- });
最终修改后的页面
- <!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>
阅读全文
0 0
- 浅谈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的并行加载与顺序执行
- windows2008创建域控
- BaseActivity中默认添加ToolBar
- javascript写滑动图片
- leetcode--Majority Element
- 【Unity3D技术文档翻译】第1.0篇 AssetBundles
- 浅谈Html的内容加载及JS执行顺序
- 01串 (南阳理工oj 题目252)
- Oracle 12c创建用户和切换CDB、PDB
- redis
- vue.js数据绑定
- android APP内显示PDF文件
- 关于Linux 线程pthread_join的用法
- leetcode--Reverse Linked List
- Spark Streaming实例