ios 内嵌h5页面 监听按钮 h5监听页面关闭

　　事发背景(时间较久)：

　　在一个阳光明媚的一天，这天lz正在工位上悠闲的敲着代码；说时迟那时快，运营小姐姐箭步过来，让lz做一个挽留弹窗；我当时一听这TM不是流氓么。于是便有了以下的故事。。。

　　如何实现：

　　众所周知，我们一般是无法去监听浏览器的返回事件的；更别说是用户设备的物理返回键了；依稀记得浏览器确实是有个关闭事件----onbeforeunload；但是这个原意是用户是否确定关闭此页面，会有个弹窗出现；所以，这条路是走不了了。OMG折磨人，于是又想了想，如果我们添加一个中间页，在这个页面进行跳转；如果用户返回必将回到这个页面，然后在进行挽留的需求；思路貌似是可以的；但这样用户体验以及与我们需求的初衷是不符合的，于是又被pass；接着又想了想用hash去做监听呢，而且页面也不会有刷新，感觉还挺好；实践了后发现，页面进去改变了hash值后就会触发一次，当用户返回时，就不再触发这个hashchange事件了；于是就想在浏览器的浏览记录去动手；于是就用到了History 接口中的pushState完成这个需求；

　　如何使用：pushState /onpopstate

　　pushState见名知意就是往历史记录条目添加一条历史状态；使用方法：

state:'',//可以用在popstate事件中,可以通过locaton.state获取 k
　　title: 'pushstate',//为跳转的state传递一个短标题
　　url: '#'//该参数定义了新的历史URL记录
　　window.history.pushState(state, title,url);

　　onpopstate监听就比较简单：

window.addEventListener('popstate', (e) => {
      this.callback()
    }, false)

　　兼容性：

这个是H5新特性，目前的兼容性也不是特别好；但是至少我们能够把这个需求能够完成，至于其他的监听思路，lz暂时还没想出来；也请各路大神集思广益。。

最后lz贴上我之前写的方法：

class _browserBack {
  init (param) {
    let {callback} = param;
    this.callback = callback;
    this.pushHistory()
    this.listenEvent()
  }
  listenEvent () {
　　if('pushState' in window.history){
　　　　window.addEventListener('popstate', (e) =>
　　　　　　this.callback()
　　　　}, false)
　　}
}

pushHistory () {
    if (this.ifhasHash()) return;
    let state = {
      title: 'pushstate',
      url: '#'
    }
    window.history.pushState(state, 'title', '#');
  }
  ifhasHash () {
    return location.href.includes('#')
  }
}

　

　　小弟不才，还望指教！