通常大家最为熟悉的是一下两种方法:
- 在页面中直接写入<script type="text/javascript">js代码</script>。
- 在页面中引入外部文件<script src="xx.js"></script>。
下面再介绍几种页面引入js的代码:
- 在js中引入外部js,通过document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">。此时:<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="xxx.js";
下面测试下,不同的方式引入js,加载的时间顺序:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="2.js" type="text/javascript"></script>
<script type="text/javascript">
document.write("<scr"+"ipt>alert(4)</scr"+"ipt>");//通过第四种方式引入
document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");//通过第三种方式引入
alert(1);
document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");
alert(5);
</script>
</head>
<body>
</body>
</html>
执行顺序:2-4-1-5-3-3
第三种和第四种交换顺序后:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="2.js" type="text/javascript"></script>
<script type="text/javascript">
document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");//通过第三种方式引入
document.write("<scr"+"ipt>alert(4)</scr"+"ipt>");//通过第四种方式引入
alert(1);
document.write("<scr"+"ipt src='3.js'></scr"+"ipt>");
alert(5);
</script>
</head>
<body>
</body>
</html>
执行顺序:2-1-5-3-4-3
可以看出第三种方式:document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">引入js的代码,执行会迟与直接写入的js文本。
同时,第四种方式引入js的执行和直接写入的文本是按顺序执行。
总结下,常用的一下几种方式引入js代码:
- 在页面中直接写入<script type="text/javascript">js代码</script>。
- 在页面中引入外部文件<script src="xx.js"></script>。
- 在js中引入外部js,通过document.wirite("scr"+"ipt src='xx.js'></scr"+"ipt">。
- 在js中引用其他js片段,document.write("<scr"+"ipt>alert(xxx)</scr"+"ipt>")。
- 通过DOM添加:var scr=document.createElement("script"); scr.src="xxx.js";