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

Question

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

这是一个示例：http://jsfiddle.net/ymbV7/1/ 不要向下滚动页面，而是滚动 iframe 直到您可以看到“内容”菜单，然后尝试任何链接（例如“功能”）。

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

有什么想法吗？

Answer 1

那么您是在告诉您，当单击描述链接详细信息的链接时您想要移至特定段落，对吗？

据我了解你可以这样做。

<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，而不滚动整个页面..

请参阅此链接以获取更多许可

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

我尝试过，它对我有用

Answer 2

尝试设置框架位置或散列的各种组合仍然不幸地导致父滚动。

这就是我最终所做的，因为 iframe 的内容位于同一域中，因此在框架 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，仍然可以正常工作（只是恢复到默认的父跳转）。

希望这对其他人有帮助。

Answer 3

可能是chrome的一个bug，因为这个问题在最新的IE和Firefox中不会发生。

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

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

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

希望对您有帮助，祝您好运！

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

Answer 5

我认为如果你这样做了

<a target="name of iframe" href="#name of anchor">Click here</a>

它会起作用，因为链接会在 iframe 中打开，这可能就是锚点使整个页面滚动到 iframe 的原因。希望我有所帮助并希望它有效！ :)

Answer 6

是的，您必须查看链接并使用 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;
        }
    }
});

Answer 7

这个方法对我有帮助：

const clickableElements = iframeDocument.querySelectorAll("button,a");
clickableElements.forEach((element) => {
element.addEventListener("click", (evt) => {
evt.preventDefault(); // Prevent the event from propagating
 });
 });

 <iframe
     sandbox="allow-same-origin allow-scripts allow-forms"
     src={iframeData}
     ref={iframeRef}              
 />