美文网首页web 杂谈Web前端之路让前端飞
完美解决,手机浏览器端,点击返回后事件无效

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

作者: 高少辉_骚辉 | 来源:发表于2017-08-18 10:16 被阅读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 这个事件,我们就可以在里面进行我们的操作啦,弹窗也好,都可以

    相关文章

      网友评论

      • lzxxx:答主可以尝试一下 visibilitychange 这个事件,配合document.visibilityState

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

      本文链接:https://www.haomeiwen.com/subject/vjworxtx.html