防止没有页面焦点或触摸的浏览器后退按钮导航答案

【问题标题】：Prevent browser back button navigation without page focus or touch防止没有页面焦点或触摸的浏览器后退按钮导航
【发布时间】：2021-04-11 23:54:51
【问题描述】：

点击浏览器后退按钮时，如果不点击/触摸页面内的任何地方，导航应该被禁用。

以下实现仅在点击页面内时有效。

history.pushState(null, null, window.location.href);
history.back();
window.onpopstate = () =>{ // not getting activate without clicking inside page
console.warn('DISABLE BROWSER NAVIGATION');
history.forward();
}

【问题讨论】：

stackoverflow.com/questions/57339098/…
这能回答你的问题吗？ Chrome popstate not firing on Back Button if no user interaction

标签： javascript

【解决方案1】：

最好的方法之一是在没有控件的弹出窗口中打开您的应用程序，但同样取决于您的要求，这可能不适用。希望这可以帮助。类似下面的东西

function openPopup(){

  var pathname = (window.location.pathname);
window.open(pathname+'openpagePopup.html','','width=800,height=450,toolbar=no, menubar=no,scrollbars=no,resizable=no,dependent,screenx=80,screeny=80,left=80,top=20,scrollbars=no'); 
  return false;
}

据我所知，其他方式不值得信赖，例如您可以向用户显示警报，但不能禁用后退按钮。如果您执行以下操作，请确保检查浏览器兼容性。

window.onbeforeunload = function() { 
 return "Write something here";
};

更新：我发现有一种方法可以处理页面历史记录。万一可行，我从未尝试过，这是一个链接

JS - window.history - Delete a state

【讨论】：