如何在html页面动态加载js文件

JavaScript023

如何在html页面动态加载js文件,第1张

下面介绍三种异步执行加载Js 脚本的方法。

1、直接document.write

<script language="javascript">

document.write("<script src='test.js'><\/script>")

</script>

2、动态改变已有script的src 属性

<script src='' id="s1"></script>

<script language="javascript">

s1.src="test.js"

</script>

3、动态创建 script元素

<script>

var oHead = document.getElementsByTagName('HEAD').item(0)

var oScript= document.createElement("script")

oScript.type = "text/javascript"

oScript.src="test.js"

oHead.appendChild( oScript)

</script>

注 ，

这三种方法都是异步的，所以在采用这类方法动态加载Js 的同时，主界面的Js脚本是继续执行的，所以可能出现通过异步加载的Js代码得不到预期的效果的情况。这时候可以考虑采用Ajax加载Js的方法。

大概原理 ：用XMLHTTP取得要脚本的内容，再创建 Script 对象。另外注意编码的保持一致。因为服务器与XML使用UTF8编码传送数据。

最近机顶盒遇到一种特殊场景需要按需加载js，所以特此记录动态加载JS的方法

这个方法加载的是本地的js，如果要加载非本地js的话，应该要加上crossorigin头。