document.getElementById 在 Firefox 中返回元素但不是 chrome

Posted 2023-05-09

【中文标题】document.getElementById 在 Firefox 中返回元素但不是 chrome

【英文标题】：document.getElementById returning element in firefox but not chrome

【发布时间】：2011-10-05 15:11:12

【问题描述】：

我正在尝试在网页加载后通过单击按钮动态加载一个封面流类型对象（认为 iTunes 封面流但不那么花哨）。我正在动态创建一个图像列表，以提供给coverflow的javascript，然后加载它们并让它看起来很漂亮。问题是在 Firefox 中代码可以正常工作，但在 chrome 和 ie（惊喜）中，javascript 抛出错误，并且由于下面的错误抛出，页面变为空白。问题在于这段代码试图通过 id 捕获 dom 元素

if (typeof(this.Container) == 'string')  // no node
    var container = document.getElementById(this.Container);
    if (container) 
        this.Container = container;
     else 
        throw ('ContentFlow ERROR: No element with id \''+this.Container+'\' found!');
        return;
    

几乎在 chrome 中，当 dome 元素在页面中肯定可用时，上面的代码不会捕获它。我什至在 chrome 的控制台中输入了document.getElementById("container_name");，它返回了元素，所以我不知道它在文件中不起作用。

任何建议都会被欣赏

谢谢

编辑：

这是试图填充的页面 html

<div id="contentFlow" class="cool_ui ContentFlow">
    <p id="coverflow_school_name"></p>
    <div class="loadIndicator"><div class="indicator"></div></div>
    <div class="flow" style="height:240px;"></div>
    <div class="scrollbar">
        <div class="slider"></div>
    </div>
</div>

回答：

哇，好的。我想到了。问题是在调用那段代码之前动态加载某些资源的方式。资源加载导致页面变为空白，从而使 var container = document.getElementById(this.Container); return null 因此抛出异常。奇怪的是 Firefox 可以处理资源加载，但 chrome 不能。

感谢您的帮助

【问题讨论】：

typeof 是操作符，不是函数，去掉括号

您能否发布与此相关的 HTML 或在 fiddle 中复制它？

我想我们可能需要一个完整的例子。代码应该可以工作，但也许你有某种竞争条件，关于在函数触发时元素是否已经加载，或者其他什么。

【参考方案1】：

为什么不使用 jquery？

 $('#container_name')

更新：在二读时，这是元素的名称还是 ID？

如果是名称，则使用

$('[name="container_name"]')

【讨论】：

试过了。在 chrom 中记录返回的对象，它以空数组 [] 的形式返回，而在 Firefox 中它具有整个元素

我本来不同意这一点，但后来我意识到这个问题是用 jquery 标记的......你在使用 jquery @user 吗？

【参考方案2】：

使用 JQuery 你可以说

if($(this.Container).length)
    //Code goes here

else

    throw ('ContentFlow ERROR: No element with id \''+this.Container+'\' found!');
    return;

【讨论】：

这本质上与使用 jquery 捕获容器然后检查它是否存在相同。我相信问题出在浏览器中，因为它适用于 Firefox，但不适用于 chrome

您在问题中提到 document.getElementById("container_name") 在 chrome 控制台中返回元素，那么它应该可以正常工作。您是否尝试过使用 JQuery 库？

是的，试过 jquery。用jquery在代码中捕获的对象在chrome中只是空的，在firefox中填充

$('#x') 只会和document.getElementById('x') 做同样的事情。 jQuery 不是某种神奇的修复方法。无论如何$(this.Container) 是错误的，它缺少# 来获取ID，并且如果ID 中有. 之类的带外字符，它将失败。通过将简单的 byId 查询包装在更复杂的选择器查询中，您不会得到任何结果。

【参考方案3】：

我尝试了 Chrome 12.0.742.112 中的代码，它似乎工作正常。这是一个链接：http://jsfiddle.net/eemYg/。 我认为是另一件事导致了问题，例如this.Container。您应该检查它的值（在 Chrome 中），看看它是否与 Firefox 中的值不同。