首页 > 代码库 > 页面中引入js的几种方法
页面中引入js的几种方法
通常大家最为熟悉的是一下两种方法：
- 在页面中直接写入<script type="text/javascript">js代码</script>。
- 在页面中引入外部文件<script src="http://www.mamicode.com/xx.js"></script>。
下面再介绍几种页面引入js的代码：
- 在js中引入外部js，通过document.wirite("scr"+"ipt src=http://www.mamicode.com/‘xx.js‘><script></script>被拆解为"<scr"+"ipt .....</scr"+"ipt">，如果不这样拆解，浏览器可能会把父级js片段关闭掉，从而导致出错。
- 在js中引用其他js片段，document.write("<scr"+"ipt>alert(xxx)</scr"+"ipt>");
- 通过DOM添加：var scr=document.createElement("script"); scr.src="http://www.mamicode.com/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=http://www.mamicode.com/‘3.js‘>"+"ipt>");//通过第三种方式引入10 alert(1);11 document.write("<scr"+"ipt src=http://www.mamicode.com/‘3.js‘>"+"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=http://www.mamicode.com/‘3.js‘>"+"ipt>");//通过第三种方式引入 9 document.write("<scr"+"ipt>alert(4)</scr"+"ipt>");//通过第四种方式引入 10 alert(1);11 document.write("<scr"+"ipt src=http://www.mamicode.com/‘3.js‘>"+"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=http://www.mamicode.com/‘xx.js‘>
同时，第四种方式引入js的执行和直接写入的文本是按顺序执行。
总结下，常用的一下几种方式引入js代码：
- 在页面中直接写入<script type="text/javascript">js代码</script>。
- 在页面中引入外部文件<script src="http://www.mamicode.com/xx.js"></script>。
- 在js中引入外部js，通过document.wirite("scr"+"ipt src=http://www.mamicode.com/‘xx.js‘>
- 在js中引用其他js片段，document.write("<scr"+"ipt>alert(xxx)</scr"+"ipt>")。
- 通过DOM添加：var scr=document.createElement("script"); scr.src="http://www.mamicode.com/xxx.js";
页面中引入js的几种方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。