让jQuery防止回到Android上

Make jQuery prevent going back on android

本文关键字：Android jQuery      更新时间：2023-09-26

我写了一个简单的弹出式联系表单脚本：

$(document).ready(function(){
    var popupButton = $("#contact-popup-button");
    var popupBox = $("#pop-up-contact");
    var popupBg = $("#pop-up-close-background");
    popupButton.on("click", function(){
        popupBox.addClass("slide-out");
        popupBg.fadeIn(200);
    });
    popupBg.on("click", function(){
        popupBox.removeClass("slide-out");
        popupBg.fadeOut(100);
    });

基本上，当单击按钮时，会出现一个div，并且它后面的空间变得模糊。如果你按下出现的div周围的空间，它会消失。现在对于移动设备，我希望还有一个选项，可以在单击后退按钮时使div消失。不幸的是，我根本无法让它在实践中发挥作用。我尝试过这些答案：

  1. 从 jquery 处理 Android 中的后退按钮
  2. 控制硬件后退按钮 jquery 移动版

但是两者都似乎在这项任务中失败了，其他人都使用插件，我想避免这种情况。在LG G2 Mini和Sony Xperia Z1上进行测试

一种方法是使用HTML5 History API。

打开弹出窗口

时，您可以在打开弹出窗口之前将状态推送到历史记录堆栈： history.pushState({popupOpen: false}, "My title", "index.html");此方法自动更新页面标题（当前在大多数浏览器实现中被忽略）和 url 的最后一部分，这些部分将显示在浏览器栏中。在大多数情况下，您可以在此处输入文件名。第一个参数是一个对象，其中包含稍后在弹出状态时可以访问的数据。

一旦将状态推送到历史记录堆栈，当按 back 键时，浏览器不会像往常一样返回最后一页，而是弹出堆栈上的最后一个状态。这适用于所有浏览器，如果您只想要移动浏览器的功能，则必须在调用history.pushState之前进行浏览器检查。

要正确处理后退事件，您需要订阅 popstate-Event。这可以通过以下代码完成：

window.addEventListener("popstate", function(event) {
  var data = event.state;
  if(data.popupOpen === false) {
    popupBg.trigger('click');
  }
});
注册一个事件侦听器，

该侦听器在用户导航回来后立即触发。在 event.state 变量中，可以再次访问推送状态时传入的数据。

祝你好运！

相关文章：