我可以通過Javascript在頁面上註冊外部JS文件嗎？

Question

在我的CMS中，我通過Javascript向頁面添加模塊，這些模塊可能包含外部JS文件，這些文件會在頁面上註冊，並加載到合作的外部文件中。

當通過JS添加模塊時，這些腳本因此在頁面重新加載之前不會被註冊。

有沒有辦法讓我通過JavaScript調用動態地註冊這些腳本？

Answer 1

您可以使用下面的代碼腳本標記添加到您的網頁：

var head = document.documentElement.childNodes[0]; 
var sTag = document.createElement("script"); 
sTag.src = "/path/to/script.js"; 
sTag.type = "text/javascript"; 
head.appendChild(sTag); 

您也可以使用document.getElementsByTagName("head")[0]爲head變種。另外，您也可以使用document.write，就像這樣：

document.write(
    '<script src="path/to/script.js" type="text/javascript"><\/script>' 
); 

Answer 2

我做了以下的功能，由jQuery的$.getScript方法的啓發，它需要一個url和callback說法。

該回調非常有用，它在腳本加載成功時執行，並且您已準備好使用它。

該功能還負責從DOM移除script元素，以避免衆所周知memory leaks：

loadScript("myLib.js", function() { 
    // myLib is loaded 
    //.. 
}); 

function loadScript(url, callback) { 
    var head = document.getElementsByTagName("head")[0], 
     script = document.createElement("script"), 
     done = false; 

    script.src = url; 
    // Attach event handlers for all browsers 
    script.onload = script.onreadystatechange = function(){ 
    if (!done && (!this.readyState || 
     this.readyState == "loaded" || this.readyState == "complete")) { 
     done = true; 
     callback(); // Execute callback function 
     // Prevent memory leaks in IE 
     script.onload = script.onreadystatechange = null; 
     head.removeChild(script); 
    } 
    }; 
    head.appendChild(script); 
}