Принудительная прокрутка содержимого Inner-iframe при загрузке страницы

1

Все страницы содержания моего сайта открываются внутри iframe на моей индексной странице.

Я использую onload = "scroll (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 страниц, включая "страницу индекса") сайта, чтобы представить макет, который я использую.

ИНДЕКСНАЯ СТРАНИЦА:

<!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 (которые открываются в 'iframe_B' на стр. 3), чтобы ТАКЖЕ открывать вверху каждый раз.

  • 0
    Таким образом, вы используете iframe для отображения другого iframe ? Если это так, то почему бы не использовать ту же прокрутку на другом iframe если он хорошо работает на первом?
  • 0
    @JamieSexton ваш точный вопрос здесь не ясен. Вы пытаетесь открыть страницу 4, 5 в верхнем значении? я вижу, что он всегда загружается во фрейм B, а начало страницы видно вверху. Кроме того, почему вы путаете, помещая одинаковые ссылки внизу каждой родительской страницы, в чем смысл?
Показать ещё 1 комментарий
Теги:
iframe
onload
scrolltop
scroll-position

1 ответ

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
    Спасибо вам большое! Это именно то, что мне было нужно. Работает как шарм! :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню