Force Inner-iframe Content to Scroll To Top On Pageload
All of my website's 'content pages' open inside of an iframe on my index page.
I am using a onload="scroll(0,0);" code in that iframe which successfully forces all of my 'content pages' to start at the 'top'.
<iframe id="iframe_A" name="iframe_A" onload="scroll(0,0);" src="Page1.html"></iframe>
So far, so good.
However... within my website, I also have a 'subsite' (which also open's inside of iframe_A), yet has it's own iframe [iframe_B].
All of the subsite's content pages open inside of iframe_B.
All good.... but, unfortunately... I haven't been unable to get the content pages for the subsite's iframe_B to open at the top the same way as they do in iframe_A.
To better illustrate the issue I am having, I have included an extremely stripped down model (6 pages, including the 'Index Page') of the site, to represent the layout I am using.
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 </a>
<a href="Page1.html" target="iframe_A">Page 1</a>
<a href="Page2.html" target="iframe_A">Page 2</a>
<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 </a>
<a href="Page1.html" target="iframe_A">Page 1</a>
<a href="Page2.html" target="iframe_A">Page 2</a>
<a href="Page3.html" target="iframe_A">Page 3</a>
</div>
</body>
</html>
PAGE 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>
PAGE 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>
PAGE 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 </a>
<a href="Page4.html" target="iframe_B">Page 4</a>
<a href="Page5.html" target="iframe_B">Page 5</a>
</div>
</body>
</html>
PAGE 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>
PAGE 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>
In this model... Pages 1, 2 and 3 always open at the top of the page in iframe_A, no matter what page position you were at on the previous page... as they should.
I am attempting to get content pages 4 and 5 (which open in 'iframe_B' on Page 3), to ALSO open at the top each time.
Answer
Try using one of below onload scripts inside your iframe_B html tag:
<iframe id="iframe_B" name="iframe_B" src="Page4.html" scrolling="no" onload="window.top.scrollTo(0,0);">
Out of below, mostly the first 2 should work in your case.
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)
I just tried it and both the first 2 onload event are working like a charm.