Прокрутка iframe с помощью JavaScript?

Я динамически загружаю iframe с помощью JavaScript. После загрузки, как я могу заставить его прокручивать определенное количество пикселей (т.е. После загрузки страницы в iframe, как я могу заставить iframe прокручивать себя в указанную область страницы?)

Ответ 1

Вы можете использовать событие onload для определения того, когда iframe закончил загрузку, и там вы можете использовать функцию scrollTo на contentWindow iframe, чтобы перейти к определенной позиции пикселей, слева и сверху (x, y):

var myIframe = document.getElementById('iframe');
myIframe.onload = function () {
    myIframe.contentWindow.scrollTo(xcoord,ycoord);
}

Вы можете проверить рабочий пример здесь.

Примечание.. Это будет работать, если обе страницы находятся в одном домене.

Ответ 2

Вдохновленный комментарием Нельсона, я сделал это.

Обходной путь для javascript Та же самая политика происхождения в отношении использования .ScrollTo() для документа, исходящего из внешнего домена.

Очень простая работа для этого связана с созданием dummy html-страницы, на которой размещается внешний веб-сайт, а затем вызывается .ScrollTo(x, y) на этой странице после ее загрузки. Тогда единственное, что вам нужно сделать, - это создать фрейм или iframe на этом веб-сайте.

Есть много других способов сделать это, это, безусловно, самый упрощенный способ сделать это.

* обратите внимание, что высота должна быть большой, чтобы разместить максимальное значение полосы прокрутки.

- home.htm

<html>
<head>
<title>Home</title>
</head>

<frameset rows="*,170">
<frame src=body.htm noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling=no>
<frame src="weather.htm" noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling=no>
</frameset>
</html>

- weather.htm

<html>
<head>
<title>Weather</title>
</head>

<body onLoad="window.scrollTo(0,170)">

<iframe id="iframe" src="http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0" height=1000 width=100% frameborder=0 marginheight=0 marginwidth=0 scrolling=no>
</iframe>

</body>
</html>

Ответ 3

Вдохновленный комментариями Нельсона и Chris, я нашел способ обхода одного и того же происхождения с помощью div и iframe:

HTML:

<div id='div_iframe'><iframe id='frame' src='...'></iframe></div>

CSS

#div_iframe {
  border-style: inset;
  border-color: grey;
  overflow: scroll;
  height: 500px;
  width: 90%
}

#frame {
  width: 100%;
  height: 1000%;   /* 10x the div height to embrace the whole page */
}

Теперь предположим, что я хочу пропустить первые 438 (вертикальные) пиксели страницы iframe, прокрутив к этой позиции.

JS-решение:

document.getElementById('div_iframe').scrollTop = 438

Решение JQuery:

$('#div_iframe').scrollTop(438)

Решение CSS:

#frame { margin-top: -438px }

(Для каждого решения достаточно одного, и эффект CSS один немного отличается, поскольку вы не можете прокручивать вверх, чтобы видеть верхнюю часть страницы iframed.)

Ответ 4

Решение jQuery:

$("#frame1").ready( function() {

  $("#frame1").contents().scrollTop( $("#frame1").contents().scrollTop() + 10 );

});

Ответ 5

Используйте свойство scrollTop содержимого фрейма, чтобы установить вертикальное перемещение по вертикали содержимого на определенное количество пикселей (например, 100):

<iframe src="foo.html" onload="this.contentWindow.document.documentElement.scrollTop=100"></iframe>

Ответ 6

Основано на комментарий Криса

CSS

.amazon-rating {
  width: 55px;
  height: 12px;
  overflow: hidden;
}

.rating-stars {
  left: -18px;
  top: -102px;
  position: relative;
}

HAML

.amazon-rating
  %iframe.rating-stars{src: $item->ratingURL, seamless: 'seamless', frameborder: 0, scrolling: 'no'}

Ответ 7

Или вы можете установить margin-top на iframe... немного взломанный, но пока работает в FF.

#frame {
margin-top:200px;
}

Ответ 8

У меня также возникли проблемы с использованием любой функции javascript "scrollTo" в iframe на iPad. Наконец, найдено "старое" решение проблемы, просто хеш к якорю.

В моей ситуации после возвращения ajax мои сообщения об ошибках были установлены для отображения в верхней части iframe, но если пользователь прокрутил вниз в том, что является, по общему признанию, длинной формой, представление исчезает, и ошибка появляется "выше складки", Кроме того, если предположить, что пользователь прокрутил страницу вниз, страница верхнего уровня была прокручена от 0,0 и была также скрыта.

Я добавил

<a name="ptop"></a>

в верхней части моего документа iframe и

<a name="atop"></a>

в верхней части страницы верхнего уровня

затем

    $(document).ready(function(){
      $("form").bind("ajax:complete",
        function() {
          location.hash = "#";
          top.location.hash = "#";
          setTimeout('location.hash="#ptop"',150);
          setTimeout('top.location.hash="#atop"',350);
        }
      )
    });

в iframe.

У вас есть хэш iframe перед верхней страницей или только прокрутка iframe будет прокручиваться, а верхняя часть останется скрытой, но в то время как она немного "прыжковата" из-за интервалов времени ожидания. Я предполагаю, что метки повсюду позволяли бы использовать различные точки прокрутки.

Ответ 9

var $iframe = document.getElementByID('myIfreme');
var childDocument = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document;
 childDocument.documentElement.scrollTop = 0;