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

时间:2009-02-09 10:10:21

标签: javascript load

我想给随机网站提供一个最小的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事件被触发后加载。

3 个答案:

答案 0 :(得分:2)

您可以尝试使用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); 
}

除了较短的变量名称之外,我不认为它可能比这更短:)

答案 1 :(得分:1)

为什么不使用jQuery的getScript方法进行加载?如果您不想依赖jQuery,可以trace through the source了解他们如何处理它。

查看广泛使用的库总是会向您展示您不了解的问题的解决方案。例如,您可以看到jQuery在加载脚本时如何设法生成回调,以及它如何避免IE中声称的内存泄漏。

答案 2 :(得分:0)

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

好写here并且有一些标准方法可以在YUI和jQuery中执行此操作。只有一个问题很容易理解(并在该链接中记录),这是非常简单的。

哦,这个:

  

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

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