强制内部 iframe 内容在页面加载时滚动到顶部答案

【问题标题】：Force Inner-iframe Content to Scroll To Top On Pageload强制内部 iframe 内容在页面加载时滚动到顶部
【发布时间】：2017-12-07 07:30:45
【问题描述】：

我网站的所有“内容页面”都在我的索引页面上的 iframe 内打开。

我正在使用 onload="scroll(0,0);"该 iframe 中的代码成功强制我的所有“内容页面”从“顶部”开始。

  <iframe id="iframe_A" name="iframe_A" onload="scroll(0,0);" src="Page1.html"></iframe>

到目前为止，一切都很好。

但是...在我的网站中，我还有一个“子网站”（它也在 iframe_A 内部打开），但有它自己的 iframe [iframe_B]。

所有子网站的内容页面都在 iframe_B 内打开。

一切都好....但是，不幸的是...我无法让子网站的 iframe_B 的内容页面像在 iframe_A 中一样在顶部打开。

为了更好地说明我遇到的问题，我包含了一个非常精简的网站模型（6 页，包括“索引页”），以表示我正在使用的布局。

索引页：

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0;}
.header{width:100%; height:60px; background-color:blue;}
.header a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
#iframe_A{width:100%; height:1700px;}
.footer{width:100%; height:60px; background-color:blue; margin-bottom:20px;}
.footer a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
</style>
</head>
<body>

<div class="header"><a>Index Header&nbsp;&nbsp;</a>
<a href="Page1.html" target="iframe_A">Page 1</a>&nbsp;&nbsp;
<a href="Page2.html" target="iframe_A">Page 2</a>&nbsp;&nbsp;
<a href="Page3.html" target="iframe_A">Page 3</a>
</div>

<iframe id="iframe_A" name="iframe_A" src="Page1.html" scrolling="no" onload="scroll(0,0);"></iframe>

<div class="footer"><a>Index Footer&nbsp;&nbsp;</a>
<a href="Page1.html" target="iframe_A">Page 1</a>&nbsp;&nbsp;
<a href="Page2.html" target="iframe_A">Page 2</a>&nbsp;&nbsp;
<a href="Page3.html" target="iframe_A">Page 3</a>
</div>

</body>
</html>

第 1 页

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1640px;}
</style>
</head>
<body>
<div class="top font">This is Page 1 in iframe_A (Top).</div>
<div class="bottom font">This is Page 1 in iframe_A (Bottom).</div>
</body>
</html>

第 2 页

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1640px;}
</style>
</head>
<body>
<div class="top font">This is Page 2 in iframe_A (Top).</div>
<div class="bottom font">This is Page 2 in iframe_A (Bottom).</div>
</body>
</html>

第 3 页

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px;}
.header{width:100%; height:60px; background-color:red;}
.header a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
#iframe_B{width:100%; height:1580px; }
.footer{width:100%; height:60px; background-color:red;}
.footer a{padding-left:20px; vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
</style>
</head>
<body>
<div class="header"><a>Page 3 (Subsite) Header</a>
<a href="Page4.html" target="iframe_B">Page 4</a>
<a href="Page5.html" target="iframe_B">Page 5</a>
</div>
<iframe id="iframe_B" name="iframe_B" src="Page4.html" scrolling="no">
</iframe>
<div class="footer"><a>Page 3 (Subsite) Footer&nbsp;&nbsp;</a>
<a href="Page4.html" target="iframe_B">Page 4</a>
<a href="Page5.html" target="iframe_B">Page 5</a>
</div>
</body>
</html>

第 4 页

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1520px;}
</style>
</head>
<body>
<div class="top font">This is Page 4, in iframe_B (Top).</div>
<div class="bottom font">This is Page 4, in iframe_B (Bottom).</div>
</body>
</html>

第 5 页

<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0px 0px 0px 20px;}
.font{font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.top{margin-top:10px;}
.bottom{margin-top:1520px;}
</style>
</head>
<body>
<div class="top font">This is Page 5, in iframe_B (Top).</div>
<div class="bottom font">This is Page 5, in iframe_B (Bottom).</div>
</body>
</html>

在此模型中...页面 1、2 和 3 始终在 iframe_A 中的页面顶部打开，无论您在上一页中处于什么页面位置...应该如此。

我正在尝试获取内容页面 4 和 5（在页面 3 的“iframe_B”中打开），每次都在顶部打开。

【问题讨论】：

所以您使用iframe 来显示另一个iframe？如果是这样，那么为什么不在另一个 iframe 上使用相同的滚动条，如果它似乎在第一个上运行良好？
@JamieSexton 您的确切问题在这里不清楚。你试图打开第4、5页的顶部是什么意思？我可以看到它总是加载在框架 B 中，页面的开头在顶部可见。另外，为什么将相同的链接放在每个父页面的页脚底部会混淆，这有什么意义？
@JamieSexton 到目前为止理解。您是否尝试过使用onload=top.scrollTo(0,0) 或onload=window.parent.scrollTo(0,0) 或window.parent.parent.scrollTo(0,0) 任何有效的方法？刚才，我无法访问您提供的链接。

标签： javascript iframe onload scrolltop scroll-position

【解决方案1】：

尝试在 iframe_B html 标记中使用以下 onload 脚本之一：

<iframe id="iframe_B" name="iframe_B" src="Page4.html" scrolling="no" onload="window.top.scrollTo(0,0);">

在下面，前 2 个应该适用于您的情况。

onload="window.top.scrollTo(0,0);" //Refers to the top main window (page)
onload="window.parent.scrollTo(0,0);" //Refers to the immediate parent window (page)
onload="window.parent.parent.scrollTo(0,0);" //Refers to the parent of parent window (page)

我刚刚尝试过，前 2 个 onload 事件都像魅力一样工作。

【讨论】：

非常感谢！这正是我所需要的。奇迹般有效！ :)