在iFrame中單擊錨點在Firefox和Chrome中的行為有所不同

Question

我在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中也可以正常工作。

誰能告訴我為什么？

Answer 1

是。 您應該使用href='javascript:void(0);' 而是href='#'

要么

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

我認為添加target="preview"也應該可以解決您的問題。

只需嘗試一次，讓我們知道它是否有效。

Answer 2

實際上，這可能是愚蠢的，但是我不喜歡哈希標簽，這就是為什么我盡可能使用javascript://的原因，但是對於您而言，我確定是否將href值替換為或href='javasctipt:void(0)' ，它將解決問題，我認為問題是瀏覽器將哈希標簽視為要瀏覽的新網址，這就是為什么我不使用它，希望它對您有用

Answer 3

為什么？ 這很有趣，但是“開始”行為與iFrame中Firefox對“頁面頂部”的含義有關。 如果您使用#top則會得到相同的結果 。

理想情況下，您應該使用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