Javascript reload page on event

Обновить страницу с помощью JS / HTML / PHP

JS -метод location.reload() перезагружает текущую вкладку браузера и действует также как кнопка «Обновить страницу».

Пример перезагрузки страницы кликом на ссылку или кнопку:

Цикличное обновление страницы с задержкой

В коде используется тот же location.reload() выполняемый с задержкой setTimeout() в тридцать секунд.

Перезагрузка страницы с задержкой

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

 Обновить страницу через 2 секунды  

Пример:

Перезагрузка страницы с подтверждением

Чтобы пользователь мог подтвердить действие, можно применить метод вызова диалогового сообщения confirm.

if (confirm('Вы действительно хотите обновить страницу?'))

Пример:

Обновление родительской страницы из IFrame

Для обращения к ресурсам родительской страницы из IFrame используется объект parent , подробнее в статье «Как обновить iframe».

Перезагрузка страницы с помощью HTML

Добавление мета-тега в страницы заставит её перезагрузится. Значение атрибута content больше нуля задает задержку в секундах.

Перезагрузка страницы из PHP

Обновить страницу прямо с сервера можно c помощью функции header() , отправив заголовок « Refresh: 5 », где значение «5» указывает интервал в пять секунд.

Важно, чтобы перед вызовом функции не было отправки контента в браузер, например echo .

Источник

Refresh the Page in JavaScript – JS Reload Window Tutorial

Joel Olawanle

When you’re developing applications like a blog or a page where the data may change based on user actions, you’ll want that page to refresh frequently.

When the page refreshes or reloads, it will show any new data based off those user interactions. Good news – you can implement this type of functionality in JavaScript with a single line of code.

In this article, we will learn how to reload a webpage in JavaScript, as well as see some other situations where we might want to implement these reloads and how to do so.

Here’s an Interactive Scrim about How to Refesh the Page in JavaScript

How to Refresh a Page in JavaScript With location.reload()

You can use the location.reload() JavaScript method to reload the current URL. This method functions similarly to the browser’s Refresh button.

The reload() method is the main method responsible for page reloading. On the other hand, location is an interface that represents the actual location (URL) of the object it is linked to – in this case the URL of the page we want to reload. It can be accessed via either document.location or window.location .

The following is the syntax for reloading a page:

Note: When you read through some resources on “page reload in JavaScript”, you’ll come across various explanations stating that the relaod method takes in boolean values as parameters and that the location.reload(true) helps force-reload so as to bypass its cache. But this isn’t the case.

According to the MDN Documentation, a boolean parameter is not part of the current specification for location.reload() — and in fact has never been part of any specification for location.reload() ever published.

Browsers such as Firefox, on the other hand, support the use of a non-standard boolean parameter known as forceGet for location.reload() , which instructs Firefox to bypass its cache and force-reload the current document.

Aside from Firefox, any parameters you specify in a location.reload() call in other browsers will be ignored and have no effect.

How to Perform Page Reload/Refresh in JavaScript When a Button is Clicked

So far we have seen how reload works in JavaScript. Now let’s now see how you can implement this could when an event occurs or when an action like a button click occurs:

Note: This works similarly to when we use document.location.reload() .

How to Refresh/Reload a Page Automatically in JavaScript

We can also allow a page refersh after a fixed time use the setTimeOut() method as seen below:

Using the code above our web page will reload every 3 seconds.

So far, we’ve seen how to use the reload method in our HTML file when we attach it to specific events, as well as in our JavaScript file.

How to Refresh/Reload a Page Using the History Function in JavaScript

The History function is another method for refreshing a page. The history function is used as usual to navigate back or forward by passing in either a positive or negative value.

For example, if we want to go back in time, we will use:

This will load the page and take us to the previous page we navigated to. But if we only want to refresh the current page, we can do so by not passing any parameters or by passing 0 (a neutral value):

Note: This also works the same way as we added the reload() method to the setTimeOut() method and the click event in HTML.

Wrapping Up

In this article, we learned how to refresh a page using JavaScript. We also clarified a common misconception that leads to people passing boolean parameters into the reload() method.

Embark on a journey of learning! Browse 200+ expert articles on web development. Check out my blog for more captivating content from me.

Источник

Detect Page Refresh, Tab Close and Route Change with React Router v5

Imagine accidentally closing the browser tab after filling a mandatory and boring survey form. All your responses are lost now. Frustrating, isn’t it? You would not want to give such an experience to your users, here’s how you can fix it.

Problem:

1. Reload the page.
2. Close the browser tab or window.
3. Press the browser back button.
4. Click a link/change the route.

Solution:

Part 1. Detecting Page Reload and Browser Tab Close

A tab/window close or a page reload event mean that the current document and its resources would be removed (unloaded). In this case, beforeunload event is fired.

