一、 向HTML页面中动态添加JS文件（从外部载入）并让其执行的两种方法

1、只适用于IE浏览器的简单方法：

　　先在文档中放置一张JS“空床”并添加ID：<script id="abc" type="text/javascript"src=""></script>

　　然后在需要加载外部JS时对其src属性赋值：document.getElementById("abc").src="外部JS文件的URL地址"

2、兼容所有浏览器的规范写法： 

        var script = document.createElement("script")
        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文件并让其执行）： 

  1. <html>
  2. <head>
  3. <title>《FLASH制作在线音效素材库》－全部实时试听－即点即下载－成氏软件工作室2011年新年献礼</title>
  4. <base href="http://dreamdesign.csrjgzs.com/Article/" />
  5. <base target="_blank" />
  6. </head>
  7.  
  8. <body bgcolor="#999999">
  9. <script id='jsobj' language='javascript' type='text/javascript' src=''></script>
  10. <div>
  11. <!-- saved from url=(0013)about:internet -->
  12. <!--<p>截入需要一定的时间，请耐心等待5秒钟左右</p> -->
  13. </div>
  14. <DIV align="center">
  15. <TABLE width=100% height=100% border=0 cellSpacing=0 cellPadding=0 style=margin-left:0px;margin-top:-15px;><TR><TD align=center valign=middle>
  16. <TABLE border=1 cellSpacing=0 cellPadding=0><TR><TD>
  17. <DIV align="center" id="flashcontent1"></DIV>
  18. <script type="text/javascript">
  19.     function embedflash(){
  20.         var myswf1 = new SWFObject("http://dreamdesign.105.idcxin.com/res/soundeffectlib/soundeffectlib_online_release.swf","swf1","720","540","8","#cccccc","high");
  21.         //myswf1.addParam("wmode", "transparent");
  22.         myswf1.addParam("wmode", "window");
  23.         myswf1.addParam("menu", "false");
  24.         myswf1.addParam("swLiveConnect", "true");
  25.         myswf1.addParam("AllowNetworking", "all");
  26.         myswf1.addParam("allowfullscreen", "true");
  27.         myswf1.addParam("allowScriptAccess", "always");
  28.         myswf1.write("flashcontent1");
  29.     }
  30.     if(window.attachEvent&&window.ActiveXObject){
  31.         document.getElementById("jsobj").src="http://dreamdesign.csrjgzs.com/Article/swfobject.js"
  32.         window.onload=function(){embedflash()}
  33.     }else{
  34.         var script = document.createElement("script");
  35.         script.type = "text/javascript";
  36.         script.src = "http://dreamdesign.csrjgzs.com/Article/swfobject.js";
  37.         script.onload = function(){
  38.             //alert("Script is ready!");
  39.             embedflash()
  40.         };
  41.         document.body.appendChild(script);
  42.     }
  43. </script>
  44. </TD></TR></TABLE>
  45. </TD></TR></TABLE>
  46. </DIV>
  47. </body>
  48. </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

查看其页面源代码为：

  1. new Image().src="http://view.img.ct10000.com/vc/viewcollect?cs=MTg1ODN8NTM5NXxzeV9kdGdnX3pzX2FkfHpq&rnd="+Math.random();
  2. 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文件的内容，加入兼容性控制流程代码，即可轻松的解决这个“不执行”的问题：

  1. new Image().src="http://view.img.ct10000.com/vc/viewcollect?cs=MTg1ODN8NTM5NXxzeV9kdGdnX3pzX2FkfHpq&rnd="+Math.random();
  2. var hrefstr="http://click.img.ct10000.com/cc/clickcollect?cs=aHR0cDovL3pqLjE4OS5jbi96aHVhbnRpL2lwaG9uZTUvfDE4NTgzfDUzOTV8c3lfZHRnZ196c19hZHx6ag==";
  3. 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' />";
  4. try{
  5.     //试探父文档页面中是否预置有内容输出容器
  6.     if(box){
  7.         var lnk = document.createElement("a");
  8.         lnk.target="_blank";
  9.         lnk.href=hrefstr;
  10.         lnk.innerHTML=imgstr;
  11.         box.appendChild(lnk);
  12.     }
  13. }catch(e){
  14.     document.writeln("<a href='"+hrefstr+"' target='_blank'>"+imgstr+"</a>");
  15. }

　　

《直接嵌入JS文件》演示页面及其源代码：

directembedjs.htm

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>直接嵌入JS文件</title>
  6. </head>
  7.  
  8. <body>
  9. <script type="text/javascript"src="js.js"></script>
  10. </body>
  11. </html>

　　

《AJAX动态载入JS文件并让它执行》演示页面及其源代码：

