如何添加带参数的外部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，可以trace through the source 了解他们是如何解决的。

查看广泛使用的库总是会向您展示您不知道自己遇到的问题的解决方案。例如，您可以看到 jQuery 如何在脚本加载时生成回调，以及它如何避免 IE 中所谓的内存泄漏。

Answer 3

您可能希望实施非阻塞脚本技术。本质上，您将创建并附加一个全新的脚本元素，而不是修改脚本的 src。

写得很好here，在 YUI 和 jQuery 中有标准的方法可以做到这一点。这很简单，只有一个很好理解的问题（并在该链接中记录）。

哦，还有这个：

一种选择是仅添加此代码 在</body> 之前（所以它会运行 页面加载后）：

...从技术上讲并不正确：您只是将脚本放在加载顺序中的最后一件事。