检测用户是否单击了“后退”按钮 - 移动浏览器

时间:2016-09-16 17:40:03

标签: javascript jquery html mobile back-button-control

我有非常奇怪的要求。

要求说明:在产品详细信息页面上,当在灯箱中打开产品图像,然后在移动设备上的浏览器上按back按钮时,将显示产品详细信息页面,而不是上一页,即产品网格页< /强>

所以,我想到了如何处理跨浏览器中的后退按钮。某些解决方案在桌面浏览器中有效,但在Mobile Browsers

中均无效

我尝试了下面的解决方案:

window.onload = function () {
if (typeof history.pushState === "function") {
    history.pushState("jibberish", null, null);
    window.onpopstate = function () {
        history.pushState('newjibberish', null, null);
        // Handle the back (or forward) buttons here
        // Will NOT handle refresh, use onbeforeunload for this.
    };
}
else {
    var ignoreHashChange = true;
    window.onhashchange = function () {
        if (!ignoreHashChange) {
            ignoreHashChange = true;
            window.location.hash = Math.random();
            // Detect and redirect change here
            // Works in older FF and IE9
            // * it does mess with your hash symbol (anchor?) pound sign
            // delimiter on the end of the URL
        }
        else {
            ignoreHashChange = false;
        }
    };
  }
};

还试过这个:

 if (window.history && window.history.pushState) {

$(window).on('popstate', function() {
  var hashLocation = location.hash;
  var hashSplit = hashLocation.split("#!/");
  var hashName = hashSplit[1];

  if (hashName !== '') {
    var hash = window.location.hash;
    if (hash === '') {
      alert('Back button was pressed.');
    }
  }
});

也尝试了这个

window.onbeforeunload = function (e) {
        var e = e || window.event;
        var msg = ""
        $("#blueimp-gallery").hide();
        // For IE and Firefox
        if (e) {
            e.returnValue = msg;
        }

        // For Safari / chrome
        return msg;
     };

1 个答案:

答案 0 :(得分:0)

正如您毫无疑问地了解到的那样,onbeforeunload提供了一种简单取消导航事件的方法(请参阅this answer以获得一个好的起点),但它并不总是如此在所有浏览器中以您想要的方式工作(出于安全原因,许多浏览器都会显示确认弹出窗口,无论您做什么)。如果你还没有,先给它一个镜头;我目前的代码示例中没有看到任何取消尝试,只是历史记录操作。

如果不这样做,使用散列路由可能会有所帮助 - 最好是通过一个库来管理URL散列作为唯一视图路由(加入Angular,React等)并将更改推送到history。给模态状态一个唯一的URL(通常不会在我的经验中完成)意味着回归&#39;只会关闭模态而不是重新加载页面。