js-动态添加脚本

简述使用动态脚本加载JS,并且在浏览器中的兼容处理:

Firefox,Opera,Chrome,Safari3以上版本会在<script>元素接收完成是触发一个load事件,因此可以通过侦听此事件来获得脚本加载完成时的状态:

var script = document.createElement("script");

script.type="text/javascript";

// Firefox,Opera,Chrome,Safari 3+

script.onload=function(){

alert("Script loaded");

}

script.src="file1.js";

document.getElementsByTagName("head")[0].appendChild(script);

IE支持另一种实现方式,它会触发一个readystatechange事件;

下面的函数封装了标准及IE特有的实现方法:

function loadScript(url,callback){

    var script = document.createElement("script");

    script.type="text/javascript";

    if(script.readyState){    //    IE

        script.onreadystatechange = function(){

            if(script.readyState == "loaded"  ||  script.readyState == "complete"){

                script.onreadystatechange = null;        // 只要loaded和complete任何一个触发,则删除事件处理器(以确保事件不会处理两次)

                callback();

            }

        }

    }else{    //其他浏览器

        script.onload = function(){

            callback();

        }

    }

    script.src = url;

    document.getElementsByTagName("head")[0].appendChild(script);

}

loadScript()函数用法如下:

loadScript("file1.js",function(){

    alert("File is loaded");

});

动态脚本加载凭借着它在跨浏览器兼容性和易用的优势,成为最通用的 无阻塞加载解决方案!

一旦页面初始化所需的代码完成下载,你可以继续自由的使用loadScript()去加载页面其他的功能所需的脚本;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容