HTML中嵌入Javasript的方法及在页面的执行顺序

一、在HTML中嵌入Javasript的方法

1. 直接在Javascript代码放在标记对<script>和</script>之间
2. 由<script />标记的src属性制定外部的js文件
3. 放在事件处理程序中，比如：<p onclick=”alert(‘我是由onclick事件执行的Javascript’)”>点击我</p>
4. 作为URL的主体，这个URL使用特殊的Javascript：协议，比如：<a href=”javascript:alert(‘我是由javascript:协议执行的javascript’)”>点击我</a>
5. 利用javascript本身的document.write()方法写入新的javascript代码
6. 利用Ajax异步获取javascript代码，然后执行

第3种和第4种方法写入的Javascript需要触发才能执行，所以除非特别设置，否则页面加载时不会执行。

二、Javascript在页面的执行顺序

1. 页面上的Javascript代码是HTML文档的一部分，所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序， <script />标记里面的或者通过src引入的外部JS，都是按照其语句出现的顺序执行，而且执行过程是文档装载的一部分。
2. 每个脚本定义的全局变量和函数，都可以被后面执行的脚本所调用。
3. 变量的调用，必须是前面已经声明，否则获取的变量值是undefined。

   1 <script type="text/javascript">//<![CDATA[ 2 alert(tmp); //输出 undefined 3 var tmp = '111'; 4 alert(tmp); //输出 111 5 //]]> 6 </script>
   

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

   1 <script type="text/javascript">//<![CDATA[ 2 test(); //浏览器报错 3 //]]> 4 </script> 5 <script type="text/javascript">//<![CDATA[ 6 test(); //输出 fun! 7 function test(){alert('fun!');} 8 //]]> 9 </script>
   

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

   01 <script type="text/javascript">//<![CDATA[ 02 document.write('<script type="text/javascript" src="test.js"><\/script>'); 03 document.write('<script type="text/javascript">'); 04 document.write('alert("222");') 05 document.write('alert("变量保存值" + tmpStr);'); 06 document.write('<\/script>'); 07 //]]> 08 </script> 09 <script type="text/javascript">//<![CDATA[ 10 alert("333"); 11 //]]> 12 </script>
   

   test.js的内容是：

   1 var tmpStr = '111'; 2 alert(tmpStr);
   

   • 在Firefox和Opera中的弹出值的顺序是：111、222、变量保存值111、333
   • 在IE中弹出值的顺序是：222、111、333, 同时浏览器报错：tmpStr未定义

   原因可能是IE在document.write时，并未等待加载SRC中的Javascript代码完毕后，才执行下一行，所以导致222先弹出，并且执行到document.write(‘document.write(“变量保存值” + tmpStr)’)调用tmpStr时，tmpStr并未定义，从而报错。

   要解决这个问题，可以利用HTML解析时解析完一个HTML标签，再执行下一个的原理，把代码拆分来实现(上面第一段js分拆成两段)：

   01 <script type="text/javascript">//<![CDATA[ 02 document.write('<script type="text/javascript" src="test.js"><\/script>'); 03 //]]> 04 </script> 05 <script type="text/javascript">//<![CDATA[ 06 document.write('<script type="text/javascript">'); 07 document.write('alert("222");') 08 document.write('alert("变量保存值" + tmpStr);'); 09 document.write('<\/script>'); 10 //]]> 11 </script> 12 <script type="text/javascript">//<![CDATA[ 13 alert('333'); 14 //]]> 15 </script>
   

   这样IE下和其他浏览器输出值的顺序一致了：111、222、变量保存值111、333。

三、如何改变Javascript在页面的执行顺序

1. 利用window.onload

   1 <script type="text/javascript">//<![CDATA[ 2 window.onload = func1; 3 function func1(){alert('111');} 4 alert('222'); 5 //]]> 6 </script>
   

   输出值顺序是 222、111。

   需要注意的是，如果存在多个winodws.onload的话，只有最后一个生效，解决的办法是：

   1 window.onload = function(){f();f1();f2();.....}

   利用2级DOM事件类型

   1 if(document.addEventListener){ 2 window.addEventListener('load',f,false); 3 window.addEventListener('load',f1,false); 4 ... 5 }else{ 6 window.attachEvent('onload',f); 7 window.attachEvent('onload',f1); 8 ... 9 }
   

