如何使用參數添加外部js文件

Question

我想給隨機網站一個最小的js代碼，以便他們可以添加小部件。

該代碼需要在主頁加載后運行，並包含帶有域名的參數。 （我不想對其進行硬編碼）

一種選擇是在</body>之前添加此代碼（因此它將在頁面加載后運行）：

<script type="text/javascript" id="widget_script">  
    document.getElementById('widget_script').src=location.protocol.toLowerCase()+"//mywebsite.com/?u="+encodeURIComponent(window.location.host);        
</script>

這適用於IE，但不適用於Firefox。 我在Firebug中看到正確創建了src屬性，但是未加載我站點中的腳本。

我的問題是：最好的方法是什么？ （最好在標頭部分放置最少的行。）

為了進一步闡明問題：如果將腳本放在頁眉部分上，如何在加載腳本和加載主頁后使其運行？ 如果我在腳本中使用onload事件，我可能會錯過它，因為它可能會在觸發onload事件后加載。

Answer 1

您可以嘗試將腳本靜態包含在document.write中（這是一種較舊的技術，不建議使用，因為它可能導致更現代的庫出現問題）：

var url = location.protocol.toLowerCase() + 
    "//mywebsite.com/?u="+encodeURIComponent(window.location.host);
document.write('<script src="', url, '" type="text/javascript"><\/script>');

或使用動態創建的DOM元素：

var dynamicInclude = document.createElement("script");
dynamicInclude.src = url;
dynamicInclude.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(dynamicInclude); 

以后編輯：

為了確保腳本在onload之后運行，可以使用以下命令：

var oldWindowOnload = window.onload; 
window.onload = function() {
    oldWindowOnload(); 
    var url = location.protocol.toLowerCase() + 
        "//mywebsite.com/?u="+encodeURIComponent(window.location.host);
    var dynamicInclude = document.createElement("script");
    dynamicInclude.src = url;
    dynamicInclude.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(dynamicInclude); 
}

我不相信它可以比這短，除了較短的變量名:)

Answer 2

為什么不使用jQuery的getScript方法進行加載？ 如果您不想依賴jQuery，則可以遍歷源代碼以了解他們如何解決它。

查看廣泛使用的庫總是可以向您展示您不知道遇到的問題的解決方案。 例如，您可以看到加載腳本時jQuery如何管理回調，以及如何避免IE中聲稱的內存泄漏。

Answer 3

您可能想要實現非阻塞腳本技術 。 從本質上講，無需修改腳本的src，而是要創建並附加一個全新的腳本元素。

在這里寫得很好，在YUI和jQuery中有標准的方法可以做到這一點。 這很簡單，只有一個很容易理解的陷阱（並記錄在該鏈接中）。

哦，這：

一種選擇是在</body>之前添加此代碼（因此它將在頁面加載后運行）：

...從技術上講不是正確的：您只是使腳本成為加載順序中的最后一件事。