首页 > web前端 > js教程 > 正文

动态加载JS文件3种方式整理

php中世界最好的语言
发布: 2018-05-23 15:01:19
原创
1549 人浏览过

这次给大家带来动态加载JS文件3种方式整理,动态加载JS文件的注意事项有哪些,下面就是实战案例,一起来看一下。

一、使用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(&#39;test.js&#39;,function(){
 alert(&#39;done&#39;);
});
登录后复制

三、使用原生js方法

原理:动态创建script标签,并指定script的src属性

function loadJs(url,callback){
 var script=document.createElement(&#39;script&#39;);
 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(&#39;done&#39;);
 });
登录后复制

还可以使用同样的原理动态加载css文件,只不过插入的的父节点是head标签。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

如何动态引入JS文件

H5中data-*属性使用方法汇总

怎么实现JS同步、异步、延迟加载

以上是动态加载JS文件3种方式整理的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板