AJAX载入外部JS文件到页面并让其执行的方法(附源码)

简介: 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、兼容所有浏览器的规范写法:

 

 

       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文件并让其执行):

 

<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.οnlοad=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文件》演示页面及其源代码:

directembedjs.htm

<!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文件并让它执行》演示页面及其源代码:

ajaxloadjs_execute.htm

<!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>

 

 

 

 

 

 

 

 

目录
相关文章
|
7天前
|
开发框架 前端开发 JavaScript
C# 6.0+JavaScript云LIS系统源码  云LIS实验室信息管理新型解决方案
云LIS是为区域医疗提供临床实验室信息服务的计算机应用程序,可协助区域内所有临床实验室相互协调并完成日常检验工作,对区域内的检验数据进行集中管理和共享,通过对质量控制的管理,最终实现区域内检验结果互认。其目标是以医疗服务机构为主体,以医疗资源和检验信息共享为目标,集成共性技术及医疗服务关键技术,建立区域协同检验,最大化利用有限的医疗卫生资源。
20 1
|
8天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
14 0
|
3天前
|
安全 数据管理 中间件
云LIS系统源码JavaScript+B/S架构MVC+SQLSugar医院版检验科云LIS系统源码 可提供演示
检验科云LIS系统源码是医疗机构信息化发展的重要趋势。通过云计算技术实现数据的集中管理和共享可以提高数据利用效率和安全性;通过高效灵活的系统设计和可扩展性可以满足不同医疗机构的需求;通过移动性和智能化可以提高医疗服务的精准度和效率;通过集成性可以实现医疗服务的协同性和效率。因此,多医院版检验科云LIS系统源码将成为未来医疗机构信息化发展的重要方向之一。
14 2
|
1天前
|
Rust JavaScript 安全
🚀JS使用Wasm为你的文件MD5计算装上火箭引擎🚀
🚀JS使用Wasm为你的文件MD5计算装上火箭引擎🚀
|
1天前
|
运维 JavaScript Java
Serverless 应用引擎产品使用之阿里云Serverless函数计算中,在Node.js环境中执行jar文件如何解决
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
7 0
|
5天前
|
开发框架 前端开发 JavaScript
JavaScript云LIS系统源码ASP.NET CORE 3.1 MVC + SQLserver + Redis医院实验室信息系统源码 医院云LIS系统源码
实验室信息系统(Laboratory Information System,缩写LIS)是一类用来处理实验室过程信息的软件,云LIS系统围绕临床,云LIS系统将与云HIS系统建立起高度的业务整合,以体现“以病人为中心”的设计理念,优化就诊流程,方便患者就医。
14 0
|
6天前
|
存储 开发框架 前端开发
C#开发的全套成熟的LIS系统源码JavaScript+SQLserver 2012区域云LIS系统源码
医院云LIS系统是一套成熟的实验室信息管理系统,目前已在多家三级级医院应用,并不断更新。云LIS系统是为病人为中心、以业务处理为基础、以提高检验科室管理水平和工作效率为目标,将医学检验、科室管理和财务统计等检验科室/实验室所有工作进行整合,全面改善检验科室/实验室的工作现状。
12 0
|
7天前
|
JSON 前端开发 JavaScript
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
一款基于 pdf.js 开发的PDF批注插件库,支持纯离线内网部署,功能完善、强大且在不断升级,极易上手,欢迎关注!
24 4
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
|
15天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
18天前
|
JavaScript
【vue】vue2 导入外部js文件如何拿到方法的返回值
【vue】vue2 导入外部js文件如何拿到方法的返回值
11 1