Кнопка Назад заставляет iFrame задерживать событие window.onLoad

Question

Я показываю рекламу через iFrame.Серверы рекламной сети работают намного медленнее, чем мои, поэтому я асинхронно загружаю iFrame в событие window.onload.

// (using Prototype library)
Event.observe(window, 'load', function() {
  $('ad').writeAttribute('src', '/ad.html');
  // other initialization here
});

Проблема возникает при входе на сайт с помощью кнопки браузера назад.Неожиданно ad iFrame пытается загрузить немедленно (до того, как прослушиватель загрузки выше устанавливает атрибут 'src'), задерживая событие load на несколько секунд.В течение этих нескольких секунд сайт не работает, потому что я выполняю кучу инициализаций в window.onload.

Насколько я знаю, это происходит только в Firefox.Как я могу предотвратить эту блокировку нагрузки?

Answer 1

Проблема, вероятно, в Firefox bfcache (кеш назад / вперед), который поддерживает загрузку страниц для более быстрой навигации с помощью кнопок назад и вперед. Вы можете отключить его для своей страницы, связав обработчик выгрузки.

Answer 2

Теория

Проблема, которую вы заметили, может быть описана следующим образом: iframe в документе загружает URL, загруженный в него в момент перехода по внешней странице, а не URL, указанный в источнике HTML внешней страницы (или пустой страница в вашем случае).

Тот факт, что он задерживает onload, является лишь следствием: событие загрузки откладывается до тех пор, пока все ресурсы (изображения, кадры и т. Д.) Не завершат загрузку.

Я не смог найти документацию, объясняющую, что это должно происходить таким образом, ни каких-либо сообщений об ошибках, признающих ее известной проблемой, но FWIW Я вижу точно такое же поведение с Google Chrome 10.0.612.3 в тестовом примере ниже.

Это поведение, хотя и неинтуитивное в вашем случае, имеет некоторую логику: загрузки документов в кадрах исторически записываются в истории сеансов (история переходов назад / вперед). Предположим, вы открываете сайт, основной контент которого находится во фрейме, и перемещаетесь по внутреннему фрейму. После того, как вы ушли с сайта, а затем вернулись с помощью кнопки «назад», браузер, вероятно, должен загрузить последнюю загруженную страницу во фрейме.

* Решения 1012 * Удивительно, но это, похоже, не является распространенным вопросом, поэтому эти предложения основаны на моем понимании проблемы, я не проверял их ни в одном более реальном сценарии, чем приведенный ниже тестовый пример. Лучший опыт для пользователя был бы, если бы вы заставили bfcache работать. Насколько я могу видеть, это потребовало бы кэширования рекламного документа (используя вместо этого разные URL-адреса для показа разных объявлений) и, возможно, внесения изменений в используемую вами среду JS (если она всегда нарушает bfcache, я не знаю, раньше это было проблемой с другими фреймворками).
Однако если вы справитесь с этим, события load вообще не будет, страница будет просто восстановлена ​​точно в том состоянии, в котором она была оставлена, и будет намного быстрее, чем все, что попадает в сеть. Единственный способ предотвратить загрузку URL-адреса iframe из истории сеансов, о котором я могу подумать, - это избежать использования iframe в источнике HTML. Если вы вставите его динамически, то при следующей загрузке страницы это не будет «тот же» iframe, поэтому по умолчанию будет использоваться URL-адрес, указанный вами в src. Вместо того, чтобы пытаться запретить загрузке рекламы iframe на «назад», вы можете сделать так, чтобы ваш код, запущенный в данный момент вне события load, не блокировался iframe. Для этого вы можете использовать событие DOMContentLoaded . Приложение: Testcase

<code><iframe id="a"></iframe>
<pre id="b">

var b = document.getElementById ("b") b.innerHTML + = "перед загрузкой": iframe src = "+ document.getElementById (" a "). src +" \ n "; window.addEventListener ("load", function () { var newURL = "https://developer.mozilla.org/en/HTML/Element/iframe"; b.innerHTML + = "onload: iframe src =" + document.getElementById ("a"). src + "\ n"; b.innerHTML + = "установка src на" + newURL + "\ n"; document.getElementById ("a"). src = newURL; b.innerHTML + = "now iframe src =" + document.getElementById ("a"). src + "\ n"; }, ложный); // отключаем bfcache window.onunload = function () {}

Answer 3

Стоит попробовать задержать атрибут writeAttribute до тех пор, пока не будет обработана остальная часть события:

Event.observe(
 window,
 'load',
 function() {
  setTimeout(function() { 
    $('ad').writeAttribute('ad.html');
  }, 0);
 }
);

Это будет выполнено, как только все остальное будет сделано.

Да, так что не дайте мне дать два ответа

Я не знаю, почему это происходит, но вы пытаетесь поместить еще один iframe между вашей страницей и объявлением: ваша страница загружает iframe; этот iframe ждет несколько секунд (позволяя странице загрузиться), затем загружает объявление, которое займет всю область промежуточного iframe.

Answer 4

Стоит попробовать задержать атрибут writeAttribute до тех пор, пока не будет обработана остальная часть события:

Event.observe(
 window,
 'load',
 function() {
  setTimeout(function() { 
    $('ad').writeAttribute('ad.html');
  }, 0);
 }
);

Это будет выполнено, как только все остальное будет сделано.