ajaxloadjs_execute.htm

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>AJAX动态载入JS文件并让它执行</title>
  6. <style>
  7. div { height:100px; margin:10px auto; }
  8. </style>
  9. </head>
  10.  
  11. <body style="text-align:center">
  12.  
  13.     <div id="headdiv" style="background:#ffcccc"></div>
  14.     <div id="contentdiv" style="height:auto; background:#ccffcc"></div>
  15.     <div id="footdiv" style="background:#ccccff"></div>
  16.  
  17.     <script language="javascript">
  18.         //预先设置一个盒子容器，让动态加载进来的JS文件将HTML内容写入其中
  19.         var box=document.getElementById("contentdiv")
  20.         var script = document.createElement("script")
  21.         script.type = "text/javascript"
  22.         script.src = "js.js"
  23.         //script.src = "http://img.ct10000.com/zj/sy_dtgg_zs_ad.res"
  24.         //测试发现，在IE浏览器下没有script的onload事件，可能是因为加载外部JS文件时的同步特性与非IE浏览器不同所致
  25.         //script.onload = function(){alert("Script is ready!")}
  26.         document.body.appendChild(script)
  27.     </script>
  28.  
  29. </body>
  30. </html>
 
 
 
 
 
 
 

AJAX载入外部JS文件到页面并让其执行的方法（附源码）的更多相关文章

  1. arcgis api 3.x for js 入门开发系列六地图分屏对比（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  2. arcgis api 3.x for js 入门开发系列十八风向流动图（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  3. arcgis api 3.x for js 地图加载多个气泡窗口展示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  4. Silverlight实用窍门系列：2.Silverlight动态加载外部XML指定地址的WebService---（动态加载外部XML文件中指定的WebService地址）【附带实例源码】

    接上节所讲的,Silverlight可以加载外部的XML文件里面的内容,那么我们可不可以在外部XML里面配置一个WebService地址,并且以此加载这个地址来动态加载WebService呢?这样子就 ...

  5. arcgis api 3.x for js 入门开发系列二不同地图服务展示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  6. arcgis api 3.x for js 入门开发系列二十二地图模态层（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  7. arcgis api 3.x for js 入门开发系列十二地图打印GP服务（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. arcgis api 3.x for js 入门开发系列五地图态势标绘（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. arcgis api 4.x for js 地图加载多个气泡窗口展示（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...

随机推荐

  1. HTML5拖放加入购物车

    H5拖放事件巩固实例: 1.简单布局一下,商品信息放入一个ul中:div为购物车,后续会创建元素 <ul> <li draggable="true"> &l ...

  2. MySQL Innodb 并发涉及参数

    1 参数作用 MySQL的各个插件式引擎中,都会对事务及线程做一定的处理和优化.在Innodb引擎中,总是尝试保持 innodb内 操作系统的线程数(暂命名为innodb_thread) 应该小于或等 ...

  3. mfc---获取当前时间

    CTime t = CTime::GetCurrentTime(); CString strTime = t.format("%Y/&m%d" %h:%M:%S);

  4. 辗转相除法求H.C.F小结

    辗转相除法 大纲: 问题 原理 反思 1.     问题 一个试题,请完成以下填空 下列程序是利用辗转相除法求H.C.F(最大公约数) include <stdio.h> int main ...

  5. Java的JDBC原生态学习以及连接池的用法

    JDBC是什么 JDBC(Java Data Base Connectivity)是Java访问数据库的桥梁,但它只是接口规范,具体实现是各数据库厂商提供的驱动程序(Driver). 应用程序.JDB ...

  6. ES4：ElasticSearch 使用C#添加和更新文档

    这是ElasticSearch 2.4 版本系列的第四篇: 第一篇:ES1:Windows下安装ElasticSearch 第二篇:ES2:ElasticSearch 集群配置 第三篇:ES3:Ela ...

  7. 如何用正确的姿势查看 主机系统的CPU信息

    一.关于CPU的几个概念 CPU的作用 计算机中的中央处理单元(CPU)执行基本的计算工作 -- 运行程序.但是,一个单核的CPU同一时间只能一次执行一个任务,为了提高计算机的处理能力,也就出现了多C ...

  8. 常见端口、端口查询及TCP状态

    查看电脑端口的开放情况命令:cmd——netstat -a -n -a:显示所有连接和监听端口:-n:以数字形式显示地址和端口号 “本地地址”指本地IP地址及其正在使用的端口号,“外部地址”指连接某端 ...

  9. Android自学反思总结(中)

    后来在导员的推荐加上自己的好奇心给电脑装上了Ubuntu,因为Android的内核就是Linux,导员想让我们及早接触,及早熟悉,这也是我后来一直冷落Windows的原因,装Ubuntu的过程是艰辛的 ...

  10. - (BOOL)setResourceValue:(id)value forKey:(NSString *)key error:(NSError **)error

    如果我们的APP需要存放比较大的文件的时候,同时又不希望被系统清理掉,那我么我们就需要把我们的资源保存在Documents目录下,但是我们又不希望他会被iCloud备份,因此就有了这个方法 [URL ...