如何避免iframe中的锚点滚动父页面

Question

所以问题在这里：我有一个相当长的页面，中间有一个iframe。现在，如果在iframe中点击了一个锚点，整个页面就会滚动到iframe，这正是我想要避免的。

这里有一个示例：http://jsfiddle.net/ymbV7/1/ 不要滚动页面，而是滚动iframe，直到可以看到“内容”菜单，并尝试任何链接（例如“特性”）。

我需要外部页面不滚动，而iframe必须正确滚动到单击的锚点。

有什么好的想法吗？

- StefanoP

---

我遇到了同样的问题。已在Chrome和FF上测试过。 - Mattia Larentis

Answer 1

尝试不同的设置框架位置或哈希的组合仍然不幸地导致父级滚动。

因此，由于iframe的内容位于同一域中，所以这就是我最终做的事情，因为没有跨站点问题导航frame DOM。

我修改了父级中的链接，因此不再使用target="myiframe"，而是添加了一个闹钟函数来绕过默认实现（似乎会导致父级跳到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被禁用仍能正常工作（只是回归到默认的父级跳转）。

希望这能帮助其他人。

- Kudit

Answer 2

所以您是在说当单击描述链接详细信息的链接时，您想要移动到特定段落吗？

根据我的理解，您可以这样做。

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

“Click here”可以改为“特点”，就像我在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而不是整个页面。 请参阅此链接以获取更多澄清。

http://www.thesitewizard.com/html-tutorial/link-to-specific-line-or-paragraph.shtml

我尝试了，对我有效。

- Guruprasad J Rao

Answer 3

也许这是Chrome的一个bug，因为在最新版本的IE和Firefox中没有出现这个问题。

当在iframe中点击锚点时，会发生这种情况，并且浏览器会尝试将锚点对齐到窗口顶部。

我使用JavaScript（jQuery）解决了这个问题：

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

我希望它能帮助你，祝你好运！

- Zengguotai

Answer 4

尝试将您的内容放入这样的表格中：

<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

- 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

Answer 5

是的，你必须使用JQuery观察链接并执行它。

$(document).on('click', 'A[href^="#"]', function(){
    var hash = $(this).attr('href');
    var o = $(hash);
    if (o.length) {
        // move it
        $("html,body").stop().animate({ scrollTop: o.offset().top }, 300, 'swing');
        if (window.frameElement) {
            // it has parent window => stop bubbling (will not change document location)
            return false;
        }
    }
});

- Martin Zvarík

Answer 6

我认为，如果你这样做：<a target="iframe名称" href="#锚点名称">点击这里</a> 那么它应该可以工作，因为链接会在iframe中打开，这也可能是为什么锚点会导致整个页面滚动到iframe的原因。希望我能帮上忙，并希望它可以正常工作！ :)

- Kaamil Jasani

---

是的，这就是正在发生的事情，但我（以及我认为的OP）想要的是让框架滚动，但不影响父页面。 我有这样的情况，即框架在屏幕上，但单击该链接（位于框架上方）会导致链接消失（这是不希望发生的）。 - Kudit