【问题标题】:Cross-browser onload event in a static script tag静态脚本标签中的跨浏览器 onload 事件
【发布时间】:2012-01-22 05:11:48
【问题描述】:

是否有一种跨浏览器的方式将 onload 事件与 html 文档中的静态脚本标签相关联?

以下内容在 IE 7 和 IE 8 中不起作用:

<script onload="DoThat" type="text/javascript" src="..."></script>

一些背景

我找到了一种使用动态脚本标记和 if 语句来完成此任务的方法。例如在this MSDN article 中解释。

我的问题是我需要找到当前的脚本标签,因为我正在构建插入 DOM 元素的小部件。过去I have found some workarounds to do this,但他们都有自己的缺点。我希望在脚本 onload 事件上使用“this”关键字会有所帮助。

【问题讨论】:

  • 所以您需要onload 才能使用this 来引用当前脚本元素?
  • 对,这就是为什么我在我的问题中添加了一些上下文。如果我可以在没有 onload 的情况下让“this”指向当前脚本,我也会很高兴。正如您从链接中看到的那样,我已经探索了许多替代方案。

标签: javascript html onload this-keyword


【解决方案1】:

据我了解,您需要您的代码知道它属于哪个脚本元素。然后,您将在此脚本旁边插入必要的 HTML 小部件内容或附加到脚本父级等。如果是这样,那么我会建议您另一种方法。

在小部件 javascript 文件中放置下一行代码:

var scripts = document.getElementsByTagName('script'),
    thisScript = scripts[scripts.length - 1];

thisScript 是您要查找的 DOM 元素,此代码所在的当前脚本元素。就这么简单。

为什么有效。 详细解释http://feather.elektrum.org/book/src.html。只是一个摘要:

当一个带有 src 的脚本被加载到一个页面中时,页面的其余部分还没有被写入。言下之意,无论一个页面包含多少个脚本,当前开始执行的都是最后一个

这是一种相当简单有效的技术,但知道这种可能性的人并不多。它可靠且 100% 兼容浏览器。顺便说一句,Google 使用此代码来呈现 +1 按钮:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'dk'}
</script>

那么怎么想api脚本是怎么得到这个hash参数的呢?在我的例子中是thisScript.innerHTML

【讨论】:

  • 如果您点击我的问题中的链接,您会将此视为替代方案之一。 “当在页面中加载带有 src 的脚本时,页面的其余部分尚未写入”的断言对于延迟或异步脚本是不正确的。
  • 是的,如果您延迟加载,那么这绝对不合适。无论如何,它是 IE7 的绝佳替代品。
【解决方案2】:

我不确定我是否满足您的需求。
无论如何要找到当前脚本,你可以试试这个例子

<script src="jquery-1.7.1.min.js" varTest="valueTest" id="myID"></script>
<script>

var scripts = document.getElementsByTagName('script');      
var pattern = 'jquery-1.7.1.min.js';
var i = undefined;

for (var x=0; x<scripts.length; x++)
{
    if (scripts[x].src.match(pattern)) { i = x; break; }
}

if (typeof(i) != 'undefined')
{
    // Do any association needed here
    var current_script = scripts[i];
    // Just for test            
    console.log(current_script.attributes);
}

</script>

【讨论】:

  • 这个答案很有意义。但正如我所提到的,我的问题是我有一个小部件方法,用户可以选择多次插入同一个小部件。然后,多个脚本将具有相同的“模式”。
猜你喜欢
  • 2011-12-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-08-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-04-20
相关资源
最近更新 更多