动态加载script到页面大约有俩方法

第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码。
第二种是,动态创建一个script标签,设置其src属性,通过把script标签插入到页面head来加载js,相当于在head中写了一个<script src="..."></script>,只不过这个script标签是用js动态创建的

比如说是我们要动态地加载一个callbakc.js,我们就需要这样一个script标签: <script type="text/javascript" src="call.js"></script>

如下代码就是如何通过js来创建这个标签(并且加到head中):

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.src= 'call.js';
head.appendChild(script); 

当加载完call.js, 我们就要调用其中的方法。不过在header.appendChild(script)之后我们不能马上调用其中的js。因为浏览器是异步加载这个js的,我们不知道他什么时候加载完。然而我们可以通过监听事件的办法来判断helper.js是否加载完成。(假设call.js中有一个callback方法)

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.onreadystatechange= function () { if (this.readyState == 'complete') callback();
}
script.onload= function(){ callback();
}
script.src= 'helper.js';
head.appendChild(script); 

我设了2个事件监听函数, 因为在ie中使用onreadystatechange, 而gecko,webkit 浏览器和opera都支持onload。事实上this.readyState == 'complete'并不能工作的很好,理论上状态的变化是如下步骤:
0 uninitialized
1 loading
2 loaded
3 interactive
4 complete
但是有些状态会被跳过。根据经验在ie7中,只能获得loaded和completed中的一个,不能都出现,原因也许是对判断是不是从cache中读取影响了状态的变化,也可能是其他原因。最好把判断条件改成this.readyState == 'loaded' || this.readyState == 'complete'

参考jQuery的实现我们最后实现为:
代码如下:

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.onload = script.onreadystatechange = function() {
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) { help(); // Handle memory leak in IE script.onload = script.onreadystatechange = null;
} };
script.src= 'helper.js';
head.appendChild(script); 

还有一种简单的情况就是可以把help()的调用写在helper.js的最后,那么可以保证在helper.js在加载完后能自动调用help(),当然最后还要能这样是不是适合你的应用。

另外需要注意:

1.因为script标签的src可以跨域访问资源,所以这种方法可以模拟ajax,解决ajax跨域访问的问题。
2.如果用ajax返回的html代码中包含script,则直接用innerHTML插入到dom中是不能使html中的script起作用的。粗略的看了下jQuery().html(html)的原代码,jQuery也是先解析传入的参数,剥离其中的script代码,动态创建script标签,所用jQuery的html方法添加进dom的html如果包含script是可以执行的。如:
代码如下:

$("#content").html("<script>alert('aa');<\/script>"); 

原文链接

最常用的一段代码

在浏览器中,F12之后想要在console中使用jquery,如果网站本身就有自然甚好,如果没有,可以给它动态添加:

var script= document.createElement('script');
script.src= 'https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(script); 

转载于:https://www.cnblogs.com/weiyinfu/p/7193408.html

[转]动态加载javascript相关推荐

  1. 动态加载javascript和css

    动态加载javascript和css 一.动态加载javascript方法 <script type="text/javascript"> var style = do ...

  2. 动态加载JavaScript文件

    目录 配置 无脑方法! 逆袭之道! 一块蛋糕! 结论 源代码 JavaScript文件的动态加载是您必须拥有的非常有用的工具之一.它允许您通过将阻止脚本从加载过程中移出(通常称为"延迟加载& ...

  3. 动态加载Javascript增强版本

    我们经常使用动态加载Javascript,写个函数很容易现实,之前也写过一个函数,不过当加载多个JS时,只能根据浏览器返回的顺序来先后加载,这肯定不是我们想要的,现在使用了一下技巧,当加载多个JS时, ...

  4. HTML5动态加载资源方式,动态加载JavaScript文件的3种方式

    以下是遇到的几种动态加载JavaScript文件的方式,持续更新中... 一.使用document.write/writeln()方式 该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方 ...

  5. HTML5动态加载资源方式,动态加载JavaScript文件的两种方法

    这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval ...

  6. 动态加载javascript

    /* *title:动态加载script文件 *description:动态加载scrip *time:2012-05-16 */function load_script(url, callback) ...

  7. php 动态加载JavaScript文件或者css文件

    1. 动态加载JS文件 第一种方法: test.php <script language="JavaScript" src="test6.php?str=i lov ...

  8. 如何实现动态加载Javascript 文件模块

    前端开发中仅在需要时的时候加载 JavaScript 模块.这样可以提供很大的性能,比如:您有一个组件,例如复杂的视频播放器,它可以使用大量 js,并且该视频仅在用户单击它时才会启动. 那么在这种情况 ...

  9. JavaScript网页实例:在网页里动态加载JavaScript

    把一些逻辑独立的JavaScript脚本文件单独加载,是一种常见的JavaScript动态加载技术.这样做的好处有很多,比如可以减少不必要的JavaScript脚本文件的加载,以提高网页浏览速度. 补 ...

最新文章

  1. 用C语言写的程序如何控制计算机硬件?
  2. Android JNI开发流程介绍
  3. Java-类与对象的创建
  4. 全网最详细 Python如何读取NIFTI格式图像(.nii文件)和 .npy格式文件和pkl标签文件内容
  5. python中的random模块_Python中的random模块
  6. Power BI能否做帕累托分析
  7. Eclipse自动生成返回值对象
  8. hist 和imhist的区别
  9. 《汇编语言》学习(十三)int指令
  10. ACL2021_Enhancing Entity Boundary Detection for Better Chinese Named Entity Recognition
  11. 计算机无法共享访问受限,设置组策略解决共享访问受限问题
  12. 使用pg_repack实现在线vacuum
  13. Python画五角星(turtle初识)
  14. 兴趣变高薪副业,知名插画师走尺带你感受插画的魅力
  15. javascript 递归乘阶
  16. 服务器上部署java项目
  17. perf: interrupt took too long
  18. ROS常用局部路径规划算法比较
  19. 超融合和服务器关系_超融合服务器和超融合一体机有什么区别
  20. 西北大新生赛:星球大战【切割线定理】

热门文章

  1. 【movable-area、movable-view】 可移动区域组件说明
  2. PHP中的Array类型其实是Hashtable
  3. 事务的隔离级别与锁的申请和释放
  4. html5游戏开发-零基础开发RPG游戏-开源讲座(四)
  5. 那年学过的Java笔记一SE基础
  6. python selenium不启动浏览器 爬取数据的方法
  7. 企业数字化转型热潮下,IT技术领导者的10大使命
  8. java实现文件上传和文件查看、下载
  9. 使用ZipCodeValidatorDomainType验证不同国家的邮编
  10. mysql丢失一条事务_SpringBoot之MySQL数据的丢失的元凶--事务(转)