动态加载JavaScript文件的3种方式
2018-05-05 11:26
821 查看
以下是遇到的几种动态加载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文件的几种方式
- 动态加载外部 css和javascript脚本 文件
- 浅谈JavaScript异步加载的三种方式——async和defer、动态创建script
- 动态加载外部javascript文件的函数代码分享
- 用JavaScript动态加载CSS和JS文件
- 使用javaScript动态加载Js文件和Css文件
- JS 动态加载js文件和css文件 同步/异步的两种简单方式
- 如何实现JavaScript动态加载CSS和JS文件
- 动态加载外部.js文件时候,javascript的执行顺序问题
- 动态加载JavaScript文件的两种方法
- 用JavaScript动态加载CSS和JS文件
- 用JavaScript动态加载CSS和JS文件
- 使用js加载器动态加载外部Javascript文件
- 动态加载 JavaScript 文件
- JavaScript学习总结(十九)——使用js加载器动态加载外部Javascript文件
- JavaScript动态加载js文件
- js加载之使用DOM方法动态加载Javascript文件
- JavaScript初始化加载的3种方式
- 用JavaScript动态加载CSS和JS文件