javascript 页面底部的iframe：避免页面自动滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6596668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iframe on the page bottom: avoid automatic scroll of the page
提问by smepie
I have an iframefrom the middle to bottom on a page. When I load the page it scrolls to the bottom. I tried to body onload window.scroll(0,0)but it does an ugly effect because it first goes down and then immediately scrolls up.
我有一个iframe从中间到底部的页面。当我加载页面时，它会滚动到底部。我尝试过，body onload window.scroll(0,0)但它产生了一个丑陋的效果，因为它首先下降，然后立即向上滚动。
What's the cause of this automatic scroll to bottom with iframeon the page?
iframe页面上自动滚动到底部的原因是什么？
回答by Nate Cavanaugh
This is just a random one, but possible doing something like this:
这只是一个随机的，但可能做这样的事情：
<iframe style="display: none;" onload="this.style.display='block';" src="..."></iframe>
The thinking being that if it is some focus stealing script on a remote page that you can't control, the browser won't focus a hidden element. And there's a good likelihood that your onload will fire after their focus changing script.
想法是，如果您无法控制远程页面上的某些焦点窃取脚本，则浏览器将不会聚焦隐藏元素。并且很有可能您的 onload 会在他们的焦点更改脚本之后触发。
Or, one other option that might be a bit more reliable:
或者，另一种可能更可靠的选项：
<iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" src="..."></iframe>
Here we're basically saying hiding the frame and moving it to a negative offset on the page vertically. When it does try to focus the element inside of the frame, it should scroll the page upward, then once loaded place the iframe back in it's intended position.
在这里，我们基本上是说隐藏框架并将其垂直移动到页面上的负偏移量。当它确实尝试将元素聚焦在框架内时，它应该向上滚动页面，然后在加载后将 iframe 放回其预期位置。
Of course, without knowing more, it's hard to say for sure which tradeoffs are okay, and both of these options have conditions that are a tad racy, so YMMV.
当然，在不知道更多的情况下，很难确定哪些权衡是可以的，而且这两个选项的条件都有些苛刻，所以 YMMV。
I hope that helps :)
我希望有帮助:)
回答by Leandro Sislac
Simple. Use about:blankin srclike
简单的。用about:blank在src喜欢
<iframe id="idName" name="idName" src="about:blank" style="display:none"></iframe>
回答by SeamusH
The src="about:blank"trick provided by Leandro & edited by Spokey worked for me, but I'd like to share a workaround I was using before.
该src="about:blank"林德罗提供与编辑者Spokey技巧对我来说有效，但我想与大家分享我用前一种解决方法。
A temporary solution I found was to embed the iframe in the uppermost element on my page (nav, header etc), so that even if the browser wants to jump to focus, it 'jumps' to the top element. This still can cause a slightlyperceptible jump, which might bug you.
我找到的一个临时解决方案是将 iframe 嵌入我页面的最上方元素（导航、标题等），这样即使浏览器想要跳转到焦点，它也会“跳转”到顶部元素。这仍然会导致稍微可察觉的跳跃，这可能会打扰您。
To make sure the iframe remains hidden if you choose to place it near the top of a page, I applied an inline style of style="visibility:hidden; height: 0px; width: 0px;". I guess you could also use a z-indexcombo.
为了确保 iframe 在您选择将其放置在页面顶部附近时保持隐藏状态，我应用了style="visibility:hidden; height: 0px; width: 0px;". 我想你也可以使用z-index组合。
回答by Daniel
This seems to work well:
这似乎运作良好：
<iframe src="http://iframe-source.com" onLoad="self.scrollTo(0,0)"></iframe>
回答by Patrick Roberts
I came up with a "hack" that works well. Use this if you don't want your webpage to be scrolled to anywhere except the top:
我想出了一个效果很好的“黑客”。如果您不希望网页滚动到除顶部以外的任何位置，请使用此选项：
// prevent scrollTo() from jumping to iframes
var originalScrollTo = window.scrollTo;
window.scrollTo = function scrollTo (x, y) {
if (y === 0) {
originalScrollTo.call(this, x, y);
}
}
If you want to disable autoscrolling completely, just redefine the function to a no-op:
如果要完全禁用自动滚动，只需将该函数重新定义为无操作：
window.scrollTo = function () {};
回答by Youness
This is the solution I came up with and tested in Chrome.
这是我想出并在 Chrome 中测试的解决方案。
We have an iframe wrapped by a div element. To keep it short, I have removed the class names related to sizing the iframe. Here, the point is onMyFrameLoad function will be called when iframe is loaded completely.
我们有一个由 div 元素包裹的 iframe。为了简短起见，我删除了与调整 iframe 大小相关的类名。在这里，重点是当 iframe 完全加载时将调用 onMyFrameLoad 函数。
<div class="...">
<iframe onload="onMyFrameLoad()" class="..." src="..."></iframe>
</div>
Then in your js file, you need this;
然后在你的 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);
}
This way, all the scroll events become ineffective till iframe is loaded. After iframe is loaded, we wait 1 sec to make sure all the scroll events (from iframe) are nullified/consumed. This is not an ideal way to solve your problem if your iframe source is slow. Then you have to wait longer by increasing the waiting time in setTimeout function.
这样，在加载 iframe 之前，所有滚动事件都将无效。加载 iframe 后，我们等待 1 秒以确保所有滚动事件（来自 iframe）都被取消/消耗。如果您的 iframe 源很慢，这不是解决问题的理想方法。然后你必须通过增加 setTimeout 函数中的等待时间来等待更长时间。
I got the initial concept from https://davidwells.io/snippets/disable-scrolling-with-javascript/
我从https://davidwells.io/snippets/disable-scrolling-with-javascript/得到了最初的概念
回答by woolm110
Similar method but using classes.. I added a class to the iFrame's parent div of "iframe_display" with a style inside that of visibility: hidden. On page load I then used jQuery to remove the class
类似的方法，但使用类.. 我向 iFrame 的“iframe_display”的父 div 添加了一个类，其样式在可见性内：隐藏。在页面加载我然后使用 jQuery 删除类
.iframe_display{visibility:hidden}
$(function(){
$('#iframe_wrapper').removeClass('iframe_display');
});
This takes the focus away from the iFrame and stops the scrolling down to the iFrame on page load
这会将焦点从 iFrame 移开并在页面加载时停止向下滚动到 iFrame
