页面中引入js的几种方法

时间：2024-01-31 07:55:13

通常大家最为熟悉的是一下两种方法：

  1. 在页面中直接写入<script type="text/javascript">js代码</script>。
  2. 在页面中引入外部文件<script src="xx.js"></script>。

下面再介绍几种页面引入js的代码：

  1. 在js中引入外部js，通过document.wirite("scr"+"ipt src=\'xx.js\'></scr"+"ipt">。此时：<script></script>被拆解为"<scr"+"ipt .....</scr"+"ipt">，如果不这样拆解，浏览器可能会把父级js片段关闭掉，从而导致出错。
  2. 在js中引用其他js片段，document.write("<scr"+"ipt>alert(xxx)</scr"+"ipt>");
  3. 通过DOM添加：var scr=document.createElement("script"); scr.src="xxx.js";

下面测试下，不同的方式引入js，加载的时间顺序：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script src="2.js" type="text/javascript"></script>
 7         <script type="text/javascript">
 8              document.write("<scr"+"ipt>alert(4)</scr"+"ipt>");//通过第四种方式引入
 9              document.write("<scr"+"ipt src=\'3.js\'></scr"+"ipt>");//通过第三种方式引入
10              alert(1);
11              document.write("<scr"+"ipt src=\'3.js\'></scr"+"ipt>");
12              alert(5);
13         </script>
14     </head>
15     <body>
16     </body>
17 </html>

执行顺序：2-4-1-5-3-3

第三种和第四种交换顺序后：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script src="2.js" type="text/javascript"></script>
 7         <script type="text/javascript">
 8              document.write("<scr"+"ipt src=\'3.js\'></scr"+"ipt>");//通过第三种方式引入
 9              document.write("<scr"+"ipt>alert(4)</scr"+"ipt>");//通过第四种方式引入 
10              alert(1);
11              document.write("<scr"+"ipt src=\'3.js\'></scr"+"ipt>");
12              alert(5);
13         </script>
14     </head>
15     <body>
16     </body>
17 </html>

执行顺序：2-1-5-3-4-3

可以看出第三种方式：document.wirite("scr"+"ipt src=\'xx.js\'></scr"+"ipt">引入js的代码，执行会迟与直接写入的js文本。

同时，第四种方式引入js的执行和直接写入的文本是按顺序执行。

总结下，常用的一下几种方式引入js代码：

  1. 在页面中直接写入<script type="text/javascript">js代码</script>。
  2. 在页面中引入外部文件<script src="xx.js"></script>。
  3. 在js中引入外部js，通过document.wirite("scr"+"ipt src=\'xx.js\'></scr"+"ipt">。
  4. 在js中引用其他js片段，document.write("<scr"+"ipt>alert(xxx)</scr"+"ipt>")。
  5. 通过DOM添加：var scr=document.createElement("script"); scr.src="xxx.js";

相关文章