Существует ли перекрестный браузер onload событие при нажатии на кнопку "Назад"?

178
задан Sebastian Simon 24 January 2017 в 14:18
поделиться

10 ответов

Парни, я нашел, что JQuery имеет только один эффект: страница перезагружается, когда кнопка "Назад" нажимается. Это не имеет никакого отношения" готовый ".

, Как это работает? Ну, JQuery добавляет слушатель onunload события.

// http://code.jquery.com/jquery-latest.js
jQuery(window).bind("unload", function() { // ...

По умолчанию, это ничего не делает. Но так или иначе это, кажется, инициировало перезагрузку в Safari, Opera и Mozilla - неважно, что содержит обработчик событий.

[ редактирование (Nickolay) : вот то, почему это прокладывает себе путь: 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.

можно хотеть выдержать сравнение с этим без [1 116] 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>
115
ответ дан Nickolay 23 November 2019 в 20:16
поделиться

Хорошо, я попробовал это, и это работает в 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>
1
ответ дан Bill 23 November 2019 в 20:16
поделиться

Счет, я смею отвечать на Ваш вопрос, однако я не на 100% уверен со своими предположениями. Я думаю другой тогда, браузеры IE при взятии пользователя к странице в истории не только загрузят страницу и ее ресурсы от кэша, но они также восстановят весь DOM (сессия чтения) состояние для него. IE не делает восстановления DOM (или в арендном договоре не сделал), и таким образом onload событие надеется быть необходимым для надлежащей реинициализации страницы там.

2
ответ дан Sergey Ilinsky 23 November 2019 в 20:16
поделиться

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

3
ответ дан ckramer 23 November 2019 в 20:16
поделиться

Если я правильно помню, затем добавляя разгружение () событие означает, что страница не может кэшироваться (во вперед/назад кэше) - потому что это - состояние, изменяется/может изменение, когда пользователь перешел далеко. Таким образом - не безопасно восстановить состояние в последнюю секунду страницы при возврате к нему путем навигации через объект истории.

4
ответ дан 23 November 2019 в 20:16
поделиться

Хорошо, вот конечное решение на основе начального решения ckramer и примера palehorse, который работает во всех браузерах, включая Opera. При установке history.navigationMode на 'совместимый' тогда, готовая функция jQuery будет стрелять в операции Кнопки "Назад" в Opera, а также других главных браузерах.

Эта страница имеет [еще 111] информация .

Пример:

history.navigationMode = 'compatible';
$(document).ready(function(){
  alert('test');
});

я протестировал это в Opera 9.5, IE7, FF3 и Safari, и это работает во всех них.

21
ответ дан mplungjan 23 November 2019 в 20:16
поделиться

Я могу подтвердить 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>
4
ответ дан tothemario 23 November 2019 в 20:16
поделиться

Некоторые современные браузеры (Firefox, Safari и Opera, но не Chrome) поддерживают специальный кэш «назад / вперед» (я назову его bfcache, это термин, изобретенный от Mozilla), задействованные, когда пользователь переходит назад. В отличие от обычного (HTTP) кеша, он фиксирует полное состояние страницы (включая состояние JS, DOM). Это позволяет повторно загружать страницу быстрее и точно в том виде, в котором ее покинул пользователь.

Событие load не должно срабатывать, когда страница загружается из этого bfcache.Например, если вы создали свой пользовательский интерфейс в обработчике "load", и событие "load" было запущено один раз при начальной загрузке и второй раз, когда страница была повторно загружена из bfcache, страница будет иметь повторяющиеся элементы пользовательского интерфейса.

Это также причина того, почему добавление обработчика "unload" останавливает сохранение страницы в bfcache (что замедляет возврат к ней) - обработчик выгрузки может выполнять задачи по очистке, которые могут оставить страницу в неработоспособное состояние.

Для страниц, которым необходимо знать, когда они уходят / возвращаются, Firefox 1.5+ и версия Safari с исправлением ошибки 28758 поддерживают специальные события, называемые "pageshow" и "pagehide ".

Ссылки:

74
ответ дан 23 November 2019 в 20:16
поделиться

Я столкнулся с проблема в том, что мой js не выполнялся, когда пользователь нажимал назад или вперед. Сначала я решил остановить кеширование браузера, но, похоже, это не было проблемой. Мой javascript был настроен на выполнение после загрузки всех библиотек и т. Д. Я проверил это с помощью события readyStateChange.

После некоторого тестирования я обнаружил, что состояние готовности элемента на странице, на которую был сделан щелчок, не «загружено», а «выполнено». Добавление || element.readyState == 'complete' к моему условному выражению решило мои проблемы.

Просто подумал, что поделюсь своими выводами, надеюсь, они помогут кому-то другому.

Редактировать для полноты

Мой код выглядел следующим образом:

script.onreadystatechange(function(){ 
   if(script.readyState == 'loaded' || script.readyState == 'complete') {
      // call code to execute here.
   } 
});

В приведенном выше примере кода переменная сценария представляла собой вновь созданный элемент сценария, который был добавлен в DOM.

31
ответ дан 23 November 2019 в 20:16
поделиться

Я попробовал решение от Билла, используя $ (document) .ready ... но сначала это не сработало. Я обнаружил, что если сценарий поместить после раздела html, он не будет работать. Если это головная секция, она будет работать, но только в IE. Скрипт не работает в Firefox.

2
ответ дан 23 November 2019 в 20:16
поделиться
Другие вопросы по тегам:

Похожие вопросы: