如何通过JavaScript在页面退出时触发按钮点击以保存页面？

原代码的核心问题 #

1. 事件绑定错误：window.onbeforeunload = check(); 是直接执行check函数并将返回值绑定给事件，正确写法应为绑定函数引用：window.onbeforeunload = check;
2. 语法错误：confirm("Are you sure you want to exit this page?"; 缺少闭合括号，修正后是confirm("Are you sure you want to exit this page?");
3. 浏览器安全限制与请求中断：即使修正前两点，页面卸载时触发btn.click()（本质是同步表单提交）会被浏览器中断——浏览器会优先完成页面卸载，不会等待同步请求完成。另外，现代浏览器不再允许在beforeunload中自定义弹窗，只能通过返回字符串触发浏览器默认提示。

可行解决方案：使用Navigator.sendBeacon #

sendBeacon是浏览器专为页面卸载/关闭场景设计的API，它会异步发送数据，且浏览器会保证请求完成，不会被页面中断。

步骤1：后台创建保存接口

在ASP.NET中，可在页面后台代码添加WebMethod处理保存逻辑：

[System.Web.Services.WebMethod]
public static void SavePageData(string data)
{
    // 写入你的保存逻辑，比如存储到数据库、文件等
}

步骤2：前端修改事件处理

替换原有check函数，用sendBeacon发送保存请求：

window.onbeforeunload = function() {
    // 收集需要保存的页面数据，示例为获取表单输入值
    var saveData = {
        username: document.getElementById("txtUsername").value,
        content: document.getElementById("txtContent").value
    };

    // 发送请求到后台WebMethod，替换为你的页面路径
    var url = "YourPage.aspx/SavePageData";
    navigator.sendBeacon(url, JSON.stringify({ data: saveData }));

    // 返回任意字符串可触发浏览器默认退出提示（不需要提示可省略）
    return "您有未保存内容，确定要离开吗？";
};

补充说明

• 若一定要模拟按钮点击，需确保按钮的点击事件是异步请求且不会被中断，但sendBeacon是更可靠的方案。
• 按钮是否可见不影响逻辑，只要ClientID正确即可，但直接调用后台接口比模拟点击更高效。
• 现代浏览器对beforeunload的限制：仅当页面有用户交互（如输入内容）时，才会显示退出提示，否则可能无提示，但sendBeacon依然会执行保存请求。

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