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

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

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

Ответ 1

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

Он использует 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");
  }

Ответ 2

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

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

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

sessionStorage.setItem("is_reloaded", true);

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

Ответ 3

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

window.performance.navigation устарело в спецификации 2-го уровня навигации. Пожалуйста, используйте интерфейс PerformanceNavigationTiming.

PerformanceNavigationTiming.type

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

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

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

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

навигация - навигация запускается нажатием ссылки, вводом URL-адреса в адресной строке браузера, отправкой формы или инициализацией с помощью операции сценария, отличной от reload и back_forward, как указано ниже.
перезагрузка - навигация осуществляется с помощью операции перезагрузки браузера или 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);
  }
}

Ответ 4

Храните файл cookie при первом посещении страницы. При обновлении проверьте, существует ли ваш файл 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()">

Ответ 5

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

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

если

event.currentTarget.performance.navigation.type

возвращает

0 = > пользователь просто набрал URL-адрес
1 = > страница перезагружена
2 = > нажата кнопка "Назад".

Ответ 7

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

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

window.onbeforeunload = UnLoadWindow;

Ответ 8

Я написал эту функцию для проверки обоих методов, используя старый 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: Работа с историей браузера (Бакк и Форвард).

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

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

Ответ 9

Если вы также хотите определить, щелкнуть ли пользователь X в правом верхнем углу браузера:

function handleWindowClose()
{

  if((window.event.clientX<0) || (window.event.clientY<0))

    {

      event.returnValue = "If you have made any changes to the fields without clicking the Save button, your changes will be lost.";
    }
}