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>之前（所以它会运行页面加载后）：

...技术上并不正确：你只是让你的脚本成为加载顺序中的最后一件事。

如何使用参数添加外部js文件

3 个答案: