在 iFrame 中单击锚点在 Firefox 和 Chrome 中的行为不同答案

【问题标题】：Clicking an anchor inside an iFrame behaves differently in Firefox and Chrome在 iFrame 中单击锚点在 Firefox 和 Chrome 中的行为不同
【发布时间】：2013-10-15 18:38:04
【问题描述】：

我在 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...并继续这样做...就像“Inception”一样。但同样的代码在 Chrome 中也能正常工作。

谁能告诉我为什么？

【问题讨论】：

Firefox form targetting an iframe is opening new tab 的可能重复项 - 在 Firefox 中，您必须确保您的 <a> 标记具有明确的“目标”属性。
也许是这个：stackoverflow.com/questions/15771047/when-to-use-target-self
我认为这与目标无关。 FF 似乎将href="#" 视为打开父 URL，从而创建另一个 iframe。
那么我该如何解决这个问题呢？上面建议的链接没有帮助。你能提供一个小提琴吗？

标签： javascript html iframe

【解决方案1】：

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

或

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

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

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

【讨论】：

【解决方案2】：

实际上，这可能很愚蠢，但我不喜欢井号标签，这就是为什么我尽可能使用javascript://，但是对于您的情况，我确定您是否将href 值替换为那个或@ 987654323@它会解决这个问题，我认为问题是浏览器将哈希标签视为一个新的url来浏览，这就是我不使用它的原因，我希望它对你有用

【讨论】：

我明白了。但是，iframe 中的内容不在我的控制范围内，用户基本上可以拥有他们想要的任何内容（HTML/CSS/JS）。还有其他解决办法吗？
如果 href 不是哈希，您不会遇到任何此类问题，试一试，更改 href='google.com' 并查看

【解决方案3】：

为什么？这很有趣，但“初始”行为与“页面顶部”对 iFrame 中的 Firefox 的含义有关。如果你使用#top，你会得到same results。

理想情况下，您应该使用 Labib 的回答中提到的 href='javascript:void(0)' ，但既然您提到它超出了您的控制范围，那么您似乎需要破解。

真正丑陋的方法是在输出中搜索href="#" 并替换它。

但在这种情况下，我认为最好检测到事情何时变坏并在那个时候采取一些措施，就像这样：

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

它正在运行：http://jsfiddle.net/ze3CR/show

【讨论】：