我的所有网站的“内容页面”都在我的索引页上的iframe中打开。强制内部iframe内容在页面加载时滚动到顶部
我使用的onload = “滚动(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页,包括“索引页”)的网站,来表示我使用的布局。
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>
在这个模型中...页1,2和3总是在iframe_A页面顶部开放,不管什么页面你在位置在上一页...他们应该。
我试图让内容页4和5(其打开第3页“iframe_B”),在每一次的顶部也打开了。
所以你使用'iframe'来显示另一个'iframe'?如果是这样的话,为什么不在另一个iframe上使用相同的滚动条? – NewToJS
@JamieSexton你确切的问题在这里不清楚。你正试图打开第4,5页的顶部含义?我可以看到它始终在框架B中加载,页面顶部可见。 另外,你为什么混淆在每页父页的底部放置相同的链接,这有什么意义? –
@JamieSexton到目前为止了解。你有尝试过使用'onload = top.scrollTo(0,0)'或'onload = window.parent.scrollTo(0,0)'或'window.parent.parent.scrollTo(0,0)'什么都有效?就在现在,我无法访问你给出的链接。 –