頁面動態載入對應的js文件（頁面動態載入對應的js文件）

本文目錄一覽：

• 1、如何在html頁面動態載入js文件
• 2、如何在js文件中動態載入另一個js文件？
• 3、用原生js怎麼動態添加一個js文件
• 4、怎麼在網頁中通過jQuery動態載入js代碼
• 5、如何動態的載入js文件
• 6、網頁的動態JS在哪找？

如何在html頁面動態載入js文件

html頁面動態載入js文件腳本的方法。

1、直接document.write

script language=”javascript”

    document.write(“script src=’test.js’\/script”);

/script

2、動態改變已有script的src 屬性

script src=” id=”s1″/script

script language=”javascript”

    s1.src=”test.js”

/script

3、動態創建 script元素

script

    var oHead = document.getElementsByTagName(‘HEAD’).item(0);

    var oScript= document.createElement(“script”);

    oScript.type = “text/javascript”;

    oScript.src=”test.js”;

    oHead.appendChild( oScript);

/script

這三種方法都是非同步的，所以在採用這類方法動態載入Js的同時，主界面的Js腳本是繼續執行的，所以可能出現通過非同步載入的Js代碼得不到預期的效果的情況。

如何在js文件中動態載入另一個js文件？

1、直接document.write

script language=”javascript”

document.write(“script src=’test.js’\/script”);

/script

2、動態改變已有script的src屬性

script src=” id=”s1″/script

script language=”javascript”

s1.src=”test.js”

/script

3、動態創建script元素

script

var oHead = document.getElementsByTagName(‘HEAD’).item(0);

var oScript= document.createElement(“script”);

oScript.type = “text/javascript”;

oScript.src=”test.js”;

oHead.appendChild( oScript);

/script

其實原理就是利用dom動態的引入一個js到文件中來~就能和原有的js通信了~

用原生js怎麼動態添加一個js文件

如果需要用原生js動態的載入另外一個js文件，可以使用原生js的document.createElement方法創建script節點，然後更改該節點的type和src屬性,最後通過appendChild方法將該節點動態添加到html中，這樣就可以了，參考代碼如下：

var new_element = document.createElement(“script”);//創建新的script節點new_element.setAttribute(“type”, “text/javascript”);new_element.setAttribute(“src”, “../js/jquery.js”);document.body.appendChild(new_element);//添加到body節點的末尾

上例中是在body的最末尾添加的，當然同樣可以在head中添加引用該js的標籤：document.head.appendChild(new_element);

怎麼在網頁中通過jQuery動態載入js代碼

用JQ自帶的AJAX來動態載入你想要的JS文件

$.getScript(“這是你的JS名字.js”, function(){

  alert(“這是JS載入完了成功的回調函數”);

});

這是動態載入的JS文件，ajax必須要有環境才能運行

如何動態的載入js文件

1、直接document.write 

  document.write(“script src=’test.js’\/script”);

2、動態改變已有script的src屬性 

script src=” id=”s1″/script 

script language=”javascript” 

    s1.src=”test.js” 

/script

3、動態創建script元素 

script 

    var oHead = document.getElementsByTagName(‘HEAD’).item(0); 

    var oScript= document.createElement(“script”); 

    oScript.type = “text/javascript”; 

    oScript.src=”test.js”; 

    oHead.appendChild( oScript); 

/script

這三種方法都是非同步執行的，也就是說，在載入這些腳本的同時，主頁面的腳本繼續運行，如果用以上的方法，那下面的代碼將得不到預期的效果。

4、原理：用XMLHTTP取得要腳本的內容，再創建 Script 對象。 

注意：a.js必須用UTF8編碼保存，要不會出錯。因為伺服器與XML使用UTF8編碼傳送數據。 

主頁面代碼： 

script language=”JavaScript” 

function GetHttpRequest() 

{ 

    if ( window.XMLHttpRequest ) // Gecko 

        return new XMLHttpRequest() ; 

    else if ( window.ActiveXObject ) // IE 

        return new ActiveXObject(“MsXml2.XmlHttp”) ; 

} 

function AjaxPage(sId, url){ 

    var oXmlHttp = GetHttpRequest() ; 

    oXmlHttp.OnReadyStateChange = function()  

    { 

        if ( oXmlHttp.readyState == 4 ) 

        { 

            if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ) 

            { 

                IncludeJS( sId, url, oXmlHttp.responseText ); 

            } 

            else 

            { 

                alert( ‘XML request error: ‘ + oXmlHttp.statusText + ‘ (‘ + oXmlHttp.status + ‘)’ ) ; 

            } 

        } 

    } 

    oXmlHttp.open(‘GET’, url, true); 

    oXmlHttp.send(null); 

} 

function IncludeJS(sId, fileUrl, source) 

{ 

    if ( ( source != null )  ( !document.getElementById( sId ) ) ){ 

        var oHead = document.getElementsByTagName(‘HEAD’).item(0); 

        var oScript = document.createElement( “script” ); 

        oScript.language = “javascript”; 

        oScript.type = “text/javascript”; 

        oScript.id = sId; 

        oScript.defer = true; 

        oScript.text = source; 

        oHead.appendChild( oScript ); 

    } 

} 

AjaxPage( “scrA”, “b.js” ); 

alert( “主頁面動態載入JS腳本。”); 

alert( “主頁面動態載入a.js並取其中的變數：” + str ); 

/script

網頁的動態JS在哪找？

可以在開發者工具當中找。

打開開發者工具，然後選擇網路（network），在下面的列表就可以看到動態載入的js文件了。如果文件比較多，可以選js進行篩選。

如果不是js文件，是在頁面當中的js，可以在開發者工具的元素（elements）面板裡面找到文檔當中的js。