如何避免iframe中的錨點滾動父頁面

所以，這裏的問題是：我有一個很長的頁面，中間有一個iframe。現在，如果在iframe中單擊一個錨點，整個頁面將滾動到iframe，這正是我想要避免的。如何避免iframe中的錨點滾動父頁面

下面是一個示例：http://jsfiddle.net/ymbV7/1/ 不要向下滾動頁面，而是滾動iframe，直到可以看到「內容」菜單，然後嘗試任何鏈接（例如「功能」）。

我需要外部頁面不滾動，而iframe必須正確滾動到單擊的錨點。

任何想法？

來源

2012-03-05 StefanoP

Chromium 17 –

已驗證我有同樣的問題。 Chrome和FF測試。 –

嘗試把你的內容變成像這樣的表：

<table cellpadding=0 cellspacing=0 height="100%" width="100%"> 
    <tr> 
    <td> 
     Header 
    </td> 
    </tr> 

    <tr> 
    <td> 
     <iframe src="http://en.wikipedia.org/wiki/jQuery" height=600 width="90%"></iframe> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     Footer 
    </td> 
    </tr> 
</table>

參考http://www.webdeveloper.com/forum/showthread.php?t=212032

來源

2012-03-06 16:55:32 DungHuynh

在Chrome上測試17.0.963.56 在Firefox 10.0.1上，問題不存在。 – DungHuynh

仍在發生，請看這裏http://jsfiddle.net/ymbV7/8/和這裏http://jsfiddle.net/ymbV7/9/我在OSX上並使用Chrome 17.0.963.65 – StefanoP

所以，你是在告訴你要移動到特定的段落描述的鏈接點擊時鏈接細節權利？

根據我的理解你可以這樣做。

<a href="#exactline">Click here</a>

而是請點擊這裏，您可以編寫特點，爲我在http://jsfiddle.net/ymbV7/1/

現在看到鏈接到它應該將所有你需要做的地方是這樣的：

<h2><a name="exactline">Linking Directly from Features</a></h2> 
<p>To override this behaviour, certain standard techniques can be used. In particular, you will need to create named anchors in the body of the text at the point where you want to link to. 
</p>

「exactline」是鏈接名稱或段落的標題。

它僅滾動的iframe，而不是整個頁面..

我試着和它的工作對我來說這個鏈接

來源

2013-06-26 08:58:06

我認爲，如果你做了<a target="name of iframe" href="#name of anchor">Click here</a>它會工作，因爲然後鏈接在iframe中打開，這可能是爲什麼錨正在使整個頁面滾動到iframe。希望我幫助並希望它有效！ :)

來源

2013-11-25 18:05:29 SchoolBoy

是的，這是什麼發生，但我（我認爲OP）想要的是框架滾動，但不影響父頁面。我有這樣的情況，即框架在屏幕上，但點擊鏈接（位於框架上方）會導致鏈接不在視圖中（這是不可取的）。 – Gujamin

嘗試設置幀的位置或散列的各種組合仍然不幸導致父滾動。

所以這就是我最終做的事情，因爲iframe的內容位於同一個域中，所以沒有導航框架DOM的跨站點問題。

我修改了父級中的鏈接，而不是在做target="myiframe"，我添加了一個o'clock函數來執行繞過默認實現的滾動（這似乎會導致父級跳轉到iframe）。

<a onclick="linkFunction(this, event);return false;"...

鏈接函數如下：

/// for scrolling iframe without jumping parent page 
function linkFunction(atag, event) { 
    event.preventDefault(); 
    var iframe = document.getElementById('myiframe'); 
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document; 
    var name = atag.href.split('#')[1]; // get the hash 
    var anchor = innerDoc.getElementsByName(name)[0]; // find the corresponding anchor tag 
    // get position of the anchor relative to the current scroll position 
    var offset = anchor.getBoundingClientRect().top 
    // jump scroll the iframe content to the anchor 
    iframe.contentWindow.scrollBy(0, offset) 
}

沒有jQuery和仍然工作正常，如果禁用JavaScript（只是將恢復爲默認父跳躍）。

希望這可以幫助別人。

來源

2015-12-10 17:30:23 Gujamin

也許這是一個鉻的錯誤，因爲這個問題不會發生在最新的IE和Firefox。

它在iframe中單擊錨點時發生，瀏覽器嘗試將錨點對齊到窗口頂部。

我解決了這個問題，使用JavaScript（jQuery的）：

$('body').on('click', 'a', function(e) { 
    if($(this).attr('href').startsWith('#')) { 
     e.preventDefault(); 
    } 
});

我希望它可以幫助你&好運！

來源

2017-08-16 17:26:00 Zengguotai

如何避免iframe中的錨點滾動父頁面

回答

相關問題