动态加载JS文件方法总结-js教程-PHP中文网

动态加载JS文件方法总结

php中世界最好的语言

发布： 2018-05-07 17:06:27

原创

1307人浏览过

这次给大家带来动态加载JS文件方法总结，动态加载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('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');
 });

登录后复制

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

推荐阅读：

Android开发指南中文pdf版

Android开发指南中文pdf版,学习android的朋友可以参考下。应用程序基础Application Fundamentals 关键类应用程序组件激活组件：intent 关闭组件 manifest文件 Intent过滤器 Activity和任务 Affinity（吸引力）和新任务加载模式清理堆栈启动任务进程和线程进程线程远程过程调用线程安全方法组件生命周期 Activity生命周期调用父类服务生命周期广播接收器生命周期进程与生命周期用户界面User Interface