页面底部的 iframe：避免页面自动滚动答案

【问题标题】：iframe on the page bottom: avoid automatic scroll of the page页面底部的 iframe：避免页面自动滚动
【发布时间】：2011-07-06 12:52:56
【问题描述】：

我在页面的中间到底部有一个iframe。当我加载页面时，它会滚动到底部。我尝试body onload window.scroll(0,0)，但效果很糟糕，因为它先下降，然后立即向上滚动。

页面上iframe自动滚动到底部的原因是什么？

【问题讨论】：

您是否尝试在 iframe 上禁用滚动？
它以相同的方式滚动，也使用 scrolling="no" ...确切地它滚动到页面的中间，即 iframe 位置在哪里
可能是远程 iframe 的焦点问题......也许我无能为力。如果有人有解决方案表示赞赏（强制关注父页面......类似的东西）谢谢
您可以先尝试在不滚动的情况下渲染框架，然后（在加载时）将滚动附加到它吗？
我确定这不再是问题了，但你要么需要按照 Nate 的建议去做，要么如果你有一个空白的 iframe src (src="#") 然后创建一个空白html 页面并将 iframe 的 src 指向该页面。 Webkit 浏览器执行此操作 (en.wikipedia.org/wiki/WebKit)。

标签： javascript iframe scroll

【解决方案1】：

这只是一个随机的，但可能会做这样的事情：

<iframe style="display: none;" onload="this.style.display='block';" src="..."></iframe>

这种想法是，如果它是您无法控制的远程页面上的一些焦点窃取脚本，浏览器将不会关注隐藏元素。而且你的 onload 很有可能会在他们改变焦点的脚本之后触发。

或者，另一种可能更可靠的选择：

<iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" src="..."></iframe>

在这里，我们基本上是在说隐藏框架并将其垂直移动到页面上的负偏移量。当它尝试将元素聚焦在框架内时，它应该向上滚动页面，然后在加载后将 iframe 放回其预期位置。

当然，在不了解更多情况下，很难确定哪些权衡是可以的，而且这两个选项的条件都有些过时，所以 YMMV。

希望对你有帮助:)

【讨论】：

当滚动是由 iframe 内的自动对焦输入元素引起时，尝试不起作用。
谢谢！似乎在 2019 年的 Chrome 73 中仍然具有相关性

【解决方案2】：

简单。在src 中使用about:blank 喜欢

<iframe id="idName" name="idName" src="about:blank" style="display:none"></iframe>

【讨论】：

如果你把 about:blank 在 src 你如何让 iframe 加载？你把实际的 iframe url 放在哪里？

【解决方案3】：

我想出了一个效果很好的“hack”。如果您不希望网页滚动到顶部以外的任何位置，请使用此选项：

// prevent scrollTo() from jumping to iframes
var originalScrollTo = window.scrollTo;

window.scrollTo = function scrollTo (x, y) {
  if (y === 0) {
    originalScrollTo.call(this, x, y);
  }
}

如果你想完全禁用自动滚动，只需将函数重新定义为无操作即可：

window.scrollTo = function () {};

【讨论】：

这正是我所需要的。谢谢。

【解决方案4】：

类似的方法，但使用类.. 我在 iFrame 的“iframe_display”的父 div 中添加了一个类，其样式在可见性：隐藏。在页面加载时，我使用 jQuery 删除类

.iframe_display{visibility:hidden}

$(function(){
    $('#iframe_wrapper').removeClass('iframe_display');
});

这会将焦点从 iFrame 上移开，并在页面加载时停止向下滚动到 iFrame

【讨论】：

【解决方案5】：

Leandro 提供并由 Spokey 编辑的 src="about:blank" 技巧对我有用，但我想分享一个我以前使用的解决方法。

我发现的一个临时解决方案是将 iframe 嵌入到我页面的最上面的元素（导航、标题等）中，这样即使浏览器想要跳转到焦点，它也会“跳转”到顶部元素。这仍然会导致轻微明显的跳跃，这可能会困扰您。

如果您选择将 iframe 放置在页面顶部附近，为了确保 iframe 保持隐藏状态，我应用了 style="visibility:hidden; height: 0px; width: 0px;" 的内联样式。我想你也可以使用z-index 组合。

【讨论】：

我正在使用此解决方案，但如果您这样做，页面中的锚链接将无法正常工作...

【解决方案6】：

这似乎运作良好：

<iframe src="http://iframe-source.com" onLoad="self.scrollTo(0,0)"></iframe>

【讨论】：

【解决方案7】：

这是我想出并在 Chrome 中测试的解决方案。

我们有一个由 div 元素包裹的 iframe。为了简短起见，我删除了与 iframe 大小相关的类名。这里的重点是在 iframe 加载完成后会调用 onMyFrameLoad 函数。

<div class="...">
    <iframe onload="onMyFrameLoad()" class="..." src="..."></iframe>
</div>

然后在你的js文件中，你需要这个；

function noscroll() {
  window.scrollTo(0, 0);
}
// add listener to disable scroll
window.addEventListener('scroll', noscroll);
function onMyFrameLoad() {
  setTimeout(function () {
    // Remove the scroll disabling listener (to enable scrolling again)
    window.removeEventListener('scroll', noscroll);
  }, 1000);
}

这样，在加载 iframe 之前，所有滚动事件都会失效。加载 iframe 后，我们等待 1 秒以确保所有滚动事件（来自 iframe）都被无效/消耗。如果您的 iframe 源很慢，这不是解决问题的理想方法。然后你必须通过增加 setTimeout 函数中的等待时间来等待更长的时间。

我从https://davidwells.io/snippets/disable-scrolling-with-javascript/得到了最初的概念

【讨论】：