离开页面前的 JavaScript

Posted 2023-05-09

技术标签:

【中文标题】离开页面前的 JavaScript【英文标题】：JavaScript before leaving the page 【发布时间】：2011-10-28 03:49:40 【问题描述】：

我想在用户离开页面之前进行确认。如果他说好的，那么它将重定向到新页面或取消离开。我试着用 onunload 来实现

<script type="text/javascript">
function con() 
    var answer = confirm("do you want to check our other products")
    if (answer)

        alert("bye");
    
    else
        window.location = "http://www.example.com";
    

</script>
</head>

<body onunload="con();">
<h1 style="text-align:center">main page</h1>
</body>
</html>

但它在页面关闭后确认？怎么做才合适？

如果有人展示如何用 jQuery 来做会更好？

【问题讨论】：

哈哈哈......是的，这很对......但幸运的是它不是我的网站......我的客户要求在他身边做这件事是的，但是当我即将退出未保存的 Gmail 页面时，我很高兴看到这些提醒。注意，在 Firefox 4+ 上只显示默认消息而不是您的自定义消息developer.mozilla.org/en-US/docs/Web/Events/beforeunload#Notes Warn user before leaving web page with unsaved changes的可能重复 【参考方案1】：

onunload（或onbeforeunload）无法将用户重定向到另一个页面。这是出于安全原因。

如果您想在用户离开页面之前显示提示，请使用onbeforeunload：

window.onbeforeunload = function()
  return 'Are you sure you want to leave?';
;

或者使用 jQuery：

$(window).bind('beforeunload', function()
  return 'Are you sure you want to leave?';
);

这只会询问用户是否要离开页面，如果他们选择留在页面上，您将无法重定向他们。如果他们选择离开，浏览器将转到他们告诉它去的地方。

您可以在页面卸载之前使用onunload 做一些事情，但您不能从那里重定向（Chrome 14+ 阻止 onunload 内的警报）：

window.onunload = function() 
    alert('Bye.');

或者使用 jQuery：

$(window).unload(function()
  alert('Bye.');
);

【讨论】：

@Joseph：当您从onbeforeunload 返回一个字符串时，浏览器会将该字符串放入自己的确认框中。在onunload 和onbeforeunload 中使用confirm 是没有用的，因为只有浏览器可以控制它的去向，而不是你。看看这个演示：jsfiddle.net/3kvAC 请注意，如果您想有条件地在onbeforeunload 中显示消息，return false 将使浏览器在对话框中显示“false”。如果你想让窗口在没有用户警报的情况下关闭，你需要return undefined。 @Adam：Firefox 决定禁止自定义该消息。这是浏览器的一部分，因此您无法覆盖该行为。其他浏览器也可能会删除自定义消息的功能。见：developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/… @RocketHazmat Chrome 也有。它现在只显示：您要离开此站点吗？您所做的更改可能不会被保存。 @programmer5000 这很好，因为一些恶意网站可以显示一些无用的警告（例如“您不能在不提供银行信息的情况下离开”）【参考方案2】：

当您还检测表单状态是否更改时，此代码。

$('#form').data('serialize',$('#form').serialize()); // On load save form current state

$(window).bind('beforeunload', function(e)
    if($('#form').serialize()!=$('#form').data('serialize'))return true;
    else e=null; // i.e; if form state change show warning box, else don't show it.
);

您可以使用 Google JQuery Form Serialize 函数，这将收集所有表单输入并将其保存在数组中。我想这个解释就足够了:)

【讨论】：

知道为什么这不起作用吗？它会被其他 js 函数/jquery 插件覆盖吗？我正在运行一个 webrtc 应用程序，我想在客户端关闭窗口时“关闭”一些东西，因此需要处理窗口关闭。这可以被任何其他插件等覆盖，主要是开发人员在选择器上犯了错误，如果您怀疑被覆盖，请将您的 jquery 代码放在 【参考方案3】：

这将在离开当前页面时发出警报

<script type='text/javascript'>
function goodbye(e) 
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) 
        e.stopPropagation();
        e.preventDefault();
    

window.onbeforeunload=goodbye; 

</script>

【讨论】：

【参考方案4】：

当我有未保存的数据时，我这样做是为了显示确认消息

window.onbeforeunload = function() 
  if (isDirty) 
    return 'There is unsaved data.';
  
  return undefined;

返回undefined 将禁用确认

注意：返回 null 不适用于 IE

您也可以使用undefined 禁用确认

window.onbeforeunload = undefined;

【讨论】：

【参考方案5】：

为了在 Chrome 14+ 中使用 popop，您需要执行以下操作：

jQuery(window).bind('beforeunload', function()
    return 'my text';
);

系统会询问用户是留下还是离开。

【讨论】：

知道为什么这不起作用吗？我正在使用 chrome（最新版本）和一些 jquery 插件，但是当我关闭窗口时我没有收到任何警报。 @hey 为什么投反对票？它正在工作....您需要确保它在jQuery(document) 之外，我建议在加载所有插件后将其放置正确。另外，这个 sn-p 不做任何警报......它只是一个带有return 的演示。【参考方案6】：

您可以使用以下单行语句始终在离开页面前询问用户。

window.onbeforeunload = s => "";

要在页面上的某些内容被修改时询问用户，请参阅this answer。

【讨论】：

如果我刷新页面或退出，这也会触发吗？是的，它会在刷新或退出时触发。是否知道什么时候刷新和第一次刷新？当用户第一次访问该页面而不是用户刷新页面时。哦，不。当用户第一次访问该页面时，它不会被触发。仅在关闭或更改页面或刷新时。【参考方案7】：

这里的大多数解决方案都不适合我，所以我使用找到的那个here

我还添加了一个变量来允许或不允许确认框

window.hideWarning = false;
window.addEventListener('beforeunload', (event) => 
    if (!hideWarning) 
        event.preventDefault();
        event.returnValue = '';
    

);

【讨论】：

这次当用户刷新页面浏览器刷新按钮Blocked attempt to show a 'beforeunload' confirmation panel for a frame that never had a user gesture since its load.这个错误出现任何建议【参考方案8】：

通常您希望在用户对表单进行更改但未保存时显示此消息。

仅当用户更改某些内容时，才采用这种方法显示消息

var form = $('#your-form'),
  original = form.serialize()

form.submit(function()
  window.onbeforeunload = null
)

window.onbeforeunload = function()
  if (form.serialize() != original)
    return 'Are you sure you want to leave?'

【讨论】：

【参考方案9】：

<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">

<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>

<a href="https://www.w3schools.com">Click here to go to w3schools.com</a>

<script>
function myFunction() 
    return "Write something clever here...";

</script>

</body>
</html>

https://www.w3schools.com/tags/ev_onbeforeunload.asp

【讨论】：

【参考方案10】：

只是有点帮助，启用和禁用

$(window).on('beforeunload.myPluginName', false); // or use function() instead of false
$(window).off('beforeunload.myPluginName');

【讨论】：

以上是关于离开页面前的 JavaScript的主要内容，如果未能解决你的问题，请参考以下文章

离开页面前的 Jquery 未保存更改警报

Vue 离开页面时的校验-mixin-beforeRouteLeave

JavaScript离开页面前提示

bug-3——onload，onbeforeunload，Onunload的区别

仅当先前的加入未找到任何内容时才离开加入

jquery beforeunload 关闭（不离开）页面时？