At the point at which the beforeunload event is triggered, the document is still visible and the event is cancellable, meaning the unload event can be prevented as if it never happened.

This event enables a web page to trigger a confirmation dialog asking the user if they really want to leave the page. If the user confirms, the browser navigates to the new page, otherwise, it cancels the navigation.

Preventing beforeunload event

window.onbeforeunload = (event) =>  const e = event || window.event; // Cancel the event e.preventDefault(); if (e)  e.returnValue = ''; // Legacy method for cross browser support > return ''; // Legacy method for cross browser support >; 

All the 3 methods above e.preventDefault() , e.returnValue = » and return » prevent the event from executing.

Example of the confirm box displayed:

Note: Unfortunately, a customized message is not supported in all the browsers

Show the prompt based on state

#1 Create a function with a React state showExitPrompt as a parameter and initialize the onbeforeunload listener inside the function. Use the state inside the event listener.

Why pass the React state as a parameter?
Because the onbeforeunload is a vanilla javascript event listener and any React state change will not update the state inside its callback.

import  useState > from 'react'; const initBeforeUnLoad = (showExitPrompt) =>  window.onbeforeunload = (event) =>  // Show prompt based on state if (showExitPrompt)  const e = event || window.event; e.preventDefault(); if (e)  e.returnValue = '' > return ''; > >; >; 

#2 Create the state showExitPrompt to manage the prompt and register the event listener on page load.

function MyComponent()  const [showExitPrompt, setShowExitPrompt] = useState(false); // Initialize the beforeunload event listener after the resources are loaded window.onload = function()  initBeforeUnLoad(showExitPrompt); >; > 

#3 Reinitialize the event listener on state change.

import  useState, useEffect > from 'react'; const initBeforeUnLoad = (showExitPrompt) =>  // … code > function MyComponent()  const [showExitPrompt, setShowExitPrompt] = useState(false); window.onload = function()  initBeforeUnLoad(showExitPrompt); >; // Re-Initialize the onbeforeunload event listener useEffect(() =>  initBeforeUnLoad(showExitPrompt); >, [showExitPrompt]); > 

Now you are ready to use it inside your component. BUT it is efficient to create a custom hook for setting and accessing the state anywhere in the application.

Use a Custom Hook

#1 Hook file useExitPrompt.js

import  useState, useEffect > from 'react'; const initBeforeUnLoad = (showExitPrompt) =>  window.onbeforeunload = (event) =>  if (showExitPrompt)  const e = event || window.event; e.preventDefault(); if (e)  e.returnValue = ''; > return ''; > >; >; // Hook export default function useExitPrompt(bool)  const [showExitPrompt, setShowExitPrompt] = useState(bool); window.onload = function()  initBeforeUnLoad(showExitPrompt); >; useEffect(() =>  initBeforeUnLoad(showExitPrompt); >, [showExitPrompt]); return [showExitPrompt, setShowExitPrompt]; > 

#2 Component file MyComponent.js
Note: You will have to reset the value of showExitPrompt state to default when the component is unmounted.

import useExitPrompt from './useExitPrompt.js' export default function MyComponent()  const [showExitPrompt, setShowExitPrompt] = useExitPrompt(false); const handleClick = (e) =>  e.preventDefault(); setShowExitPrompt(!showExitPrompt) > //NOTE: this similar to componentWillUnmount() useEffect(() =>  return () =>  setShowExitPrompt(false) > >, []) return ( div className="App"> form>/*Your code*/>form> button onClick=handleClick>>Show/Hide the promptbutton> Child setShowExitPrompt=setShowExitPrompt> /> div> ); > 

#2 Component file App.js
Pass it down to your child components via Context.Provider and access the value using the useContext() hook anywhere in your application.

import useExitPrompt from './useExitPrompt.js' import MyContext from './MyContext.js' export default function App()  const [showExitPrompt, setShowExitPrompt] = useExitPrompt(false); return ( div className="App"> MyContext.Provider value=showExitPrompt, setShowExitPrompt>>> MyMainApp /> MyContext.Provider> div> ); > export default function MyComponent()  const  showExitPrompt, setShowExitPrompt > = useContext(MyContext); //NOTE: this works similar to componentWillUnmount() useEffect(() =>  return () =>  setShowExitPrompt(false); > >, []) return ( div>/* your code */>div> ); > 

Part 2. Detecting Route/Page change and Browser Back

Similar to the above-mentioned actions, when the user clicks on a link, they are redirected to a new page, and the document and its resources will be unloaded.

But, React Router works differently, it implements the History API which provides access to the browser’s session history. By clicking a regular link — you’ll end up on the new URL and a new document(page), meanwhile history lets you «fake» the URL without leaving the page.

location.pathname vs history.pushState()

window.location.pathname = '/dummy-page' 

Источник