it-swarm-ru.tech

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

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

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

138
Ahmed

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

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

179
Rahul Jain

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

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

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

sessionStorage.setItem("is_reloaded", true);

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

39
DitherSky

Сохраните файл 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()">
16
techfoobar

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

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

PerformanceNavigationTiming.type

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

Внимательно проверьте Таблица совместимости браузера , прежде чем использовать это в работе.

Поддержка на 14.11.2018:

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

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

Я нашел некоторую информацию здесь Обновление страницы обнаружения 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>
7
VoronoiPotato

если

event.currentTarget.performance.navigation.type

возвращается

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

6
nPcomp

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

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

window.onbeforeunload = UnLoadWindow;
2
Manpreet

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

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

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

1: Нажатие на кнопку "Перезагрузить" или использование Location.reload()

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

: перед рендерингом, например, <link rel="prerender" href="//example.com/next-page.html">

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

1
Ali Sheikhpour