使用jQuery在Firefox和IE中阻止onbeforeunload警告

Question

我使用了onbeforeunload事件，在用户尝试离开页面时显示默认警告框。

该对话框显示在我的表单提交操作中。

为了防止在表单提交操作中显示此对话框，我使用了event.preventDefault()（适用于除Safari之外的浏览器）和return null（适用于Safari）。但是在Firefox和IE中不起作用。

以下是jQuery代码示例：

if (!isSafari) {
        window.addEventListener("beforeunload", function (event) {
            if (!hideDefaultAlert) {
                event.returnValue = "Your unsaved changes will be lost";
            } else {
                event.preventDefault();
                hideDefaultAlert = false;
            }
        });
    } else if (isSafari) {
        $(window).on("beforeunload", function () {
            if (!hideDefaultAlert) {
                return "Your unsaved changes will be lost";
            } else {
                hideDefaultAlert = false;
                return null;
            }           
        });
    }

请提供一种解决方案以防止Firefox和Safari中的警报弹出。 提前致谢。

- Dinesh M

---

你如何检查浏览器是否为Safari？在IE和Firefox中，尝试在beforeunload函数中设置断点并检查代码是否被执行。 - Zhi Lv

用于检查Safari浏览器的代码var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf("Constructor") > 0;是的，我已经检查了断点，代码已经执行。但是仍然会显示表单提交操作请求的警报框。 - Dinesh M

Answer 1

如果浏览器不是Safari，且表单未更改，则无需显示对话框。因此，请尝试按以下方式修改代码（删除event.preventDefault()）：

        var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf("Constructor") > 0;
        var hideDefaultAlert = true;
        if (!isSafari) {
            alert("not safari");
            window.addEventListener("beforeunload", function (event) {
                if (!hideDefaultAlert) {
                    event.returnValue = "Your unsaved changes will be lost";
                } else {
                    //event.preventDefault(); //remove this line
                    hideDefaultAlert = false;
                }
            });
        }

- Zhi Lv

Answer 2

解决方法是，需要将event.preventDefault()替换为event.stopPropagation()和return undefined。这个解决方案适用于所有浏览器。

if (!isSafari) {
        window.addEventListener("beforeunload", function (event) {
            if (!hideDefaultAlert) {
                event.returnValue = "Your unsaved changes will be lost";
            } else {
                event.stopPropagation();
                hideDefaultAlert = false;
                return undefined;
            }
        });
    } else if (isSafari) {
        $(window).on("beforeunload", function () {
            if (!hideDefaultAlert) {
                return "Your unsaved changes will be lost";
            } else {
                hideDefaultAlert = false;
                return null;
            }           
        });
    }

- Dinesh M