186

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

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

javascript page-refresh Ahmed
источник

1

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

Shadow Wizard - это ухо для тебя

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

Феликс Клинг

Я хочу сделать такие, как facebook ссылка будет #! / Все, что я хочу удалить #! только при перезагрузке страницы

Ахмед

1

@ Ахмед, я пытаюсь сделать то же самое. Работало ли какое-либо из приведенных ниже решений для вас?

Пол Фицджеральд

3

Dep window.performance.navigation.typeустарела, пожалуйста , смотрите мой ответ .

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

221

Dep window.performance.navigation.typeустарела, пожалуйста, смотрите ответ Илья Зеленько

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

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

//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
console.info(performance.navigation.type);
if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
  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.

Рок Мехос

4

Имейте в виду. Chrome недавно изменил это поведение. Когда пользователь щелкает текущую адресную строку и нажимает клавишу ввода, значение performance.navigation.type будет равно 1, что должно быть 0. Я протестировал в версии 56. Не знаю, почему.

Джеквин Тунг

1

Они работают так, как и ожидалось, любое взаимодействие со страницей, которое вынуждает новое состояние навигации на той же странице, считается обновлением. Таким образом, в зависимости от вашего кода это чрезвычайно полезно, либо регистрироваться каждый раз, когда страница обновляется, перезагружается, либо при любом взаимодействии с ajax. Я могу дать этому много возможностей для функциональности и аналитики.

рафи

27

performance.navigation.type == performance.navigation.TYPE_RELOADлегче читать вместо == 1. Кроме того, если вы проверите, performance.navigationвы обнаружите, что есть 4 различных типа навигации, как TYPE_BACK_FORWARD,TYPE_NAVIGATE

Виталий Корниенко

5

Dep 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свойство устарело в спецификации Navigation Timing Level 2 . Пожалуйста, используйте PerformanceNavigationTimingинтерфейс вместо.

PerformanceNavigationTiming.type

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

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

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

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

навигация - навигация запускается нажатием ссылки, вводом 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

+1 за указание на устаревший API, но -100 для Apple за отсутствие поддержки iOS до 2020 года

кинакута

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()">

techfoobar
источник

9

Как насчет возвращения пользователей?

Красный Таз

5

Как @ Rob2211 говорит, что это только проверяет, была ли страница посещена, и может давать ложное срабатывание, пока страница повторно посещается, когда cookie еще жив. Не используйте это для проверки обновления.

Брэннон

@Brannon - файл cookie создается без значения срока действия и будет уничтожен при закрытии браузера.

techfoobar

1

@techfoobar хороший улов. Не будет ли это по-прежнему представлять проблему, если пользователь повторно посетит сайт до того, как этот файл cookie будет уничтожен?

Брэннон

3

@Brannon - Да, если браузер оставлен открытым и пользователь повторно посещает его через некоторое время, это не будет считаться новым посещением.

techfoobar

7

если

event.currentTarget.performance.navigation.type

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

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

nPcomp
источник

Я получил эту ошибку, вы можете объяснить это больше? Uncaught TypeError: Невозможно прочитать свойство 'currentTarget' из неопределенного

Жанатбек Шаршеев

2 => TYPE_BACK_FORWARD Доступ к странице осуществлялся путем перехода в историю. developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

Тиаго Фрейтас Лил

performance.navigation.typeустарела, пожалуйста, смотрите мой ответ .

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

6

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

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

Энди Э

@VoronoiPotato Пожалуйста, попробуйте обобщить информацию, а не только разместить ссылку.

Даллин

1

Для меня это всегда выполняется условие «если» и никогда не выполняется часть «еще», не имеет значения, загружал ли я страницу или обновлял страницу.

Парф Вора

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: Работа с историей браузера (Бакк и Форвард).

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

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

Али Шейхпур
источник

1

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

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

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

Ответы:

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

PerformanceNavigationTiming.type

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

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

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