第一种利用 ajax 方式,第二种是动静创建一个 script 标签,配置其 src 属性,经过把 script 标签拔出到页面 head 来加载 js,感乐趣的网友可以看下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <script type="text/javascript" src="call.js">
- </script>
- 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.onload= 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(), 当然最后还要能这样是不是适合你的应用。
另外需要注意:
- jQuery("#content").html("<script>alert('aa');<\/script>");
来源: http://www.phperz.com/article/17/0227/266215.html