Перезагрузка страницы в Chrome без необходимости запускает связанные события непосредственно перед перезагрузкой страницы - PullRequest
Новая
       30

Перезагрузка страницы в Chrome без необходимости запускает связанные события непосредственно перед перезагрузкой страницы

22 голосов
/ 26 августа 2011

Надеюсь, у кого-то есть хороший ответ на этот вопрос:

Почему Chrome (14.0) вызывает события готовности документа и загрузки окна, когда я обновляю страницу?Обратите внимание, что я не говорю о том, что происходит при загрузке новой страницы, но до ее загрузки.См. Следующий код: 

<form name="form1" method="post" action="tmp.aspx?a=1" id="form1">
<script type="text/javascript">

    $(document).ready(function () { console.log('document/ready' + new Date()); });

    $(window).load(function () { console.log('window/load' + new Date()); });

</script>

<a href="tmp.aspx?a=1">tmp</a>
</form>

При первом посещении страницы я получаю два вывода на консоль, один для документа / готов и один для окна / загрузки.Когда я обновляю страницу, быстро выводятся еще две, а сразу после этого еще две (из нового просмотра страницы).Если я вместо этого просто нажму на ссылку (tmp.aspx), которая ведет прямо на ту же страницу, этого не произойдет.

Я уверен, что этому есть хорошее объяснение.

С уважением!

EDIT: дополнительные вызовы $ (document) .ready () и $ (window) .load () выполняются ДО обновления страницы.Поэтому, когда я впервые загружаю страницу, они вызывают методы один раз, затем я нажимаю кнопку Обновить и ПЕРЕД тем, как страница перезагрузится, методы вызываются снова.После этого, когда страница только что была перезагружена, методы называются ТРЕТЬИМ временем.

Ответы [ 6 ]

7 голосов
/ 22 октября 2011

Поведение наблюдается 14.0.835.202.edit: (на Windows Seven x64)

Это не ошибка jquery: DOMContentLoaded запускается в другой раз перед выгрузкой страницы.

Простой тест для проверки: 

 function startpage() {   
     console.log('page loaded');
   }   

   function unloadPage(){
       console.log("page unloaded");
   }
document.addEventListener("DOMContentLoaded", startpage, false);
window.onbeforeunload = unloadPage;

Вы должны увидеть после обновления: 

page loaded
page loaded // should not be here and is not on Firefox.
page unloaded
loaded

В вашей консоли (с постоянным включением)

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

Редактировать: та же версия Chrome, но работающая с OSX, выглядит нормально (см. Комментарий ниже).Это имеет тенденцию подтверждать, что это ошибка.

3 голосов
/ 26 октября 2011

Просто добавьте некоторые заметки о тестировании, используя chrome 15.0.874.102 и Windows 7 x86:

Это скрипт, который я использовал для тестирования, исходя из моего понимания вопроса: 

<html>
    <head>
        <script language="javascript">
            var r = Math.floor(Math.random() * 101);

            function reloadLink() {
                console.log('----Reload Link----');
            }

            function startpage() {
                console.log('---Loaded. ID: ' + r + ' Time: '+new Date());
            }

            function unloadPage() {
                console.log('Un-loaded. ID: ' + r + ' Time: '+new Date());
            }

            document.addEventListener("DOMContentLoaded", startpage, false);
            window.onbeforeunload = unloadPage;

        </script>
        <title>Testing Chrome</title>
    </head>
    <body>
        <a href="" onclick="reloadLink();">Reload Page</a>
    </body>
</html>

Ниже приводится накопительный журнал, каждое новое дополнение выделено жирным шрифтом:

При начальной загрузке страницы я получаю:

--- Загружен,ID: 68 Время: вторник, 25 октября 2011 г. 21:35:18 GMT + 0100 (время летнего времени по Гринвичу)

Нажатие клавиши F5 при фокусировке на HTML-странице:

--- Loaded.ID: 68 Время: вторник, 25 октября 2011 г. 21:35:18 GMT + 0100 (по летнему времени GMT) --- Loaded.ID: 68 Время: вт 25 окт. 2011 21:35:18 GMT + 0100 (по Гринвичу, летнее время) <-----Un-загружен.ID: 68 Время: вт 25 окт. 2011 21:36:12 GMT + 0100 (по Гринвичу, летнее время)--- Loaded.ID: 78 Время: вторник, 25 октября 2011 г. 21:36:12 GMT + 0100 (по летнему времени GMT) </b>

Нажатие на ссылку на странице HTML для перезагрузки страницы:

--- Загружен.ID: 68 Время: вторник, 25 октября 2011 21:35:18 GMT + 0100 (по Гринвичу, летнее время)--- Loaded.ID: 68 Время: вторник, 25 октября 2011 21:35:18 GMT + 0100 (по Гринвичу, летнее время)Un-загружен.ID: 68 Время: вт 25 окт. 2011 21:36:12 GMT + 0100 (по Гринвичу, летнее время)--- Loaded.ID: 78 Время: вторник, 25 октября 2011 г. 21:36:12 GMT + 0100 (по летнему времени GMT) ---- Перезагрузить ссылку ----Un-загружен.ID: 78 Время: вторник, 25 октября 2011 21:38:25 GMT + 0100 (по Гринвичу, летнее время)--- Loaded.ID: 22 Время: вторник, 25 октября 2011 г. 21:38:25 GMT + 0100 (летнее время по Гринвичу)

Нажатие клавиши F5 при фокусировке на консоли:

--- Loaded.ID: 68 Время: вторник, 25 октября 2011 21:35:18 GMT + 0100 (по Гринвичу, летнее время)--- Loaded.ID: 68 Время: вторник, 25 октября 2011 21:35:18 GMT + 0100 (по Гринвичу, летнее время)Un-загружен.ID: 68 Время: вт 25 окт. 2011 21:36:12 GMT + 0100 (по Гринвичу, летнее время)--- Loaded.ID: 78 Время: вторник, 25 октября 2011 21:36:12 GMT + 0100 (по Гринвичу, летнее время)---- Перезагрузить ссылку ----Un-загружен.ID: 78 Время: вторник, 25 октября 2011 21:38:25 GMT + 0100 (по Гринвичу, летнее время)--- Loaded.ID: 22 Время: Вторник, 25 октября 2011 г. 21:38:25 GMT + 0100 (время летнего времени по Гринвичу) Un-загружен.ID: 22 Время: Вт 25 Окт 2011 21:41:53 GMT + 0100 (Время Гринвичского Гринвичского времени)--- Loaded.ID: 15 Время: вторник, 25 октября 2011 г. 21:41:54 GMT + 0100 (GMT Daylight Time)

Как вы можете видеть, аномалия возникает только при прямой перезагрузке страницы (у меня естьвыделил аномалию стрелкой) , сосредоточившись на самой странице.Кроме того, если вы заметили и идентификатор, и временную метку аномалии, они одинаковы даже после ожидания в течение нескольких секунд перед нажатием клавиши F5 - так что, похоже, код не выполняется во второй раз, так сказать, но консоль регистрируетскопировать по какой-либо причине.

Добавляя далее к выводу:

Если вы выберете вкладку временной шкалы и запишете как начальную загрузку страницы, так и перезагрузку F5, вы заметитедве функции для записи в консоль запускаются только один раз, дальнейшее объединение выглядит как возможная ошибка на консоли chromes:

Screenshot Показать изображение - Временная шкала 1 (начальная загрузка) Screenshot Показать изображение - Временная шкала 2 (перезагрузка F5)

3 голосов
/ 28 августа 2011

В Chrome 13 для Mac я не вижу такого поведения.После того, как вы загрузите страницу в первый раз, и до того, как вы нажмете «Обновить», вы очищаете консоль?Есть ли вероятность, что вы видите старую консольную информацию (я знаю, что некоторые браузеры предпочитают сохранять консольную информацию предыдущей страницы)?

Я бы не ожидал, что эти два события будут запущены дважды при обновлении, поэтому мойдумаю, это устаревшая консоль, либо по замыслу, потому что это было ручное обновление, либо, возможно, в Chrome 14 есть ошибки с консолью разработчика.

2 голосов
/ 26 октября 2011

Похоже, ошибка консоли разработчика chrome / webkit.Используя Chrome 14 в Ubuntu, я могу воспроизвести ошибку, выполнив следующие шаги.

Сначала создайте страницу, содержащую следующий код js 

var timesLoaded = 0;

function loadHandler() {
    console.log(timesLoaded, "times loaded");
    timesLoaded++;
}   

function unloadHandler(){
    console.log("unload after ", timesLoaded, " loads");
}

$(document).ready(loadHandler);
$(window).unload(unloadHandler);
  1. Откройте страницу с помощью Google Chrome
  2. Нажмите F12, чтобы открыть консоль и увидеть сообщение «0 раз загружено»
  3. Добавить точку останова в первой строке функции unloadHandler
  4. Чтобы увидеть двойнуюпоявляется сообщение , вам нужно щелкнуть где-нибудь на странице (например, выделить фокус из консоли и на загруженную страницу)
  5. Обновить страницу
  6. Вы, вероятно, увидите 0 "загруженный раз"сообщение снова

Важно то, что ваш код не выполняется дважды.Просто по какой-то причине консоль разработчика webkit снова показывает то же сообщение.Для дальнейшего изучения ошибки вы можете сделать следующее:

  1. Загрузить предыдущую html-страницу
  2. Снова добавить точку останова выгрузки (просто чтобы убедиться, что страница фактически не обновляется)
  3. Щелкните правой кнопкой мыши на первой записи консоли (0 "раз загружено")
  4. Нажмите элемент проверки (да, консоль - просто приложение html / js)
  5. Найдите элемент, к которому принадлежит запись (это должен быть элемент div.console-group-message
  6. Щелкните правой кнопкой мыши на элементе и нажмите Разбить модификации поддерева
  7. Обновите страницу (снова после нажатия где-нибудь на html-странице до расфокусировать консольное окно
  8. Непосредственно перед тем, как появится второе раздражающее сообщение, отладчик покажет код консоликоторый пытается добавить сообщение.
2 голосов
/ 21 октября 2011

Я проверил это на Chromium 14 на Windows. Поведение не наблюдается.

2 голосов
/ 27 августа 2011

Насколько я знаю, нажатие на ссылку #xxx (или ссылку на ту же страницу, с #xxx или без нее) не вызывает события window.load и document.ready.

Если вы хотите, чтобы ссылка вызывала событие, сделайте что-то вроде 

$('a#xxx').click(function(){
    //Your code here
}

где xxx - идентификатор ссылки.

Если ссылка предназначена для перезагрузки страницы, используйте 

window.location.reload()

в обработчике события click.

...