动态加载Js文件的三种方法

来源:博客园 分类: 文章浏览史 发布时间:2021-04-26 14:11:33 最后更新:2021-04-26 浏览:89
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2021-04-26 14:11:33

碰到需要加载多个Js文件的情况,使用选择性的动态加载Js ,可以提高页面显示的速度和效率。

下面介绍三种异步执行加载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编码传送数据。

php技术微信