在 Firefox 和 IE 中使用 jquery 防止 onbeforeunload 警报

Question

我已经使用 onbeforeunload 事件在用户试图离开页面时显示默认警告框。

此对话框显示在我的表单 Post 操作中。

我已使用 event.preventDefault()（对于 Safari 以外的浏览器）和 Safari return null 来防止在表单 post 操作中显示此对话框。但这在 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 中出现此警报。

提前致谢。

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;
                }
            });
        }

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;
            }           
        });
    }

在 Firefox 和 IE 中使用 jquery 防止 onbeforeunload 警报

Prevent onbeforeunload alert using jquery in Firefox and IE

firefox

jquery

internet-explorer

onbeforeunload