zoukankan      html  css  js  c++  java
  • 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.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;  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;  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>
     
     
     
     
     
     
     
  • 相关阅读:
    韩国新地图格式
    这次是真的准备出售用于传奇开发的HGE图形引擎了
    减小Delphi2010程序的尺寸(关闭RTTI反射机制)
    hook api 保护进程
    使用静态库
    iOS中的Block动画
    IOS中忽略字符串两边空格比较
    判断是否输入有汉字
    EasyDSS产生cache缓存如何设定定时清理缓存?
    EasyDSS定制项目中ETCD服务挂掉如何设定定时重启?
  • 原文地址:https://www.cnblogs.com/jianz/p/6186744.html
Copyright © 2011-2022 走看看