Для всех основных браузеров (кроме IE) событие JavaScript onload не срабатывает, когда страница загружается в результате нажатия кнопки "Назад" - оно срабатывает только при первой загрузке страницы.
Может ли кто-нибудь указать мне на пример кода кроссбраузерности (Firefox, Opera, Safari, IE,…), который решает эту проблему? Я знаком с событием pageshow в Firefox, но, к сожалению, ни в Opera, ни в Safari это не реализовано.
Ребята, я обнаружил, что JQuery имеет только один эффект: при нажатии кнопки назад страница перезагружается. Это не имеет ничего общего с "готово".
Как это работает? Что ж, JQuery добавляет прослушиватель событий onunload.
// http://code.jquery.com/jquery-latest.js
jQuery(window).bind("unload", function() { // ...
По умолчанию ничего не делает. Но почему-то это вызывает перезагрузку в Safari, Opera и Mozilla - независимо от того, что содержит обработчик событий.
[изменить (Николай): вот почему это работает именно так: webkit.org, developer.mozilla.org . Прочтите эти статьи (или мое резюме в отдельном ответе ниже) и подумайте, действительно нужно ли это делать, чтобы ваша страница загружалась медленнее для пользователей.]
Не могу в это поверить? Попробуй это:
<body onunload=""><!-- This does the trick -->
<script type="text/javascript">
alert('first load / reload');
window.onload = function(){alert('onload')};
</script>
<a href="http://stackoverflow.com">click me, then press the back button</a>
</body>
Вы увидите аналогичные результаты при использовании JQuery.
Вы можете сравнить с этим без onunload
<body><!-- Will not reload on back button -->
<script type="text/javascript">
alert('first load / reload');
window.onload = function(){alert('onload')};
</script>
<a href="http://stackoverflow.com">click me, then press the back button</a>
</body>
onunload обработчик (страница уже все уничтожила; зачем ее кэшировать?).
- person Casey Chu; 10.05.2010
onunload="" в тег body? это оно? во всех браузерах? Пробовал, и, похоже, не работает ни в Mozilla, ни в Chrome.
- person Burjua; 18.08.2011
Некоторые современные браузеры (Firefox, Safari и Opera, но не Chrome) поддерживают специальный кэш «назад / вперед» (я назову его bfcache, термин, изобретенный Mozilla), задействованный, когда пользователь перемещается назад. В отличие от обычного (HTTP) кеша, он фиксирует полное состояние страницы (включая состояние JS, DOM). Это позволяет повторно загружать страницу быстрее и точно в том виде, в котором ее покинул пользователь.
Событие load не должно срабатывать, когда страница загружается из этого bfcache. Например, если вы создали свой пользовательский интерфейс в обработчике «load», и событие «load» было запущено один раз при начальной загрузке и второй раз, когда страница была повторно загружена из bfcache, страница будет иметь повторяющиеся элементы пользовательского интерфейса.
По этой же причине добавление обработчика «unload» останавливает сохранение страницы в bfcache (что замедляет обратный переход) - обработчик выгрузки может выполнять задачи очистки, которые могут оставить страницу в неработоспособном состоянии.
Для страниц, которым необходимо знать, когда они уходят / возвращаются, Firefox 1.5+ и версия Safari с исправлением для bug 28758 поддерживает специальные события, называемые" pageshow "и" pagehide ".
Использованная литература:
pushstate и replacestate. Есть ли у нас какие-то подходящие решения, которые действительно работают?
- person Pacerier; 12.10.2014
Я столкнулся с проблемой, что мой js не выполнялся, когда пользователь нажимал назад или вперед. Сначала я решил остановить кеширование браузера, но, похоже, это не было проблемой. Мой javascript был настроен на выполнение после загрузки всех библиотек и т. Д. Я проверил это с помощью события readyStateChange.
После некоторого тестирования я обнаружил, что готовое состояние элемента на странице, на которую был сделан щелчок, не «загружено», а «выполнено». Добавление || element.readyState == 'complete' в условное выражение решило мои проблемы.
Просто подумал, что поделюсь своими выводами, надеюсь, они помогут кому-то другому.
Редактировать для полноты
Мой код выглядел следующим образом:
script.onreadystatechange(function(){
if(script.readyState == 'loaded' || script.readyState == 'complete') {
// call code to execute here.
}
});
В приведенном выше примере кода переменная сценария представляла собой вновь созданный элемент сценария, который был добавлен в DOM.
Хорошо, вот окончательное решение, основанное на исходном решении ckramer и примере palehorse, которое работает во всех браузерах, включая Opera. Если вы установите для history.navigationMode значение «совместимый», тогда функция готовности jQuery будет срабатывать при нажатии кнопки «Назад» в Opera, а также в других основных браузерах.
На этой странице есть дополнительная информация < / а>.
Пример:
history.navigationMode = 'compatible';
$(document).ready(function(){
alert('test');
});
Я тестировал это в Opera 9.5, IE7, FF3 и Safari, и он работает во всех из них.
Я не мог заставить приведенные выше примеры работать. Я просто хотел запустить обновление определенных измененных областей div при возвращении на страницу с помощью кнопки «Назад». Уловка, которую я использовал, заключалась в том, чтобы установить скрытое поле ввода (называемое «грязным битом») равным 1, как только области div изменились с оригинала. Скрытое поле ввода фактически сохраняет свое значение, когда я нажимаю кнопку "Назад", поэтому при загрузке я могу проверить этот бит. Если он установлен, я обновляю страницу (или просто обновляю div). Однако при исходной загрузке бит не установлен, поэтому я не трачу время на загрузку страницы дважды.
<input type='hidden' id='dirty'>
<script>
$(document).ready(function() {
if ($('#dirty').val()) {
// ... reload the page or specific divs only
}
// when something modifies a div that needs to be refreshed, set dirty=1
$('#dirty').val('1');
});
</script>
И он срабатывает правильно, когда я нажимаю кнопку «Назад».
Если я правильно помню, то добавление события unload () означает, что страницу нельзя кэшировать (в прямом / обратном кеше), потому что ее состояние изменяется / может измениться, когда пользователь уходит. Итак - небезопасно восстанавливать состояние последней секунды страницы при возврате к ней с помощью навигации по объекту истории.
Я думал, что это будет для «onunload», а не для загрузки страницы, ведь мы не говорим о запуске события при нажатии «Back»? $ document.ready () предназначен для событий, желаемых при загрузке страницы, независимо от того, как вы попадаете на эту страницу (например, перенаправление, открытие браузера по URL-адресу напрямую и т. д.), а не при нажатии «Назад», если вы не говорите о том, что запустить на предыдущей странице, когда она снова загрузится. И я не уверен, что страница не кэшируется, поскольку я обнаружил, что Javascripts все еще есть, даже когда в них включен $ document.ready (). Нам приходилось нажимать Ctrl + F5 при редактировании наших скриптов, у которых есть это событие, всякий раз, когда мы их пересматриваем и хотим протестировать результаты на наших страницах.
$(window).unload(function(){ alert('do unload stuff here'); });
это то, что вам нужно для события onunload при нажатии «Назад» и выгрузке текущей страницы, а также срабатывает, когда пользователь закрывает окно браузера. Это больше походило на то, что мы хотели, даже несмотря на то, что количество ответов $ document.ready () меня меньше. По сути, разница между событием, запускаемым на текущей странице при ее закрытии, или событием, которое загружается при нажатии кнопки «Назад» во время загрузки. Протестировано в IE 7 нормально, не могу говорить о других браузерах, поскольку они не разрешены там, где мы находимся. Но это может быть другой вариант.
Я могу подтвердить ckramer, что событие готовности jQuery работает в IE и FireFox. Вот образец:
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var d = new Date();
$('#test').html( "Hi at " + d.toString() );
});
</script>
</head>
<body>
<div id="test"></div>
<div>
<a href="http://www.google.com">Go!</a>
</div>
</body>
</html>
для людей, которые не хотят использовать всю библиотеку jquery, я выделил реализацию в отдельный код. Это всего лишь 0,4 КБ.
Вы можете найти код вместе с учебником по немецкому в этой вики: http://web.archive.org/web/20130417092220/http://www.easy-coding.de/wiki/html-ajax-und-co/onload-event-cross-browser-kompatibler-domcontentloaded.html
jQuery ready было создано именно для такого рода проблем. Вы можете покопаться в реализации, чтобы увидеть, что происходит под прикрытием.
ready не запускается в Firefox при использовании кнопки «Назад». См. Также ответ Николая.
- person Arjan; 13.07.2010
Билл, осмелюсь ответить на ваш вопрос, однако я не уверен на 100% в своих догадках. Я думаю, что другие браузеры, кроме IE, при переходе пользователя на страницу в истории не только загружают страницу и ее ресурсы из кеша, но также восстанавливают для нее все состояние DOM (сеанс чтения). IE не выполняет восстановление DOM (или, по крайней мере, не делал этого), и поэтому событие onload необходимо для правильной повторной инициализации страницы.
Я попробовал решение от Билла, используя $ (document) .ready ... но сначала это не сработало. Я обнаружил, что если сценарий поместить после раздела html, он не будет работать. Если это головная секция, она будет работать, но только в IE. Скрипт не работает в Firefox.
Хорошо, я попробовал это, и он работает в Firefox 3, Safari 3.1.1 и IE7, но не в Opera 9.52.
Если вы воспользуетесь примером, показанным ниже (на основе примера Palehorse), вы получить всплывающее окно с предупреждением при первой загрузке страницы. Но если вы затем перейдете по другому URL-адресу, а затем нажмете кнопку «Назад», чтобы вернуться на эту страницу, вы не получите всплывающее окно с предупреждением в Opera (но оно есть в других браузерах).
В любом случае, я думаю, что на данный момент это достаточно близко. Спасибо всем!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<meta http-equiv="expires" content="0">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function(){
alert('test');
}
);
</script>
</head>
<body>
<h1>Test of the page load event and the Back button using jQuery</h1>
</body>
</html>
Событие разгрузки не работает нормально в IE 9. Я пробовал его с событием загрузки (onload ()), он отлично работает в IE 9 и FF5.
Пример:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(window).bind("load", function() {
$("[name=customerName]").val('');
});
</script>
</head>
<body>
<h1>body.jsp</h1>
<form action="success.jsp">
<div id="myDiv">
Your Full Name: <input name="yourName" id="fullName"
value="Your Full Name" /><br> <br> <input type="submit"><br>
</div>
</form>
</body>
</html>
Я использовал шаблон html. В файле custom.js этого шаблона была такая функция:
jQuery(document).ready(function($) {
$(window).on('load', function() {
//...
});
});
Но эта функция не работала, когда я возвращался после перехода на другую страницу.
Итак, я попробовал это, и это сработало:
jQuery(document).ready(function($) {
//...
});
//Window Load Start
window.addEventListener('load', function() {
jQuery(document).ready(function($) {
//...
});
});
Теперь у меня есть две "готовые" функции, но они не выдают ошибок, и страница работает очень хорошо.
Тем не менее, я должен заявить, что он тестировался в Windows 10 - Opera v53 и Edge v42, но не в других браузерах. Имейте в виду это ...
Примечание: версия jquery была 3.3.1, а версия миграции была 3.0.0.
