登录  /  注册
首页 > web前端 > js教程 > 正文

ajax方式加载script文件用法实例详解

伊谢尔伦
发布: 2017-07-21 14:08:25
原创
2711人浏览过

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

<script type="text/javascript" src="call.js"></script>
登录后复制

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

var head= document.getElementsByTagName(&#39;head&#39;)[0]; 
var script= document.createElement(&#39;script&#39;); 
script.type= &#39;text/javascript&#39;; 
script.src= &#39;call.js&#39;; 
head.appendChild(script);
登录后复制

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

var head= document.getElementsByTagName(&#39;head&#39;)[0]; 
var script= document.createElement(&#39;script&#39;); 
script.type= &#39;text/javascript&#39;; 
script.onreadystatechange= function () { 
if (this.readyState == &#39;complete&#39;) 
callback(); 
} 
script.onload= function(){ 
callback(); 
} 
script.src= &#39;helper.js&#39;; 
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(&#39;head&#39;)[0]; 
var script= document.createElement(&#39;script&#39;); 
script.type= &#39;text/javascript&#39;; 
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= &#39;helper.js&#39;; 
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(&#39;aa&#39;);<\/script>");
登录后复制

以上就是ajax方式加载script文件用法实例详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号