使用 popstate 监听用户的返回行为

正常的操作代码

 function pushHistory() {
    var state = {
        title: "title",
        url: "#"
    };
    window.history.pushState(state, "title", "#");
}

window.addEventListener("popstate", function (e) {
    // alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
    window.location.href = "https://sogou.com"
    // window.location.reload()
    // window.location.href = 'https://www.zixunkankan.xyz/static/web/site/guessong.html?hid=101&pageid=1'
    //  window.history.go(-1);
}, false);

pushHistory();

异常不生效

但是你会发现在有的浏览器上并不生效 这里主要记录一下不生效的可能原因：

1. W3C规范指出，当traversing history(请参阅第14条)时，允许UA(浏览器)在popstate中排队。 popstate是异步触发的(即使此时URL已更改)。浏览器供应商以不同的方式解释和实现此规范。 Mozilla decides Firefox应该能够在popstate之前触发load，并且出于充分的理由，这样慢速图像就不会阻止popstate。 Chrome/Safari做出其他决定，这导致了我们的问题: 在管理Web应用程序的历史记录时，通常希望尽快启动历史记录管理，例如。在DOMContentLoaded而不是load。 但作为返回，用户无法退出任何pushState，因为所有popstate都排队等待直到load为止。

   我们正在寻求有关处理此类情况的建议。我自己想出几个:

   • 延迟加载图片，因此load可以尽快触发。
   • 阻止用户界面，直到触发load。
   • 在load而不是DOMContentLoaded上的Init框架。

   有更好的解决方案吗？

   更新:当ajat在load之前触发时，事情变得很难看，如果那些请求导致DOM更改，并且DOM更改碰巧有一些图像，则load会延迟到这些图像加载/超时，这意味着popstate会排队等待更长。

   更新2 :要为其添加一个简单的演示，请访问此带有chrome的jsbin page，并查看popstate将被阻止，直到触发load为止。您可以比较缓存的图像和未缓存的图像的结果。

   最佳答案

   您可以在上一页卸载期间尝试调用popstate吗？例如，如果您在第1页中并且想移至第2页，而不是在第2页的加载/就绪期间调用弹出状态，那么为什么不在第1页的unload事件中调用弹出状态呢？

   不确定是否满足您的情况。但我无法在您的垃圾箱中尝试。

   关于javascript - 当浏览器不立即触发popstate事件时，如何处理后退按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24096717/

2. 部分手机机型的onpopstate首次进入页面无任何交互式没办法触发的，有了交互他就可以触发。面对这样的问题可以加一个事件主动去触发 或者 一进入加个弹窗进行交互下就可以让onpopstate生效。 针对部分浏览器生效，假如是做微博等其他业务内嵌浏览器的话可能不生效

<span class="virtualEle" @click="virtualClick" ref="virtualEle" v-if="virtualEleShow">xxx</span>
 window.addEventListener('popstate', vm.onPopstate)
   vm.$refs.virtualEle.click()
   if (window.history.state !== 'virtualEleInfo') {
     const state = 'virtualEleInfo'
     window.history.pushState(state, 'title', '#')
}