使用浏览器原生“后退”按钮关闭带有JS的模式窗口

基础概念

在Web开发中，浏览器原生的“后退”按钮用于导航回用户之前访问的页面。当用户点击这个按钮时，浏览器会加载历史记录中的上一个URL。如果当前页面是通过JavaScript打开的一个模式窗口（modal window），用户可能会期望点击“后退”按钮能够关闭这个窗口并返回到之前的页面。

相关优势

• 用户体验：用户可以通过熟悉的浏览器操作来控制窗口的打开和关闭，这符合用户的直觉和习惯。
• 一致性：使用浏览器的原生功能可以保持与用户在其他网站上的体验一致。

类型

• 模态窗口（Modal Window）：覆盖在当前页面上，阻止用户与底层页面交互的窗口。
• 弹出窗口（Popup Window）：通常在新标签页或新窗口中打开，可能会被浏览器拦截。

应用场景

• 表单验证失败后的提示窗口。
• 用户登录或注册的弹窗。
• 重要通知或警告信息的展示。

遇到的问题及原因

当用户点击浏览器的“后退”按钮时，如果模式窗口是由JavaScript打开的，浏览器默认行为是导航到历史记录中的上一个URL，而不是关闭窗口。这是因为浏览器无法区分窗口是通过JavaScript打开的还是用户手动输入URL打开的。

解决方法

要实现点击“后退”按钮关闭模式窗口，可以通过以下步骤：

1. 监听popstate事件：当用户点击“后退”按钮时，浏览器会触发popstate事件。
2. 关闭模式窗口：在popstate事件的回调函数中，添加逻辑来关闭模式窗口。

// 假设模式窗口是由window.open打开的
let modalWindow = window.open('modal.html', '_blank');

// 监听popstate事件
window.addEventListener('popstate', function(event) {
    // 关闭模式窗口
    if (modalWindow && !modalWindow.closed) {
        modalWindow.close();
    }
});

// 在打开模式窗口后，手动添加一个历史记录条目
history.pushState({modal: true}, '', '#modal');

参考链接

• MDN Web Docs: window.open
• MDN Web Docs: History API

通过上述方法，可以在用户点击浏览器的“后退”按钮时关闭由JavaScript打开的模式窗口，从而提供更好的用户体验。