动态加载script文件的两种方法
2023-06-13 09:15:04 时间
动态加载script到页面大约有俩方法
第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码。第二种是,动态创建一个script标签,设置其src属性,通过把script标签插入到页面head来加载js,相当于在head中写了一个<scriptsrc="..."></script>,只不过这个script标签是用js动态创建的
比如说是我们要动态地加载一个callbakc.js,我们就需要这样一个script标签:
复制代码代码如下:
第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码。第二种是,动态创建一个script标签,设置其src属性,通过把script标签插入到页面head来加载js,相当于在head中写了一个<scriptsrc="..."></script>,只不过这个script标签是用js动态创建的
比如说是我们要动态地加载一个callbakc.js,我们就需要这样一个script标签:
<scripttype="text/javascript"src="call.js"></script>
如下代码就是如何通过js来创建这个标签(并且加到head中):
varhead=document.getElementsByTagName("head")[0];
varscript=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方法)
varhead=document.getElementsByTagName("head")[0];
varscript=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"并不能工作的很好,理论上状态的变化是如下步骤:
0uninitialized
1loading
2loaded
3interactive
4complete
但是有些状态会被跳过。根据经验在ie7中,只能获得loaded和completed中的一个,不能都出现,原因也许是对判断是不是从cache中读取影响了状态的变化,也可能是其他原因。最好把判断条件改成this.readyState=="loaded"||this.readyState=="complete"
参考jQuery的实现我们最后实现为:
varhead=document.getElementsByTagName("head")[0];
varscript=document.createElement("script");
script.type="text/javascript";
script.onload=script.onreadystatechange=function(){
if(!this.readyState||this.readyState==="loaded"||this.readyState==="complete"){
help();
//HandlememoryleakinIE
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("<script>alert("aa");<\/script>");
相关文章
- 大文件切割技巧
- vue动态引入js文件的方法_vue如何引入js文件
- Pycharm创建文件模板
- iOS获取App各种文件的路径方法汇集详解手机开发
- Linux文件系统监控实践(linux监控文件)
- MySQL安装MSI文件的指南(mysql安装msi)
- Linux 下简单取文件后缀名的方法(linux取文件后缀名)
- MSSQL导出SQL文件的简易方法(mssql导出sql文件)
- Linux SH文件权限管理实践(linuxsh文件权限)
- Linux读取TXT文件的快捷方法(linux读取txt文件)
- 文件快速熟悉Linux本地文件上传方法(linux本地上传)
- 文件Linux下安装exe文件的方法(linux怎么安装exe)
- 文件Linux解压GZ文件的简单方法(linux如何解压gz)
- Linux下查看隐藏文件的方法(linux下显示隐藏文件)
- Linux LS命令:查看文件和目录的高效方法(linuxlsa)
- MySQL中IBD文件的作用及管理方法(mysql的ibd文件)
- 25个Linux命令帮助您设置文件权限(linux设置权限的命令)
- Linux下定时自动化任务的实现方法和步骤详解(linux定时任务文件)
- Oracle数据库输出到文件的方法(oracle输出到文件)
- 「快速了解Linux导出文件命令」(linux导出文件命令)
- ASP中利用execute实现动态包含文件的方法
- SaveRemoteFile函数之asp实现保存远程的文件到本地的代码
- PHP删除目录及目录下所有文件的方法详解
- js加载之使用DOM方法动态加载Javascript文件
- Java窗体动态加载磁盘文件的实现方法
- asp导出excel文件最简单方便的方法
- asp.net后台动态添加JS文件和css文件的引用实现方法