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

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

javascript iframe

Javascript 在页面加载时强制内部iframe内容滚动到顶部,javascript,iframe,onload,scrolltop,scroll-position,Javascript,Iframe,Onload,Scrolltop,Scroll Position,我网站的所有“内容页”都在我的索引页上的iframe内打开我在iframe中使用了onload=“scroll（0,0）；”代码，它成功地强制我的所有“内容页”从“顶部”开始 <iframe id="iframe_A" name="iframe_A" onload="scroll(0,0);" src="Page1.html"></iframe> 到目前为止，一切顺利然而。。。在我的网站中，我也有一个“子网站”（也在iframe_a的内部打开），但它有自己的

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

我在iframe中使用了onload=“scroll（0,0）；”代码，它成功地强制我的所有“内容页”从“顶部”开始

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


正文{页边距：0；}
.header{宽度：100%；高度：60px；背景色：蓝色；}
.header a{左侧填充：20px；垂直对齐：中间；行高：60px；字体系列：Arial；字体大小：12pt；颜色：#ffffff；}
#iframe_A{宽度：100%；高度：1700px；}
.footer{宽度：100%；高度：60px；背景色：蓝色；页边距底部：20px；}
.footer a{左填充：20px；垂直对齐：中间；行高：60px；字体系列：Arial；字体大小：12pt；颜色：#ffffff；}

第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>


正文{margin:0px 0px 0px 20px；}
.font{字体系列：Arial，Helvetica，无衬线；字体大小：12pt；}
.top{margin top:10px；}
.bottom{页边距顶端：1640px；}
这是iframe_A（顶部）中的第1页。
这是iframe_A（底部）中的第1页。

第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>


正文{margin:0px 0px 0px 20px；}
.font{字体系列：Arial，Helvetica，无衬线；字体大小：12pt；}
.top{margin top:10px；}
.bottom{页边距顶端：1640px；}
这是iframe_A（顶部）中的第2页。
这是iframe_A（底部）中的第2页。

第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>


正文{margin:0px；}
.header{宽度：100%；高度：60px；背景色：红色；}
.header a{左侧填充：20px；垂直对齐：中间；行高：60px；字体系列：Arial；字体大小：12pt；颜色：#ffffff；}
#iframe_B{宽度：100%；高度：1580px；}
.footer{宽度：100%；高度：60px；背景色：红色；}
.footer a{左填充：20px；垂直对齐：中间；行高：60px；字体系列：Arial；字体大小：12pt；颜色：#ffffff；}

第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>


正文{margin:0px 0px 0px 20px；}
.font{字体系列：Arial，Helvetica，无衬线；字体大小：12pt；}
.top{margin top:10px；}
.bottom{页边距顶端：1520px；}
这是iframe_B（顶部）中的第4页。
这是iframe_B（底部）中的第4页。

第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>


正文{margin:0px 0px 0px 20px；}
.font{字体系列：Arial，Helvetica，无衬线；字体大小：12pt；}
.top{margin top:10px；}
.bottom{页边距顶端：1520px；}
这是iframe_B（顶部）中的第5页。
这是iframe_B（底部）中的第5页。

在这个模型中。。。无论您在上一页的页面位置如何，iframe_A中的第1、2和3页始终在页面顶部打开。。。他们应该这样做

我正在尝试使内容页4和5（在第3页的“iframe\u B”中打开）每次都在顶部打开。

尝试在iframe\u B html标记中使用以下一个加载脚本：

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

我刚试过，前两个onload事件都很有效。

所以你使用

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）

任何有效的方法？刚才，我无法访问您提供的链接。非常感谢！这正是我需要的。工作起来很有魅力！：）

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)