AJAX载入外部JS文件到页面并让其执行的方法（附源码）
一、 向HTML页面中动态添加JS文件（从外部载入）并让其执行的两种方法
1、只适用于IE浏览器的简单方法：
先在文档中放置一张JS“空床”并添加ID：<script id="abc" type="text/javascript"src=""></script>
然后在需要加载外部JS时对其src属性赋值：document.getElementById("abc").src="外部JS文件的URL地址"
2、兼容所有浏览器的规范写法：
script.type = "text/javascript"
script.src = "外部JS文件的URL地址"
//测试发现，在IE浏览器下没有script的onload事件，可能是因为加载外部JS文件时的同步特性与非IE浏览器不同所致
//script.onload = function(){alert("Script is ready!")}
document.body.appendChild(script)
3、AJAX载入外部JS文件到页面并让其执行的实例（加载swfobject.js文件并让其执行）：
<html>
<head>
<title>《FLASH制作在线音效素材库》－全部实时试听－即点即下载－成氏软件工作室2011年新年献礼</title>
<base href="http://dreamdesign.csrjgzs.com/Article/" />
<base target="_blank" />
</head> <body bgcolor="#999999">
<script id='jsobj' language='javascript' type='text/javascript' src=''></script>
<div>
<!-- saved from url=(0013)about:internet -->
<!--<p>截入需要一定的时间，请耐心等待5秒钟左右</p> -->
</div>
<DIV align="center">
<TABLE width=100% height=100% border=0 cellSpacing=0 cellPadding=0 style=margin-left:0px;margin-top:-15px;><TR><TD align=center valign=middle>
<TABLE border=1 cellSpacing=0 cellPadding=0><TR><TD>
<DIV align="center" id="flashcontent1"></DIV>
<script type="text/javascript">
function embedflash(){
var myswf1 = new SWFObject("http://dreamdesign.105.idcxin.com/res/soundeffectlib/soundeffectlib_online_release.swf","swf1","720","540","8","#cccccc","high");
//myswf1.addParam("wmode", "transparent");
myswf1.addParam("wmode", "window");
myswf1.addParam("menu", "false");
myswf1.addParam("swLiveConnect", "true");
myswf1.addParam("AllowNetworking", "all");
myswf1.addParam("allowfullscreen", "true");
myswf1.addParam("allowScriptAccess", "always");
myswf1.write("flashcontent1");
}
if(window.attachEvent&&window.ActiveXObject){
document.getElementById("jsobj").src="http://dreamdesign.csrjgzs.com/Article/swfobject.js"
window.onload=function(){embedflash()}
}else{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://dreamdesign.csrjgzs.com/Article/swfobject.js";
script.onload = function(){
//alert("Script is ready!");
embedflash()
};
document.body.appendChild(script);
}
</script>
</TD></TR></TABLE>
</TD></TR></TABLE>
</DIV>
</body>
</html>
二、关于AJAX动态截入的JS文件“不执行”（执行不正常）的问题
昨天一位开发中国电信网上营业厅（浙江）的好友提到了这个问题：
他要加载进来并执行的外部JS文件及其内容是后台动态产生的，扩展名为.res，生成之后还有重定向。问题的现象是：直接在HTML页面中嵌入这个动态JS的地址，可以正常执行，用AJAX动态载入则“无法执行”。
其实，可以非常肯定的说，用上面的AJAX方法动态载入页面的外部JS文件是一定会执行的！之所以看似“不执行”是因为载入的这个JS文件有错误。如果并没有报错，则很可能是这个JS在不恰当的时间使用了不不恰当的语句。
这就是要用AJAX方法动态加载进来并执行的外部JS文件（后台动态生成并有重定向）的URL地址：
http://img.ct10000.com/zj/sy_dtgg_zs_ad.res
点开这个地址，发现跳转到了如下页面：
http://img.ct10000.com/html/zj/sy_dtgg_zs_ad.html
查看其页面源代码为：
new Image().src="http://view.img.ct10000.com/vc/viewcollect?cs=MTg1ODN8NTM5NXxzeV9kdGdnX3pzX2FkfHpq&rnd="+Math.random();
document.writeln('<a href="http://click.img.ct10000.com/cc/clickcollect?cs=aHR0cDovL3pqLjE4OS5jbi96aHVhbnRpL2lwaG9uZTUvfDE4NTgzfDUzOTV8c3lfZHRnZ196c19hZHx6ag==" target="_blank"><img alt="电信版iphone5" src="//img.ct10000.com/images/9/201212261803502887.jpg" style="border-bottom: 0px solid; border-left: 0px solid; width: 1000px; height: 400px; border-top: 0px solid; border-right: 0px solid" /></a>');
仔细分析不难发现，其中使用了JS的“document.writeln”方法向文档中输出内容，但根据我的经验，JS的“document.write”和“document.writeln”方法一般适用于页面正在加载，尚未加载完毕的时候(window.onload事件发生之前)向文档中即时写入内容，如果页面已经加载完毕，再使用这两个方法，则可能会生成并跳转到一个新的页面（或者无法执行）。当window.onload事件发生之后再修改页面文档内容或者添加新的内容，就要用document.getElementById("容器ID").innerHTML="新内容"，或者document.appendChild(新创建的文档节点元素对象)
因此，只需修改这个动态生成的JS文件的内容，加入兼容性控制流程代码，即可轻松的解决这个“不执行”的问题：
new Image().src="http://view.img.ct10000.com/vc/viewcollect?cs=MTg1ODN8NTM5NXxzeV9kdGdnX3pzX2FkfHpq&rnd="+Math.random();
var hrefstr="http://click.img.ct10000.com/cc/clickcollect?cs=aHR0cDovL3pqLjE4OS5jbi96aHVhbnRpL2lwaG9uZTUvfDE4NTgzfDUzOTV8c3lfZHRnZ196c19hZHx6ag==";
var imgstr="<img alt='电信版iphone5' src='img.jpg' style='border-bottom: 0px solid; border-left: 0px solid; width: 1000px; height: 400px; border-top: 0px solid; border-right: 0px solid' />";
try{
//试探父文档页面中是否预置有内容输出容器
if(box){
var lnk = document.createElement("a");
lnk.target="_blank";
lnk.href=hrefstr;
lnk.innerHTML=imgstr;
box.appendChild(lnk);
}
}catch(e){
document.writeln("<a href='"+hrefstr+"' target='_blank'>"+imgstr+"</a>");
}
《直接嵌入JS文件》演示页面及其源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>直接嵌入JS文件</title>
</head> <body>
<script type="text/javascript"src="js.js"></script>
</body>
</html>
《AJAX动态载入JS文件并让它执行》演示页面及其源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AJAX动态载入JS文件并让它执行</title>
<style>
div { height:100px; margin:10px auto; }
</style>
</head> <body style="text-align:center"> <div id="headdiv" style="background:#ffcccc"></div>
<div id="contentdiv" style="height:auto; background:#ccffcc"></div>
<div id="footdiv" style="background:#ccccff"></div> <script language="javascript">
//预先设置一个盒子容器，让动态加载进来的JS文件将HTML内容写入其中
var box=document.getElementById("contentdiv")
var script = document.createElement("script")
script.type = "text/javascript"
script.src = "js.js"
//script.src = "http://img.ct10000.com/zj/sy_dtgg_zs_ad.res"
//测试发现，在IE浏览器下没有script的onload事件，可能是因为加载外部JS文件时的同步特性与非IE浏览器不同所致
//script.onload = function(){alert("Script is ready!")}
document.body.appendChild(script)
</script> </body>
</html>
AJAX载入外部JS文件到页面并让其执行的方法（附源码）的更多相关文章
- arcgis api 3.x for js 入门开发系列六地图分屏对比（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十八风向流动图（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 地图加载多个气泡窗口展示（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- Silverlight实用窍门系列：2.Silverlight动态加载外部XML指定地址的WebService---（动态加载外部XML文件中指定的WebService地址）【附带实例源码】
接上节所讲的,Silverlight可以加载外部的XML文件里面的内容,那么我们可不可以在外部XML里面配置一个WebService地址,并且以此加载这个地址来动态加载WebService呢?这样子就 ...
- arcgis api 3.x for js 入门开发系列二不同地图服务展示（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列二十二地图模态层（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十二地图打印GP服务（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列五地图态势标绘（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 4.x for js 地图加载多个气泡窗口展示（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
随机推荐
- MVC和三层架构
从最开始写程序到现在,一路上听到架构这个词已经无数次了,在工作和圈子里也不停听到大家在讨论它,但是很多时候发现不少人对这个概念的理解都是很模糊的,无意间在知道上看到一个朋友的回答,感觉很不错,特转帖到 ...
- 201521123014 java第一周总结
201521123014 java第一周总结 1.本周学习总结 刚认识这一门新语言,我就充满了好奇心,想看看Java和学过C语言,C++有什么区别.在这一周的学习中,我认识到,对于初学者而言,Java ...
- mybatis系列笔记(1)---mybatis入门
mybatis入门 MyBatis是什么? MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了goog ...
- 从零开始搭建Salt Web之封装salt-api接口
salt-api现在已经正常运行,接下来则是实现通过调用salt-api来执行salt命令. 调用salt-api执行命令时,记得携带c_path参数 因为salt中自带了tornado这个库,所以决 ...
- redux-form的学习笔记二--实现表单的同步验证
(注:这篇博客参考自redux-form的官方英文文档)左转http://redux-form.com/6.5.0/examples/syncValidation/ 在这篇博客里,我将用redux-f ...
- KoaHub平台基于Node.js开发的Koa的模板系统handlebars插件代码详情
koahub-handlebars koahub-handlebars koahub handlebars templates Installation $ npm install koahub-ha ...
- UI 自定义视图 ,视图管理器
一>自定义label - textField 视图 自定义视图:系统标准UI之外,自己组合而出的新的视图 iOS 提供了很多UI组件 ,借助它们,我们可以做各种程序 尽管如此,实际开发中,我们还 ...
- JavaScript零基础入门
为什么学习JavaScript 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. 它可以让网页呈现各种动态效果. 易学性 1.学习环境无 ...
- 从Visual Studio看微软20年技术变迁
前言 这个世界从来都不缺变革,从工业革命到晶体管和集成电路,从生活电器到物联网,从简陋人机到精致体验,我们在享受技术带来的便捷的同时,也在为复杂设计而带来的挑战和生产力下降而痛并快乐着.而迫切期盼的, ...
- eclipse中以debug方式启动tomcat报错
在eclipse中debug Tomcat报错,错误如下: FATAL ERROR in native method: JDWP No transports initialized, jvmtiEr ...