Opera 中的 JavaScript 作用域问题？

Question

我有一个类似于小部件的 HTML+JavaScript block ，人们可以将其复制/粘贴到他们的 HTML 页面中一次或多次。该 block 检查外部 JavaScript 文件是否已在 DOM 中，如果不存在则加载它，如下所示:

(function(){
  d = document;
  if (!d.getElementById('ex-scr')) {
    scr = d.createElement('script');
    scr.async = true;
    scr.id = 'ex-scr';
    scr.src = 'external.js';
    d.getElementsByTagName('head')[0].appendChild(scr)
  }
})();

外部 JavaScript 文件检查 HTML 页面中的小部件实例(使用 getElementsByClassName)并对这些实例进行操作，有点像这样；

for (var i=0;i<document.getElementsByClassName('target').length;i++) {
 document.getElementsByClassName('target')[i].style.borderStyle="solid";
}

可以在 http://futtta.be/opera_enigma.html 上找到这方面的一个工作示例.

这在 Firefox(3.6 和 4b)、Chrome(5 和 6)和 Safari 中完美运行，但在 Opera(使用最新版本 10.61 测试)中无法正常运行:无论有多少“小部件”(divs与 class='target') 存在时，Opera 仅对第一个起作用，因为显然 nodeList 仅包含 1 个条目(长度为 1 而不是 2 或 3 或 ...)。

如果在小部件的 javascript 中调用函数以使用 window.onload 加载外部脚本，问题就会消失，但我希望我的小部件尽快激活(不干扰页面的其余部分，因此异步的东西)。

所以我的问题；我的代码中是否存在 Firefox、Safari 和 Chrome 忽略的错误？这是 Opera 中的错误吗？我怎样才能让 Opera 正常运行？

Answer 1

The problem goes away if in the widget's javascript I call the function to load the external script with window.onload

我认为这就是您的问题所在。在您的脚本文件中执行 getElementsByClassName 时，尚不能保证 DOM 完全存在。如果不等到 DOMready 或 loaded 事件，您将无法在此处创建可靠的行为。