如何移除WordPress站点部分页面的Leave Site提示并实现自定义弹窗

一、移除默认“Leave Site”提示 #

默认的页面离开提示一般是通过beforeunload事件触发的，可能来自主题、插件或自定义代码，按以下方式处理：

1. 定位触发源 #

打开浏览器开发者工具（F12），在控制台搜索beforeunload关键词，找到绑定该事件的代码位置，确认是主题、插件还是自定义脚本导致的。

2. 代码移除提示 #

如果需要在指定页面移除提示，可将以下代码添加到主题的functions.php文件：

function remove_beforeunload_prompt() {
    // 指定要移除提示的页面，支持页面ID、slug或标题，多个用数组
    if (is_page(array('about-us', 123, 'contact'))) {
        wp_add_inline_script('jquery', '
            document.addEventListener("DOMContentLoaded", function() {
                // 移除所有beforeunload事件监听
                const listeners = getEventListeners(window);
                if (listeners.beforeunload) {
                    listeners.beforeunload.forEach(item => {
                        window.removeEventListener("beforeunload", item.listener);
                    });
                }
            });
        ');
    }
}
add_action('wp_enqueue_scripts', 'remove_beforeunload_prompt');

3. 插件/主题设置排查 #

如果是插件（如表单、购物车插件）或主题自带的提示，先查看对应插件/主题的设置面板，通常会有“离开页面提示”的开关选项，直接关闭即可。

二、给指定页面添加自定义离开弹窗 #

现代浏览器限制beforeunload的自定义文本显示，但仍可触发确认弹窗逻辑，实现方式如下：

将以下代码添加到主题的functions.php文件：

function add_custom_unload_prompt() {
    // 指定要显示自定义提示的页面
    if (is_page(array('checkout', 'draft-post'))) {
        wp_add_inline_script('jquery', '
            window.addEventListener("beforeunload", function(e) {
                // 自定义提示内容（浏览器会替换为统一默认文本，但弹窗会触发）
                const tip = "离开此页面会丢失未保存的内容，确定要离开吗？";
                e.returnValue = tip;
                return tip;
            });
        ');
    }
}
add_action('wp_enqueue_scripts', 'add_custom_unload_prompt');

注意事项 #

• 目前Chrome、Firefox等主流浏览器不再支持完全自定义提示文本，只会显示浏览器统一的确认文案，但弹窗触发逻辑有效。
• 若需要更个性化的弹窗，可结合页面内的跳转监听（如点击链接、返回按钮），提前弹出自定义模态框，但无法阻止浏览器的默认页面跳转行为。

内容的提问来源于stack exchange，提问作者Neha Rajput