Question

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

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

Answer 1

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

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

我们的想法是，如果某个焦点在远程页面上窃取您无法控制的脚本，浏览器将不会聚焦隐藏元素。而且，在改变焦点的脚本之后，你的onload很可能会被激活。

或者，另一个可能更可靠的选项：

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

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

当然，在不知道更多情况的情况下，很难确定哪些权衡是可以的，而且这两种选择都有一些条件，所以YMMV。

我希望有帮助：）

Answer 2

简单。在about:blank中使用src

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

Answer 3

类似的方法，但使用类..我在iFrame的“iframe_display”的父div中添加了一个类，其中的样式位于visibility：hidden之内。在页面加载我然后使用jQuery删除类

.iframe_display{visibility:hidden}

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

这会使焦点远离iFrame，并在页面加载时停止向下滚动到iFrame

Answer 4

Leandro＆amp; amp;提供的src="about:blank"技巧由Spokey编辑为我工作，但我想分享我以前使用过的解决方法。

我找到的一个临时解决方案是将iframe嵌入到我页面的最上面的元素（导航，标题等）中，这样即使浏览器想要跳转到焦点，它也会跳转到“＃”。到顶部元素。这仍然会导致轻微可感知的跳跃，这可能会让你感到烦恼。

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

Answer 5

这似乎运作良好：

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

Answer 6

我提出了一个＆＃34; hack＆＃34;这很好用。如果您不希望将网页滚动到除顶部以外的任何位置，请使用此选项：

// 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 () {};

Answer 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/

得到了最初的概念

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

7 个答案: