Проверьте, перезагружается ли страница или обновляется в Javascript - PullRequest
Новая
       50

Проверьте, перезагружается ли страница или обновляется в Javascript

145 голосов
/ 15 февраля 2011

Я хочу проверить, когда кто-то пытается обновить страницу.

Например, когда я открываю страницу, ничего не происходит, но когда я обновляю страницу, возвращается предупреждение.

Ответы [ 8 ]

188 голосов
/ 06 апреля 2016

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

Используется API синхронизации времени навигации . 

//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
  if (performance.navigation.type == 1) {
    console.info( "This page is reloaded" );
  } else {
    console.info( "This page is not reloaded");
  }

источник: https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

39 голосов
/ 25 июля 2013

Первый шаг - проверить sessionStorage на наличие некоторого предварительно определенного значения и, если оно существует, предупреждение пользователя: 

if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');

Второй шаг - установить sessionStorage на некоторое значение (например, true): 

sessionStorage.setItem("is_reloaded", true);

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

17 голосов
/ 14 ноября 2018

Новый стандарт 2018, 2019 (PerformanceNavigationTiming) * Свойство

window.performance.navigation равно устарело в спецификации Уровень синхронизации 2 .Вместо этого используйте интерфейс PerformanceNavigationTiming.

PerformanceNavigationTiming.type

Это экспериментальная технология .

Перед использованием в работе внимательно проверьте таблицу совместимости браузера .

Поддержка на 2019-07-08

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

  • навигация - навигация запускается нажатием ссылки, вводом URL-адреса в адресной строке браузера, отправкой формы или инициализациейс помощью операции сценария, отличной от перезагрузки и back_forward, как указано ниже.

  • reload - навигация осуществляется с помощью операции перезагрузки браузера или location.reload().

  • back_forward - навигация осуществляется с помощью операции просмотра истории браузера.

  • prerender -Навигация инициируется подсказкой prerender .

Это свойство доступно только для чтения.

Следующий пример иллюстрирует использование этого свойства. 

function print_nav_timing_data() {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");

  for (var i=0; i < perfEntries.length; i++) {
    console.log("= Navigation entry[" + i + "]");
    var p = perfEntries[i];
    // dom Properties
    console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
    console.log("DOM complete = " + p.domComplete);
    console.log("DOM interactive = " + p.interactive);

    // document load and unload time
    console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
    console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));

    // other properties
    console.log("type = " + p.type);
    console.log("redirectCount = " + p.redirectCount);
  }
}
15 голосов
/ 20 декабря 2011

Сохраните куки при первом посещении страницы. При обновлении проверьте, существует ли ваш файл cookie, и если это так, предупредите. 

function checkFirstVisit() {
  if(document.cookie.indexOf('mycookie')==-1) {
    // cookie doesn't exist, create it now
    document.cookie = 'mycookie=1';
  }
  else {
    // not first visit, so alert
    alert('You refreshed!');
  }
}

и в вашем теле тег: 

<body onload="checkFirstVisit()">
7 голосов
/ 15 февраля 2011

Я нашел некоторую информацию здесь Обновление страницы обнаружения Javascript .Его первая рекомендация - использовать скрытые поля, которые обычно сохраняются при обновлении страницы.

function checkRefresh() {
    if (document.refreshForm.visited.value == "") {
        // This is a fresh page load
        document.refreshForm.visited.value = "1";
        // You may want to add code here special for
        // fresh page loads
    } else {
        // This is a page refresh
        // Insert code here representing what to do on
        // a refresh
    }
}
<html>

<body onLoad="JavaScript:checkRefresh();">
    <form name="refreshForm">
        <input type="hidden" name="visited" value="" />
    </form>

</body>

</html>
6 голосов
/ 03 февраля 2017

если 

event.currentTarget.performance.navigation.type

возвращает

0 => Пользователь только что набрал URL-адрес
1 => страница обновлена ​​
2 => нажата кнопка возврата.

2 голосов
/ 01 февраля 2017

Я нашел некоторую информацию здесь Обновление страницы обнаружения Javascript 

function UnLoadWindow() {
    return 'We strongly recommends NOT closing this window yet.'
}

window.onbeforeunload = UnLoadWindow;
1 голос
/ 10 марта 2019

Я написал эту функцию для проверки обоих методов, используя старые window.performance.navigation и новые performance.getEntriesByType("navigation") одновременно: 

function navigationType(){

    var result;
    var p;

    if (window.performance.navigation) {
        result=window.performance.navigation;
        if (result==255){result=4} // 4 is my invention!
    }

    if (window.performance.getEntriesByType("navigation")){
       p=window.performance.getEntriesByType("navigation")[0].type;

       if (p=='navigate'){result=0}
       if (p=='reload'){result=1}
       if (p=='back_forward'){result=2}
       if (p=='prerender'){result=3} //3 is my invention!
    }
    return result;
}

Описание результата:

0: нажатие на ссылку, ввод URL-адреса в адресной строке браузера, отправка формы, нажатие на закладку, инициализация с помощью операции сценария.

1: нажатие на перезагрузкуили с помощью Location.reload()

2: Работа с историей браузера (Bakc and Forward).

3: предварительная обработка, например <link rel="prerender" href="//example.com/next-page.html">

4: любой другой метод.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...