我使用onbeforeunload
事件在用户尝试离开页面时显示默认警报框。
此对话框显示在"我的表单发布"操作中。
我已经使用了event.preventDefault()
(适用于除 safari 以外的浏览器(和 Safari return null
,以防止在表单发布操作中显示此对话框。但这在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 中出现此警报。
提前谢谢。
如果浏览器不是 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;
}
});
}
解决方案是,需要将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;
}
});
}