在 Firefox 和 Chrome 中，单击 iFrame 中的锚点的行为会有所不同

Clicking an anchor inside an iFrame behaves differently in Firefox and Chrome

本文关键字：有所不同 iFrame Firefox Chrome 单击      更新时间：2023-09-26

我在jsBin中有以下代码：http://jsbin.com/iRoROvu/1/edit

它基本上在iframe中有一个锚点。如果您单击该链接，您将看到Chrome中没有任何反应，但在Firefox中它只是空白。

这是jsFiddle中的相同代码：http://jsfiddle.net/LbNwd/

JavaScript：

 var previewFrame = document.getElementById('preview');
    var preview =  previewFrame.contentDocument ||     previewFrame.contentWindow.document;     
    preview.open();
    preview.write("Hello World!<br/><a href='#'>Click me!</a>");
    preview.close();

.HTML：

<iframe id="preview"></iframe>

在这种情况下，如果您使用 Firefox，它会在现有 iframe 中创建另一个 iframe...并继续这样做...比如《盗梦空间》。但是相同的代码在Chrome中工作正常。

谁能告诉我为什么？

是的。您应该使用href='javascript:void(0);'而不是href='#'

或

您可以改用<a href='#' target="preview">Click me!</a>。

我认为添加target="preview"也应该解决您的问题。

只需尝试一次，让我们知道它是否有效。

实际上，这可能很愚蠢，但我不喜欢哈希标签，这就是为什么我尽可能使用 javascript://，但对于您的情况，我确信如果您将href值替换为该值或href='javasctipt:void(0)'它将解决这种情况，我认为问题是浏览器将哈希标签视为要浏览的新 URL， 这就是为什么我不使用它，我希望它对你有用

为什么？这很有趣，但"初始"行为与iFrame中的"页面顶部"对Firefox意味着什么有关。 如果您使用#top则会得到相同的结果。

理想情况下，你应该使用 href='javascript：void（0）' 正如 Labib 的答案中提到的，但既然你提到它超出了你的控制范围，那么你似乎需要一个黑客。

真正丑陋的方法是搜索正在打印的输出以获取href="#"并替换它。

但是在这种情况下，我认为最好检测事情何时变坏并在那时采取一些措施，例如：

if (frameElement && frameElement.id === 'preview') {       
    // Think of something clever here, like
    parent.location = parent.location;
}

这是在行动：http://jsfiddle.net/ze3CR/show

相关文章：