动态加载JavaScript文件的3种方式
更新时间：2018年05月05日 11:26:44 作者：monster1935
第一种是使用document.write/writeln(）方式，第二种使用jQuery，第三种是使用原生js方法，感兴趣的小伙伴们可以参考一下
以下是遇到的几种动态加载JavaScript文件的方式，持续更新中。。。
一、使用document.write/writeln(）方式
该种方式可以实现js文件的动态加载，原理就是在重写文档流，这种方式会导致整个页面重绘。
实现方式:
复制代码 代码如下:
document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");
需要注意的是特殊字符的转义。
二、使用jQuery
使用getScript(url,callback)方法实现动态加载js文件
$.getScript('test.js',function(){
alert('done');
});
三、使用原生js方法
原理：动态创建script标签，并指定script的src属性
function loadJs(url,callback){
var script=document.createElement('script');
script.type="text/javascript";
if(typeof(callback)!="undefined"){
if(script.readyState){
script.onreadystatechange=function(){
if(script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange=null;
callback();
}
}
}else{
script.onload=function(){
callback();
}
}
}
script.src=url;
document.body.appendChild(script);
}
loadJs("test.js",function(){
alert('done');
});
还可以使用同样的原理动态加载css文件，只不过插入的的父节点是head标签。
以上就是动态加载JavaScript文件的方法，希望对大家的学习有所帮助。
相关文章
这篇文章主要为大家详细介绍了javascript事件的绑定基础实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
在本篇文章里小编给大家分享的是关于javascript随机变色的相关实例内容，需要的朋友们可以测试下。2019-10-10
数独（すうどく，Sūdoku）是一种运用纸、笔进行演算的逻辑游戏。玩家需要根据9×9盘面上的已知数字，推理出所有剩余空格的数字，并满足每一行、每一列、每一个粗线宫内的数字均含1-9，不重复。2015-03-03
这篇文章主要介绍了javascript判断一个变量是数组还是对象，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
这篇文章主要介绍了中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-09-09
firefox没有outerHTML用以下方法解决2009-06-06
this指触发事件的对象，接下来为大家分享下javascript中onclick(this)的用法，感兴趣的朋友可以参考下哈，希望对你有所帮助2013-04-04
将阿拉伯数字转化中国大写数字的函数代码，需要的朋友可以参考下。2010-04-04
本文主要介绍了vue中双token和无感刷新token的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-05-05
了解最新的框架，提升我们的开发效率。2009-03-03
最新评论