186

Я хочу перевірити, коли хтось намагається оновити сторінку.

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

javascript page-refresh

— Ахмед
джерело

1

Не реально неможливо без коду сторони сервера. Для чого це потрібно? Можливо, якщо ви дадете більшу картину, ми можемо запропонувати кращу альтернативу.

— Shadow Wizard - це вухо для вас

Можливо, ви могли б зробити таке, як із файлом cookie ... як зберігання часу та перезавантаження порівняйте різницю в часі.

— Фелікс Клінг

Я хочу зробити так, щоб посилання на facebook було #! / Всичко, що я хочу видалити #! коли лише перезавантажується сторінка

— Ахмед

1

@Ahmed Я намагаюся зробити те саме. Чи працювало для вас якесь із наведених нижче рішень?

— Пол Фіцджеральд

3

⚠️⚠️⚠️ window.performance.navigation.typeзастаріло, будь ласка, дивіться мою відповідь .

— Илья Зеленько

221

⚠️⚠️⚠️ window.performance.navigation.typeзастаріло, будь ласка, дивіться відповідь Ілья Зеленько

Кращий спосіб дізнатися, що сторінка насправді перезавантажується - це використовувати об’єкт навігатора, який підтримується більшістю сучасних браузерів.

Він використовує 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

— Рахул Джайн
джерело

1

спасибі приятелю, це точне рішення виявити, що сторінка перезавантажується правою кнопкою миші / оновлення браузера або перезавантажена URL-адресою.

— Roque Mejos

4

Будьте в курсі. Хром нещодавно змінив таку поведінку. Коли користувач натискає поточний адресний рядок і натискає клавішу Enter, значення performance.navigation.type буде 1, яке має бути 0. Я перевірив у версії 56. Не знаю, чому.

— Jackwin tung

1

Вони працюють так, як очікувалося, будь-яка взаємодія зі сторінкою, яка примушує новий стан навігації до тієї ж сторінки, вважається оновленням. Отже, залежно від вашого коду, це надзвичайно корисно, або реєструватися щоразу, коли сторінка оновлюється, перезавантажується або будь-яка взаємодія ajax. Я можу надати цьому багато можливостей для функціональності та аналітики.

— raphie

27

performance.navigation.type == performance.navigation.TYPE_RELOADлегше читати замість == 1. Також якщо ви перевірите, performance.navigationви виявите, що існують 4 різні типи навігації, наприклад TYPE_BACK_FORWARD,TYPE_NAVIGATE

— Віталій Корнієнко

5

⚠️⚠️⚠️ window.performance.navigation.typeзастаріло, будь ласка, дивіться мою відповідь .

— Илья Зеленько

37

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

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

Другий крок - встановити sessionStorageдеяке значення (наприклад true):

sessionStorage.setItem("is_reloaded", true);

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

— DitherSky
джерело

28

Дві речі, які слід пам’ятати: 1). Ви можете зберігати рядкові значення лише в сеансі та локальному сховищі. Тому trueперетворюється на "true". 2). Зберігання сеансу зберігається, поки користувач не закриє вікно веб-переглядача, тож ви не зможете визначити різницю між перезавантаженням сторінки та навігацією від та назад до вашого веб-сайту в межах одного сеансу браузера.

— Гектор

35

Новий стандарт на 2018 рік (PerformanceNavigationTiming)

window.performance.navigationвластивість застаріло в специфікації рівня навігації . Будь ласка, використовуйте PerformanceNavigationTimingзамість цього інтерфейс.

PerformanceNavigationTiming.type

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

Ретельно перевірте таблицю сумісності браузера, перш ніж використовувати це у виробництві.

Підтримка 2019-07-08

Властивість лише для читання типу повертає рядок, що представляє тип навігації. Значення повинно бути одним із наступних:

навігація - Навігація починається з натискання на посилання, введення URL-адреси в адресному рядку браузера, подання форми або ініціалізація за допомогою операції скрипту, відмінної від перезавантаження та назад_наперед, як зазначено нижче.
reload - Навігація здійснюється через перезавантаження браузера або location.reload().
back_forward - Навігація здійснюється через операцію обходу історії браузера.
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

+1 за вказівку на застарілий API, але -100 для Apple за їх відсутності підтримки в iOS ще в 2020 році

— kinakuta

14

Зберігайте файл 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()">

— технофобар
джерело

9

Що щодо повернення користувачів?

— Червоний Таз

5

Як @ Rob2211 каже, це перевіряє, чи сторінку відвідано, і може дати помилковий позитив, якщо сторінка переглядається, коли файл cookie ще живий. Не використовуйте це для перевірки оновлення.

— Браннон

@Brannon - Файл cookie створений без будь-якого значення закінчення, і він буде знищений, коли браузер закритий.

— techfoobar

1

@techfoobar приємний улов. Чи це все ще не складе проблеми, якщо користувач перегляне сайт перед тим, як печиво знищить?

— Браннон

3

@Brannon - Так, якщо браузер залишити відкритим і користувач повторно відвідує через деякий час, це не буде розглядатися як новий візит.

— techfoobar

7

якщо

event.currentTarget.performance.navigation.type

повертає

0 => користувач щойно набрав URL-адресу
1 => перезавантажена сторінка
2 => натиснута кнопка "назад".

— nPcomp
джерело

У мене ця помилка, ви можете пояснити її більше? Uncaught TypeError: Не вдається прочитати властивість "currentTarget" для невизначеного

— Janatbek Sharsheyev

2 => TYPE_BACK_FORWARD Доступ до сторінки здійснюється шляхом навігації в історію. developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

— Tiago Freitas Leal

performance.navigation.typeзастаріла, будь ласка, дивіться мою відповідь .

— Илья Зеленько

6

Тут я знайшов деяку інформацію Оновлення сторінки Javascript виявлення 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>

Розгорніть фрагмент

— VoronoiPotato
джерело

Ми також можемо перевірити Refererвластивості та змінити відповідь сервера на основі цього ресурсу

— Adeel

Бічна примітка: перший метод, зазначений на цій сторінці, не вдасться, оскільки код виконується до розбору DOM. Переміщення <script>елемента до низу спрацювало б - але це все ще не є гарантованим рішенням (і це не є методом cookie).

— Енді Е

1

@Adeel: перевірка Refererтакож не є надійною; багато проксі та розширення браузера позбавляють його від запитів.

— Енді Е

@VoronoiPotato Будь ласка, спробуйте узагальнити інформацію, а не публікувати посилання.

— Даллін

1

Для мене вона завжди виконує умову "if" і ніколи не виконує "else" частину, не має значення, чи я завантажував сторінку, чи оновлював сторінку.

— Parth Vora

6

Я написав цю функцію, щоб перевірити обидва методи, використовуючи старі 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 і Forward).

3: попередня діяльність на зразок<link rel="prerender" href="https://stackoverflow.com//example.com/next-page.html">

4: будь-який інший метод.

— Алі Шейхпур
джерело

1

Тут я знайшов деяку інформацію Оновлення сторінки Javascript виявлення JavaScript

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

window.onbeforeunload = UnLoadWindow;

— Manpreet
джерело

3

де "тут"? ти забув посилання?

— ᴄʀᴏᴢᴇᴛ

0

if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}

— Алексіс Гатуінгт
джерело

Перевірте, чи перезавантажується або оновлюється сторінка в JavaScript

Новий стандарт на 2018 рік (PerformanceNavigationTiming)

PerformanceNavigationTiming.type

Підтримка 2019-07-08

Наступний приклад ілюструє використання цього ресурсу.