HTML5动态加载资源方式,动态加载JavaScript文件的两种方法
这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下
第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval()实施代码。第二种是,动静创建一个script标签,配置其src属性,经过把script标签插入到页面head来加载js,相当于正在head中写了一个,只可是这个script标签是用js动静创建的
比喻说是我们要动静地加载一个callbakc.js,我们就必要多么一个script标签:
代码如下:
如下代码就是如何通过js来创建这个标签(并且加到head中):
代码如下:
var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
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.οnlοad= function(){
callback();
}
script.src= 'helper.js';
head.appendChild(script);
我设了2个事件监听函数, 因为在ie中使用onreadystatechange, 而gecko,webkit 浏览器和opera都支持onload。事实上this.readyState == 'complete'并不能工作的很好,理论上状态的变化是如下步骤:
1.uninitialized
2.loading
3.loaded
4.interactive
5.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是可以执行的。如:
jQuery("#content").html("
以上就是动态加载JavaScript文件的方法,希望对大家的学习有所帮助。
HTML5动态加载资源方式,动态加载JavaScript文件的两种方法相关推荐
- 【PyQt】pyqt加载调用ui界面文件的两种方法
使用PyQt开发界面软件,自然会用到Qt Designer进行界面设计,拖拖按钮.设置菜单什么的,然后保存为 .ui 文件.但是在 Python 代码里面如何使用这些 .ui 文件呢? 有两种方法: ...
- HTML5动态加载资源方式,动态加载JavaScript文件的3种方式
以下是遇到的几种动态加载JavaScript文件的方式,持续更新中... 一.使用document.write/writeln()方式 该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方 ...
- php动态加载js,动态加载script文件的两种方法_javascript技巧
动态加载script到页面大约有俩方法 第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其s ...
- php如果单数前面加0,php左边用0填充补齐的两种方法
如果要自动生成学号,自动生成某某编号,就像这样的形式"d0000009"."d0000027"时,那么就会面临一个问题,怎么把左边用0补齐成这样8位数的编码呢? ...
- C#读取资源文件的两种方法及保存资源文件到本地
方法1 GetManifestResourceStream VB.NET中资源的名称为:项目默认命名空间.资源文件名 C#中则是:项目命名空间.资源文件所在文件夹名.资源文件名 例如: istr = ...
- C#读取资源文件的两种方法
http://lwl0606.cmszs.com/?p=1021 方法1 GetManifestResourceStream VB.NET中资源的名称为:项目默认命名空间.资源文件名 C#中则是:项目 ...
- 微信html5复制剪切板,微信h5实现复制内容到剪贴板,两种方法
先介绍第一种,这种方法对ios有一些不兼容,不过也看运气 先写HTML内容 微信:22 复制 JS代码 首先引入jq $(".copy")[0].onclick = functio ...
- jsp:jsp包含文件的两种方式
第一种:include指令 include指令:当JSP转换成Servlet时引入指定文件(指令元素),这是一种静态包含,它运行的时候不会单独编译成.class文件,它生成一个新的整体.class文件 ...
- python的三种取整方式_python 取整的两种方法
问题简介: 要把一个浮点数(float)整数部分提取出来.比如把"2.1"变成"2"的这一过程:现在我们给这个过程起一个名字叫"取整".那么 ...
最新文章
- Blender模块化建筑环境地形场景制作视频教程 Creating modular environments
- Android Market 链接的生成与分享
- linux服务之DHCP
- C#结合js 上传文件和删除文件(技术点有:asp.net mvc ,nhibernate,ajax等)
- C++ Primer 5th笔记(chap 13 拷贝控制)引用计数
- Linux系统的iptables防火墙、SNAT、DNAT原理与设置规则
- SpringBoot整合Redis代码相关配置
- 阿里战微信!20 亿元扶持小程序开发者
- PHP四种基本排序算法
- html语言字体为隶书,css如何设置隶书字体库
- 批量备注订单(淘宝/天猫/1688/拼多多/京东/抖音/快手)
- 洛谷P1067-多项式输出(模拟好题!)
- 练习题12-外观数列
- 使用百度AI将语音转换成文字(JAVA)
- Python分别用单线程,多线程,异步协程爬取一部小说,最快仅需要5s
- 关于出现无法查找或打开PCB文件的问题解决思路
- chrome无痕模式可访问但正常模式访问不了
- MS90C386B:1Port LVDS转LVTTL
- P5006 [yLOI2018] 大美江湖
- 操作必须使用一个可更新的查询问题