Положение прокрутки по умолчанию iFrame [дубликат]
Оба прекрасны; это явно указано в спецификации :
... Таким образом, вызов функции
Error(…)эквивалентен выражению создания объектаnew Error(…)с теми же аргументами.
9 ответов
Вы можете использовать событие onload, чтобы определить, когда закончил загрузку iframe, и там вы можете использовать функцию scrollTo в контенте contentWindow iframe, чтобы прокрутить до определенной позиции пикселей , слева и сверху (x, y):
var myIframe = document.getElementById('iframe');
myIframe.onload = function () {
myIframe.contentWindow.scrollTo(xcoord,ycoord);
}
Здесь вы можете проверить рабочий пример .
Примечание: Это будет работать, если оба страницы находятся в одном домене.
-
1Так что, если страницы не находятся в одном домене, это не сработает? – vimist 19 June 2010 в 01:28
-
2@ Chief17 - это правильно, это нарушит ту же политику домена для Javascript. – Steve Claridge 25 October 2010 в 14:55
-
3вы можете обойти одну и ту же политику происхождения, удвоившись на iframes. На главной странице встроен iframe на страницу прокладки на вашем собственном сервере. Страница прокладки в свою очередь включает в себя iframe внешней страницы. Главная страница может прокручивать страницу прокладки, так как они находятся в одном и том же месте. Уродливо, но это работает. – Nelson 16 April 2011 в 23:58
-
4Если вы заранее знаете размеры контента, который хотите показать в iframe, вы можете поместить iframe в содержащий div, установить переполнение: скрытый на нем, а затем относительно разместить iframe внутри этого. Подобный эффект, без javascript. – Chris 12 March 2012 в 15:30
-
5проверил вашу скрипку и, похоже, не работает. полосы прокрутки iframe не двигались :( screencast.com/t/MEvAiJA6yMCb – mars-o 19 August 2014 в 05:44
На основании комментарий Криса
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'}
-
1Я не смог заставить это работать. Все это делает прокрутку div, а iframe внутри div ничего не делает. Могли бы вы продемонстрировать в jsfiddle? Не могли бы вы также объяснить константу 438? – whiteshooz 20 May 2015 в 21:33
-
2@whiteshooz, точнее, прокрутка остается в div, которая содержит весь iframe со страницей. Таким образом, я могу прокручивать страницу через div вместо iframe, не нарушая политику одного и того же происхождения (которая применяется только к iframe). 438 - это начальная высота, которую я хочу прокрутить, в этом примере (я отредактирую свой ответ, спасибо за ваш комментарий). – Sony Santos 21 May 2015 в 17:27
-
3
У меня также возникли проблемы с использованием любой функции 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.
Вы должны иметь hash iframe перед верхней страницей или только iframe будет прокручиваться, а верхняя часть останется скрытой, но в то время как она немного «перегружена» из-за тайм-аутов, которые она работает. Я предполагаю, что теги повсюду позволяли бы использовать различные точки «scrollTo».
Вдохновленный комментарием Нельсона, я сделал это.
Временное решение для 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>
-
1можно ли было бы динамически изменять src weather.htm с этим? как в "www.google.com & quot; или «www.yahoo.com» и т. д.? – user1869558 1 April 2013 в 07:59
-
2
-
3
-
4
Используйте свойство scrollTop содержимого фрейма, чтобы установить вертикальное смещение прокрутки содержимого на определенное количество пикселей (например, 100):
<iframe src="foo.html" onload="this.contentWindow.document.documentElement.scrollTop=100"></iframe>
-
1
-
2
-
3СПАСИБО! Я работал на waaaay слишком много часов, пытаясь заставить это работать! – Taylor Liss 6 December 2017 в 23:29
Или вы можете установить margin-top на iframe ... немного взломать, но пока работает в FF.
#frame {
margin-top:200px;
}
Решение jQuery:
$("#frame1").ready( function() {
$("#frame1").contents().scrollTop( $("#frame1").contents().scrollTop() + 10 );
});
var $iframe = document.getElementByID('myIfreme');
var childDocument = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document;
childDocument.documentElement.scrollTop = 0;
-
1Этот ответ был отмечен как низкокачественный из-за его длины и содержания. Пожалуйста, сделайте его более применимым к OP. – paqogomez 8 November 2013 в 02:06
Вдохновленный комментариями Нельсона и 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.)
-
1Я не смог заставить это работать. Все это делает прокрутку div, а iframe внутри div ничего не делает. Могли бы вы продемонстрировать в jsfiddle? Не могли бы вы также объяснить константу 438? – whiteshooz 20 May 2015 в 21:33
-
2@whiteshooz, точнее, прокрутка остается в div, которая содержит весь iframe со страницей. Таким образом, я могу прокручивать страницу через div вместо iframe, не нарушая политику одного и того же происхождения (которая применяется только к iframe). 438 - это начальная высота, которую я хочу прокрутить, в этом примере (я отредактирую свой ответ, спасибо за ваш комментарий). – Sony Santos 21 May 2015 в 17:27
-
3
-
4– timtom 4 October 2018 в 10:23