如何防止用户离开未保存更改的网页？

防止未保存的更改

修改网页上的数据时，通常希望阻止用户在未保存其内容的情况下离开变化。这可以使用 window.onbeforeunload 事件来实现。

实现

旧版浏览器（IE6-8、Firefox 1-3.5）

1. 设置window.onbeforeunload 到返回字符串的函数：

   window.onbeforeunload = function() {
       return "Unsaved changes. Are you sure you want to leave?";
   };

   登录后复制

2. 删除事件以禁用它：

   window.onbeforeunload = null;

   登录后复制

   登录后复制

现代浏览器（Chrome、Firefox、等）

1. 启用提示：

   window.onbeforeunload = function() {
       return true;
   };

   登录后复制

2. 禁用提示：

   window.onbeforeunload = null;

   登录后复制

   登录后复制

追踪更改

要确定是否已进行更改，请使用验证框架或您自己的自定义事件处理程序。

jQuery 示例：

$('input').change(function() {
    if ($(this).val() != "") {
        // Enable the prompt
        window.onbeforeunload = function() {
            return true;
        };
    }
});

登录后复制

浏览器特定注意事项

• Chrome 和 Safari 仅显示通用消息并阻止自定义消息。
• Firefox 仅在表单提交时提示，而不在 URL 更改时提示。

以上是如何防止用户离开未保存更改的网页？的详细内容。更多信息请关注PHP中文网其他相关文章！