Iframe на нижней части страницы: избегать автоматического прокрутки страницы

Ответ 1

Это случайный случай, но возможно сделать что-то вроде этого:

<iframe style="display: none;" onload="this.style.display='block';" src="..."></iframe>

Мысль заключается в том, что если на удаленной странице есть некий скрипт для кражи фокуса, который вы не можете контролировать, браузер не будет фокусировать скрытый элемент. И есть большая вероятность того, что ваша загрузка будет срабатывать после сценария изменения фокуса.

Или еще один вариант, который может быть более надежным:

<iframe style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" src="..."></iframe>

Здесь мы в основном говорим, что нужно скрыть рамку и переместить ее на отрицательное смещение на странице по вертикали. Когда он пытается сфокусировать элемент внутри фрейма, он должен прокрутить страницу вверх, а затем после загрузки поместить фрейм обратно в его предполагаемое положение.

Конечно, не зная больше, трудно сказать наверняка, какие компромиссы в порядке, и оба эти варианта имеют несколько более короткие условия, поэтому YMMV.

Надеюсь, это поможет :)

Ответ 2

Simple. Используйте about:blank в src как

<iframe id="idName" name="idName" src="about:blank" style="display:none"></iframe>

Ответ 3

Аналогичный метод, но с использованием классов. Я добавил класс в родительский div iFrame из "iframe_display" со стилем внутри видимости: hidden. При загрузке страницы я затем использовал jQuery для удаления класса

.iframe_display{visibility:hidden}

$(function(){
    $('#iframe_wrapper').removeClass('iframe_display');
});

Это отводит фокус от iFrame и останавливает прокрутку вниз до iFrame при загрузке страницы

Ответ 4

Тройка src="about:blank", предоставленная Леандро и отредактированная Spokey, работала для меня, но я хотел бы поделиться обходным решением, которое использовал раньше.

Временное решение, которое я нашел, - это вставить iframe в самый верхний элемент моей страницы (nav, header и т.д.), так что даже если браузер хочет перейти в фокус, он "перескакивает" на верхний элемент. Это все равно может вызвать слегка ощутимый прыжок, который может вас повредить.

Чтобы убедиться, что iframe остается скрытым, если вы решите разместить его в верхней части страницы, я применил встроенный стиль style="visibility:hidden; height: 0px; width: 0px;". Я думаю, вы также можете использовать комбо z-index.

Ответ 5

Это работает хорошо:

<iframe src="http://iframe-source.com" onLoad="self.scrollTo(0,0)"></iframe>

Ответ 6

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

// prevent scrollTo() from jumping to iframes
var originalScrollTo = window.scrollTo;

window.scrollTo = function scrollTo (x, y) {
  if (y === 0) {
    originalScrollTo.call(this, x, y);
  }
}

Если вы хотите полностью отключить автопрокрутку, просто переопределите функцию в no-op:

window.scrollTo = function () {};

Ответ 7

Это решение, которое я придумал и протестировал в Chrome.

У нас есть iframe, обернутый элементом div. Чтобы он был коротким, я удалил имена классов, связанные с размером iframe. Здесь точка onMyFrameLoad будет вызываться, когда iframe загружается полностью.

<div class="...">
    <iframe onload="onMyFrameLoad()" class="..." src="..."></iframe>
</div>

Затем в вашем файле js вам нужно это;

function noscroll() {
  window.scrollTo(0, 0);
}
// add listener to disable scroll
window.addEventListener('scroll', noscroll);
function onMyFrameLoad() {
  setTimeout(function () {
    // Remove the scroll disabling listener (to enable scrolling again)
    window.removeEventListener('scroll', noscroll);
  }, 1000);
}

Таким образом, все события прокрутки становятся неэффективными до загрузки iframe. После загрузки iframe мы ожидаем 1 секунду, чтобы убедиться, что все события прокрутки (из iframe) сведены на нет или использованы. Это не идеальный способ решить вашу проблему, если ваш источник iframe работает медленно. Затем вам нужно подождать дольше, увеличив время ожидания в функции setTimeout.

Я получил начальную концепцию из https://davidwells.io/snippets/disable-scrolling-with-javascript/