Реагировать | Как определить обновление страницы (F5)
Я использую Реагировать на js. Мне нужно обнаружить page refresh. Когда пользователь нажимает значок обновления или нажимает F5, мне нужно узнать событие.
Я пробовал с сообщение stackoverflow, используя функции javascript
Я использовал функцию javascript beforeunload, все равно не повезло.
onUnload(event) {
alert('page Refreshed')
}
componentDidMount() {
window.addEventListener("beforeunload", this.onUnload)
}
componentWillUnmount() {
window.removeEventListener("beforeunload", this.onUnload)
}
вот у меня полный код на stackblitz
Может быть два сценария: нажмите кнопку обновления браузера и нажмите F5.
Ваш код отлично работает
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Кажется, ваш код работает нормально, ваше предупреждение не будет работать, потому что вы не останавливаете обновление. Если у вас console.info('hello'), вывод будет показан.
ОБНОВИТЬ ---
Это должно остановить обновление пользователя, но это зависит от того, что вы хотите.
componentDidMount() {
window.onbeforeunload = function() {
this.onUnload();
return "";
}.bind(this);
}
Могу ли я вызвать любую функцию в этой функции onUnload? becoz пробовал вроде не работает.
Вам нужно предложить пользователю что-нибудь, что остановит обновление. Какую функцию вы пытаетесь разместить внутри onUnload? Я дополню свой ответ примером.
Только при обновлении страницы я должен вызывать такую функцию, как эта this.props.actions.loaddata()
Спасибо. Я думаю, он был вызван перед загрузкой страницы. Мне нужно после того, как пользователь обновит страницу
Кажется, у Абделлатифа есть лучшее решение, чем у меня.
Поместите это в конструктор:
if (window.performance) {
if (performance.navigation.type == 1) {
alert( "This page is reloaded" );
} else {
alert( "This page is not reloaded");
}
}
Это будет работать, посмотрите этот пример на stackblitz.
Но есть проблема. Он срабатывает даже при смене страницы. не только обновление страницы. Мне нужно только обновить страницу
Просто измените содержание условий
Я использую реактивный маршрутизатор. когда я переключаю меню, срабатывает
Пожалуйста, просмотрите текст предупреждения, если страница обновляется, будет срабатывать предупреждение «Эта страница перезагружена», иначе будет срабатывать другое предупреждение «Эта страница не перезагружена». Таким образом, вы можете использовать только первое условие
@MariaJeysinghAnbu говорит, что он запускает предупреждение об обновлении, даже если маршрут изменился в IE. В IE, даже если пользователь меняет маршрут, его значения равны 1, но в Chrome он работает по-другому
будет ли это работать, если пользователь нажимает кнопку обновления вместо F5?
Как сделать что-то ПОСЛЕ завершения обновления?
К сожалению, принятый в настоящее время ответ не может считаться приемлемым, поскольку performance.navigation.type - устарел
Новейший API для этого - экспериментальный банкомат. В качестве обходного пути я могу предложить только сохранить некоторое значение в хранилище redux (или что-то еще, что вы используете), чтобы указать состояние после перезагрузки, и при первом изменении маршрута обновите его, чтобы указать, что маршрут был изменен не из-за обновления.
Если вы используете REDUX или CONTEXT API, это довольно просто. Вы можете проверить переменные состояния REDUX или CONTEXT. Когда пользователь обновляет страницу, он сбрасывает состояние CONTEXT или REDUX, и вам нужно снова установить их вручную. Поэтому, если они не установлены или равны начальному значению, которое вы указали, вы можете предположить, что страница обновляется.
Первоначально я нашел этот подход полезным, но затем я обнаружил, что он создал для меня ошибку, поэтому теперь я сохраняю строковое свойство с именем currentPage в одном из моих редукторов redux из моего componentDidMount, но проверяю его значение перед его установкой, чтобы предыдущая страница была другой страницей, а не просто перезагрузкой. Время покажет, хороший это подход или нет
Если вы используете React Hook, UseEffect, вы можете внести следующие изменения в свой компонент. Это сработало для меня
useEffect(() => {
window.addEventListener("beforeunload", alertUser);
return () => {
window.removeEventListener("beforeunload", alertUser);
};
}, []);
const alertUser = (e) => {
e.preventDefault();
e.returnValue = "";
};
На самом деле это довольно просто, это будет добавлять предупреждение по умолчанию всякий раз, когда вы перезагружаете свою страницу.
Функциональный компонент
useEffect(() => {
window.onbeforeunload = function() {
return true;
};
return () => {
window.onbeforeunload = null;
};
}, []);
Компонент класса
componentDidMount(){
window.onbeforeunload = function() {
return true;
};
}
componentDidUnmount(){
window.onbeforeunload = null;
}
Вы можете поставить проверку только для добавления предупреждения, если условие - true.
Функциональный компонент
useEffect(() => {
if (condition) {
window.onbeforeunload = function() {
return true;
};
}
return () => {
window.onbeforeunload = null;
};
}, [condition]);
Компонент класса
componentDidMount(){
if (condition) {
window.onbeforeunload = function() {
return true;
};
}
}
componentDidUnmount(){
window.onbeforeunload = null;
}
Как я могу использовать этот код в компоненте класса react.js?
@Mayur Vaghasiya, вы можете использовать функции componentDidMount и componentDidUnmount для компонента класса. Один из моих useEffect предназначен для componentDidMount, а другой из моего возврата useEffect - для componentDidUnmount. Я отредактирую свой ответ позже, когда у меня будет время.
Есть ли способ изменить сообщение в приглашении, которое появляется после перезагрузки?
Почему бы просто не проверить
e.keyCode === 116, который является клавишей F5? Вот пример того, как это сделать: stackoverflow.com/a/34634290/2127769