2. IE中可以利用defer，defer作用是把代码加载下来，并不立即执行，等文档装载完毕之后再执行，有点类似window.onload，但是没有window.onload那样的局限性，可以重复使用，但是只在IE中有效，所以上面的例子可以修改成为

   01 <script type="text/javascript">//<![CDATA[ 02 document.write('<script type="text/javascript" src="test.js"><\/script>'); 03 document.write('<script type="text/javascript" defer="defer">'); 04 document.write('alert("222");') 05 document.write('alert("变量保存值" + tmpStr);'); 06 document.write('<\/script>'); 07 //]]> 08 </script> 09 <script type="text/javascript">//<![CDATA[ 10 alert("333"); 11 //]]> 12 </script>
   

   这样IE就不报错了，输出值的顺序变成：111、333、222、变量保存值111

   当HTML解析器遇到一个脚本，它必须按常规终止对文档的解析并等待脚本执行。为了解决这个问题HTML4标准定义了defer。通过defer来提示浏览器可以继续解析HTML文档，并延迟执行脚本。这种延迟在脚本从外部文件载入时非常有用，让浏览器不必等待外部文件全部载入之后才继续执行，能有效的提高性能。IE是目前唯一支持defer属性的浏览器，但IE并没有正确的实现了defer属性，因为延迟的脚本总是被延迟，直到文档结束，而不是只延迟到下一个非延迟的脚本。这意味着，IE中延迟的脚本的执行顺序相当混乱，并且不能定义任何后面非延迟脚本并须的函数和变量。在IE中所有的defer的脚本执行时间应该都是HTML文档树建立以后，window.onload之前。

3. 利用Ajax。
   因为xmlhttpRequest能判断外部文档加载的状态，所以能够改变代码的加载顺序。

4、一些注意事项:

以上所讲的deffer看似用起来没什么问题，但是实际上无法兼容Mozilla。所以通常我们还是要借助window.onload来实现。但是，之后就没有问题了么？假设页面dom里有一张图片，像这样：

1 <img src="picture.jpg" >

而这张图片又非常之大(例如30MB，这个数字虽然有点极端，但真的在有些网站出现过!)，那么在dom加载完毕之前，js是无法执行的。问题就在于假设dom提供了用户交互的功能。例如按钮，输入表单等，这个时候他们已经是被呈现了的，因此就很有可能产生无效的用户行为。

我们不能指望用户像我们预期的那样等待页面显示加载完毕后再发生动作，而要把用户考虑成随时随刻会到处乱点的朋友。

这个问题又如何解决呢？既然我们需要页面结构输出后执行js，我们不妨把js入口函数定义在页面最下面好了。

1 <head> 2 <script src="x.js" type="text/javascript"></script> 3 </head> 4 <body> 5 ...... 6 <img src="picture.jpg" > 7 <script type="text/javascript">init();</script> 8 </body>

这样就达到我们的目的了，页面结构输出完毕后就执行js，不用考虑图片的加载。

但是在文档末尾嵌入一条js脚本，毕竟容易被忽略，把关键的程序入口放在这种渺小的角落，总觉得不太合适。那有什么预留退路的方法没有呢？

我们可以把结尾的脚本稍微修改一下：

1 <head> 2 <script src="x.js" type="text/javascript"></script> 3 </head> 4 <body> 5 ...... 6 <img src="picture.jpg" > 7 <script type="text/javascript">window.onload();</script> 8 </body>

而在js里预先把入口定义给onload事件：

1 window.onload = function() { 2 alert("load over"); 3 }

这时候页面结构加载完毕后就会调用onload函数，而即使漏写了dom里的onload入口，js自身里的onload定义也会在页面加载完毕后执行，这样退路就留出来了。

不过这时候有个问题，onload事件会执行两次，可以在js的onload实现里解决这个问题，改成这样：

1 var flag = false; 2 window.onload = function() { 3 if (flag) {return;} 4 flag= true; 5 alert("load over"); 6 }

这样似乎已经解决我们所有的问题了，不过仍然有些小遗憾，因为最后一行代码，致使行为与结构没有分离开来，要 unobtrusive 就要 unobtrusive 的彻底，为了达到完美的分离，还有很大的讨论空间。

而对于js文件内部的onload事件，我们还可以参考 Simon Willison 的addLoadEvent函数来优化：

01 function addLoadEvent(func) { 02 var oldonload = window.onload; 03 if (typeof window.onload != 'function') { 04 window.onload = func; 05 } else { 06 window.onload = function() { 07 if (oldonload) { 08 oldonload(); 09 } 10 func(); 11 } 12 } 13 }

然后，我们就可以在js里肆无忌惮地不停地将各个不同的函数添加到onload事件响应中了：

1 addLoadEvent(funcA); 2 addLoadEvent(funcB); 3 addLoadEvent(funcC);

当然，同一个js里设置多个onload响应函数其实没什么必要，我们完全可以把funcA、funcB、funcC封装在一个函数里add，addLoadEvent函数，更理想的状态是为页面动态调用的多个js文件添加入口。