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

 

 
 
 
 
 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM