动态加载JavaScript文件的3种方式


Posted in Javascript onMay 05, 2018

以下是遇到的几种动态加载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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 Javascript
jQuery编写QQ简易聊天框
Aug 27 jQuery
Node.js的Koa实现JWT用户认证方法
May 05 #Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 #Javascript
Angular模版驱动表单的使用总结
May 05 #Javascript
浅谈Angular HttpClient简单入门
May 04 #Javascript
Vue项目全局配置微信分享思路详解
May 04 #Javascript
vue嵌套路由与404重定向实现方法分析
May 04 #Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 #Javascript
You might like
php的access操作类
2008/04/09 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
python要安装在哪个盘
2020/06/15 Python
python中format函数如何使用
2020/06/22 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
python里反向传播算法详解
2020/11/22 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
全国文明单位申报材料
2014/05/31 职场文书
环保标语口号
2014/06/13 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
英语导游词
2015/02/13 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书