页面刷新关闭前弹窗、页面关闭前弹窗、IOS(H5)页面返回不刷新

科普:

一、load、unload、beforeunload和pagehide、pageshow的主要应用场景

1)一般用于页面的首次加载、刷新、关闭、前进后退、超链接等操作的监听;
2)执行顺序:load——pageshow——pagehide——unload
3)一般情况下,移动端浏览器会将当前已访问页面存入缓存中,缓存中保存着页面数据,DOM和js的状态,前进和后退操作时直接从浏览器缓存中读取页面内容,而不进行页面刷新,所以监听前进和后退操作时可用pageshow事件。
4) 判断是否用了往返缓存,e.persisted,true就是读取了
5)下面两种写法是相同的

window.onpagehide=()=>{
    
    }
window.addEventListener('pagehide', ()=> {
    
    })

二、实际会到的场景

  • 1、点了超链接等回退后,回来页面不刷新。

    pageshow可以解决,但是前面提到过了load时候也触发pageshow。我们可以load时候赋值false给一个变量,点击超链接离开页面pagehide时候变为true,返回时候pageshow判断这个变量,true时候就回调刷新window.location.reload()

  • 2、页面关闭前弹窗提醒+发送请求

	window.onbeforeunload = () => {
    
    
	      this.axios.get('/test')
	      return 'return会出现弹窗,随便写不影响页面的'
	}
坑:
addEventListener(beforeunload) 写法的时候,return居然不起作用(不出弹窗)
  • 3、IOS(H5)页面返回不刷新

在ios微信上面点开H5,下方是有个左右进退按钮的,安卓没有。其就是浏览器左上角的左右进退。如果在微信上面点开h5,点击a标签后,再点后退,页面不刷新,其实是浏览器读取了缓存,而不进行页面刷新(缓存存了你的整个页面),但是!但是 ! 浏览器上却一切正常,希望大神解答下。
处理:
监听pageshow事件,触发的时候window.location.reload()页面刷新就好了

猜你喜欢

转载自blog.csdn.net/weixin_45629623/article/details/114097802