• 欢迎访问小辉博客,有访必回!广告为已更换为百度联盟,希望随手点下,虽然博客是兴趣所在,但也想有一个良性循环!请大家谅解!

js在html中的加载顺序

建站相关 小辉 443次浏览 已收录 0个评论 扫描二维码

1.加载顺序:引入标记<script />的出现顺序,

页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序, 
<script />标记里面的或者通过src引入的外部JS,都是按照其语句出现的顺序执行,而且执行过程是文档装载的一部分。

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题 3</title> <script> alert("1-最先执行"); </script> </head> <body onload="alert(’3-最后执行’);"> <script> alert("2-接着执行"); </script> </body> </html>
复制代码

 

 

2、每个脚本定义的全局变量和函数,都可以被后面执行的脚本所调用。


变量的调用,必须是前面已经声明,否则获取的变量值是undefined。

复制代码
<script type="text/javscrpt">//<![CDATA[  alert(tmp); //输出 undefined var   tmp = 1;
  alert(tmp); //输出 1//]]> </script>
复制代码

 

3.同一段脚本,函数定义可以出现在函数调用的后面,但是如果是分别在两段代码,且函数调用在第一段代码中,则会报函数未定义错误。

复制代码
<script type="text/javscrpt">//<![CDATA[  aa(); //浏览器报错//]]> </script>
<script type="text/javscrpt">//<![CDATA[  aa(); //输出 1   function aa()
  {
    alert(1);
  }//]]> </script>
复制代码


4.document.write()会把输出写入到脚本文档所在的位置,浏览器解析完documemt.write()所在文档内容后,继续解析document.write()输出的内容,
然后在继续解析HTML文档。

复制代码
<script type="text/javascript">//<![CDATA[   document.write(’<script type="text/javascript" src="test.js"><//script>’);
  document.write(’<script type="text/javascript">’);
  document.write(’alert(2);’)
  document.write(’alert("我是" + tmpStr);’);
  document.write(’<//script>’); //]]> </script>
<script type="text/javascript">//<![CDATA[   alert(3); //]]> </script>
 
test.js的内容是:
var tmpStr = 1;   
alert(tmpStr); 
复制代码

在Firefox和Opera中的弹出值的顺序是:1、2、我是1、3 
在IE中弹出值的顺序是:2、1、3,同时浏览器报错:tmpStr未定义 
原因可能是IE在document.write时,并未等待加载SRC中的Javascript代码完毕后,才执行下一行,所以导致2先弹出,
并且执行到document.write(’document.write(“我是” + tmpStr)’)调用tmpStr时,tmpStr并未定义,从而报错。 
解决这个问题,可以利用HTML解析是解析完一个HTML标签,再执行下一个的原理,把代码拆分来实现: 
<script type=”text/javascript”>//<![CDATA[
    document.write(’<script type=”text/javascript” src=”test.js”><//script>’);
        //]]>
</script>
<script type=”text/javascript”>//<![CDATA[    
    document.write(’<script type=”text/javascript”>’);    
    document.write(’alert(2);’)
    document.write(’alert(“我是” + tmpStr);’);    
    document.write(’<//script>’);    
    //]]>
</script>  
 
 <script type=”text/javascript”>//<![CDATA[    
    alert(3);    
    //]]>
</script> 
这样IE下和其他浏览器输出值的顺序都是一直的了:1、2、我是1、3

总结:IE下,用Document.Write方法引用js文件时,js文件会出现尚未加载就直接调用的情况,因此建议将引用的JS文件单独放在一个script块中。以确保引用的js文件完全加载后,再继续执行后面的Document.Write内容

 

5、同名JS函数执行顺序

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript"> function aa() {
        alert(First aa)
    } </script> <title></title> </head> <body> <form id="form1" runat="server"> <br /> <input id="Button1" type="button" value="button" onclick="aa();"/> </form> </body> <script type="text/javascript"> function aa(s) {
        alert(Second aa);
    } function aa(s) {
        alert(Last aa);
    } </script> </html>
复制代码

点击“botton”执行结果: Last aa

 

   在js里出现同名函数后,你在web页面里调用改js函数后,总是调用页面中最后一个加载的函数。


小辉博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明js在html中的加载顺序

喜欢 (0)
[cnbzzh@qq.com]
分享 (0)
小辉
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址