2017-07-04 227 views
1

我的所有網站的「內容頁面」都在我的索引頁上的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&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> 

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

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」),在每一次的頂部也打開了。

+0

所以你使用'iframe'來顯示另一個'iframe'?如果是這樣的話,爲什麼不在另一個iframe上使用相同的滾動條? – NewToJS

+0

@JamieSexton你確切的問題在這裏不清楚。你正試圖打開第4,5頁的頂部含義?我可以看到它始終在框架B中加載,頁面頂部可見。 另外,你爲什麼混淆在每頁父頁的底部放置相同的鏈接,這有什麼意義? –

+0

@JamieSexton到目前爲止瞭解。你有嘗試過使用'onload = top.scrollTo(0,0)'或'onload = window.parent.scrollTo(0,0)'或'window.parent.parent.scrollTo(0,0)'什麼都有效?就在現在,我無法訪問你給出的鏈接。 –

回答

2

試試以下的onload你iframe_B HTML標籤內腳本之一:

<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事件都像魅力一樣工作。

+0

非常感謝!這正是我需要的。奇蹟般有效! :) –

相關問題