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

Question

У меня есть iframe от середины до низа на странице. Когда я загружаю страницу, она прокручивается вниз. Я попытался body onload window.scroll(0,0), но это дает ужасный эффект, потому что сначала он падает, а затем сразу прокручивается вверх.

В чем причина этого автоматического прокрутки вниз с iframe на странице?

Answer 1

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

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

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

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

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

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

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

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

Answer 2

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

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

Answer 3

Это решение, которое я придумал и протестировал в 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/

Answer 4

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

// 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 () {};

Answer 5

Кажется, это хорошо работает:

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

Answer 6

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

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

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

Answer 7

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

.iframe_display{visibility:hidden}

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

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