javascript - iframe 中的 window.location.href 在 FireFox 中不起作用

Question

在网站 www.example.org 上我有一个 anchor #anchor。我必须使用 anchor ，因为该网站是用 GWT 编写的，并且嵌入在 iframe 中(并且两个网站都有不同的域)。

幸运的是，我找到了一个滚动到 anchor 的解决方案，该解决方案适用于 Chrome、Safari、IE7、IE8、IE9，但事实证明它不适用于 Firefox。

在我的代码中，我检查了浏览器是否是 IE 浏览器之一。如果是，那么我这样做:

window.location = www.example.org#anchor

效果非常好。

如果浏览器不是这些 IE 之一，那么我会这样做:

window.location.href = '#anchor';

这在 Chrome 和 Safari 中完美运行。

然而，这两种解决方案都不适用于 Firefox (6)。有谁知道如何在 FireFox 中滚动到 anchor ？

附注在这种情况下，scrollIntoView、scrollTo(0,0) 和获取滚动到该元素的元素不起作用...经过几天的尝试，我发现只有 anchor 才有效。

Answer 1

我知道这已经有一段时间了，但我刚刚遇到了同样的问题，并发现了一个糟糕但有效的解决方案。问题:Firefox 在某些 iframe 中不响应 location.hash。上面在 jsfiddle 中发布的简单示例确实有效，但更复杂的示例(在我自己的 Facebook 应用程序中)则不起作用。解决方案:在您想要 anchor 的位置创建一个视觉上隐藏的 INPUT 元素。

<input id="top_anchor" type="text" style="position:relative; z-index:-1; float:left">

CSS 的目的是欺骗浏览器，让其认为输入是可见的，但实际上要使元素对用户不可见，请根据您自己的情况进行修改。 z-index 会将其呈现在其父元素下方(您可能需要弄乱父元素才能使其完全工作)，并且应用于它的 float 将有助于输入在其父元素中折叠。重要的是我们不要使用“display:none”或“visibility:hidden”，因为浏览器会认为该元素在视觉上是隐藏的，并且下一部分将不起作用。

下一部分:在您的 JavaScript 中，我们没有改变哈希值或位置，而是找到了一种更狡猾的方法来让浏览器跳转到页面中的某个点:

document.getElementById('top_anchor').focus();

我刚刚在 Firefox 8 中对此进行了测试，效果非常好。令人遗憾的是，这样一个不诚实的黑客可以工作，但最初的、善意的代码却不能；但我完全理解某些行为需要由用户操作触发的思维过程。