web 杂谈Web前端之路让前端飞

完美解决,手机浏览器端,点击返回后事件无效

2017-08-18  本文已影响79人  高少辉_骚辉

我们都知道,在浏览器端,使用 window.onunload 或者 window.onbeforeunload 无效。所以在手机端,总是做不了关闭确认这个事情。

这边我使用了,window.history 特性,来实现需求

先看代码

function onBeforeUnload () {
    window.history.pushState( null, null, window.location.search )
    window.onpopstate = () => {
      if( xxx ) {
         // 自定义你的弹窗,如果用户再次点击按钮则会直接返回上一个页面了
         
         return
      }
      
      // 如果不需要进行,弹窗,或者其它判断则直接返回上一个页面
      window.history.back()
    }
  }
onBeforeUnload()

代码中,我使用进入页面的时候,我们会使用 window.history api pushState 进行 插入一条本页面的历史记录,然后利用用户点击返回的时候,如果你的历史记录时使用 pushState 插入的,则会调用 window.onpopstate 这个事件,我们就可以在里面进行我们的操作啦,弹窗也好,都可以

上一篇下一篇

猜你喜欢

热点阅读