Popular science:
1. The main application scenarios of load, unload, beforeunload and pagehide and pageshow
1) Generally used for the monitoring of operations such as the first load, refresh, close, forward and backward of the page, and hyperlinks;
2) Execution sequence: load——pageshow——pagehide——unload
3) Generally, mobile browsers will Store the currently visited page in the cache. The cache saves the page data, DOM and js state. When forward and backward operations, the page content is directly read from the browser cache without page refresh, so the forward and backward are monitored. The pageshow event is available during operation.
4) Determine whether the round-trip cache is used, e.persisted, true is read
5) The following two writing methods are the same
window.onpagehide=()=>{
}
window.addEventListener('pagehide', ()=> {
})
Second, the actual scene
-
1. After clicking the hyperlink and so on, the page does not refresh when it comes back.
Pageshow can be solved, but the pageshow is also triggered when the load is mentioned earlier. We can assign false to a variable when loading, and when clicking the hyperlink to leave the page pagehide, it becomes true. When returning, pageshow judges this variable, and when it is true, it calls back to refresh window.location.reload()
-
2. Pop-up reminder + send request before the page is closed
window.onbeforeunload = () => {
this.axios.get('/test')
return 'return会出现弹窗，随便写不影响页面的'
}
坑：
addEventListener(beforeunload) 写法的时候，return居然不起作用（不出弹窗）
- 3. The IOS (H5) page does not refresh after returning
Click on H5 on the ios WeChat, there is a left and right forward and backward buttons at the bottom, but Android does not. It is the left and right advance and retreat in the upper left corner of the browser. If you click h5 on WeChat, click the a tag, and then click Back, the page does not refresh. In fact, the browser reads the cache without refreshing the page (the cache stores your entire page), but! But! Everything is normal on the browser, I hope God can answer it.
Processing:
listen to the pageshow event, and when triggered, window.location.reload() will refresh the page.