Как сместить содержимое iframe | HTML

Сдвинуть содержимое фрейма, если у страниц один домен

<button onclick="myWindow5('raz', '0', '800')">Сдвинуть</button>
<iframe id="raz" class="miframe" src="http://shpargalkablog.ru/2014/10/window-open-javascript.html"></iframe>
<script>
function myWindow5(name, x, y) {
  var childWindow = document.getElementById(name).contentWindow;
  childWindow.scrollTo(x, y);
}
</script>

iframe прокрутить к хэш-тегу при загрузки, если у страниц один домен

<iframe id="dva" class="miframe" src="http://shpargalkablog.ru/2014/10/window-open-javascript.html" onload="var w = this.contentWindow; w.scrollTo(0, w.document.getElementById('popup').getBoundingClientRect().top);"></iframe>

getBoundingClientRect().top - отступ от верхнего края окна браузера до верхнего края элемента

Сместить фрейм, если у страниц разный домен

<!-- На странице http://shpargalkablog.ru/2014/11/iframe.html -->
<iframe src="http://css.shpargalkablog.ru/2014/03/blog-post_6.html" id="iframe" class="miframe"></iframe>
<script>
document.getElementById("iframe").onload = function() {
    this.contentWindow.postMessage("0,800", "http://css.shpargalkablog.ru") // "0,800" - это значение которое передаём только для "http://css.shpargalkablog.ru" (если нужно для всех, то URL нужно заменить на *)
}
</script>

<!-- На странице http://css.shpargalkablog.ru/2014/03/blog-post_6.html -->
<script>
addEventListener("message", function(e){
  if ( e.origin == "http://shpargalkablog.ru" ) // только если родитель "http://shpargalkablog.ru"
  var ed = e.data.split(/,/); // e.data разбить на массив запятыми
  window.scrollTo(ed[0],ed[1]) // прокрутить до указанного значения
}, false)
</script>

Проскроллить содержимое iframe, если к нему нет доступа

<div class="chuzhoi"><iframe src="http://css.shpargalkablog.ru/2014/03/blog-post_6.html" scrolling="no"></iframe></div>
<!-- В html5 нет атрибута scrolling -->


<style>
.chuzhoi {
  position: relative;
  overflow: hidden; /* обрезать всё, что выходить за div */ 
  height: 200px;
}
.chuzhoi > iframe {
  position: absolute;
  top: -800px; /* поднять документ на высоту необходимой прокрутки */ 
  height: 1000px; /* видимая высота документа должна быть достаточной: height div + top = 200+800 */ 
  width: 100%;
  box-sizing: border-box; /* чтобы border включать в width */ 
}
</style>
в f t
наверх ↑

8 комментариев:

Andrey Klimkovsky
Спасибо. Это как раз интересовало недавно.
NMitra
И меня тоже :)
Анонимный
Это божественно.
Очень долго искал подобную информацию по фреймам =)
Анонимный
Здравствуйте!!!
Вы как всегда неповторимы. Огромное Вам спасибо за информацию. Сам долго борюсь с ифраме. Если можно вопрос. Например человек читает что-то, перезагрузилась страница. Можно его как-то вернуть на место где он был?
Ещё раз спасибо Вам.
NMitra
Здравствуйте, спасибо!

Можно попробовать в localStorage ( http://shpargalkablog.ru/2013/06/localStorage.html ) сохранить положение на странице ( http://shpargalkablog.ru/2013/05/get-mouse-coordinates-inside-div.html#size-window ), и потом посетителя переносить на значение, записанное в localStorage ( http://shpargalkablog.ru/2014/10/smooth-scrolling.html )
Анонимный
Спасибо! Благодарю!
Порою подумаю. Что-то из этого я уже нарыл например до якоря после перезагрузки, но не плавно. Спасибо Вам огромное.
У Вас самая понятно изложенная информация, для таких как я. Все остальные просто отдыхают. Хотя про яваскрипт тут тоже довольно толково.
http://www.wisdomweb.ru/JS/javascript-first.php
И здесь много полезного и интересного.
http://pcvector.net/
Но всё ровно Вы лучшая.
Спасибо Вам.
NMitra
Спасибо за комплименты! Очень приятно!

Угу, ссылки знакомы. Добавлю только https://learn.javascript.ru/ и его же форум https://javascript.ru/ Я Гугл очень часто использую как поиск по двум сайтам:

1) https://www.google.ru/search?ie=UTF-8&hl=ru&q=site&safe=strict&gws_rd=ssl#newwindow=1&safe=strict&hl=ru&q=site:javascript.ru+iframe+localStorage
2) https://www.google.ru/search?ie=UTF-8&hl=ru&q=site&safe=strict&gws_rd=ssl#newwindow=1&safe=strict&hl=ru&q=site:stackoverflow.com+iframe+localStorage
Анонимный
Спасибо Вам.
У меня тоже много их страниц в закладках. А целых их не воспринимал. Спасибо, теперь будет легче рыть.
Спасибо. Будем творить дальше!!!