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

Question

我网站的所有 'content pages' 在我的索引页上的 iframe 中打开。

我在 iframe 中使用 onload="scroll(0,0);" 代码成功强制我所有的 'content pages' 从 'top'.

开始

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

到目前为止，还不错。

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

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

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

为了更好地说明我遇到的问题，我提供了一个极其精简的网站模型（6 页，包括 'Index Page'），以表示我正在使用的布局。

索引页：

<!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' 中打开）每次都在顶部打开。

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

我刚刚试过了，前两个 onload 事件都非常有效。

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

Force Inner-iframe Content to Scroll To Top On Pageload

javascript

iframe

onload

scroll-position

scrolltop