4

在此处输入图像描述

Javascript当用户关闭浏览器选项卡时，我需要调用一个函数。问题是我只想在用户关闭浏览器时发生这种情况。无需进行页面刷新、链接导航、表单提交和后退按钮按下。JQuery到目前为止，我已经尝试过以下代码。

$(window).bind(
 "beforeunload", 
 function() { 
   alert("don't close me");
   return false;
 }
)
 $('form').submit(function() {
   jQuery(window).unbind("beforeunload");
 });

它不工作。有没有其他可用的Javascript工具JQuery？

如果我调用我的函数“beforeunload”事件，上面的消息就会出现。我不想显示此消息，我的功能必须工作。我尝试给出 e.preventDefault。但它不会再次调用我的函数。任何人都可以提出一些建议。

谢谢。

4

4 回答 4

6

我同意这是一种不好的做法的评论，但我无法抗拒尝试回答问题的呼吁。

我能想到的唯一方法是使用onbeforeunload你已经在做的事情。但是，当有人通过其他方式离开页面时，您需要一种方法来禁用该警报。

var show_close_alert = true;

$("a").bind("mouseup", function() {
    show_close_alert = false;
});

$("form").bind("submit", function() {
    show_close_alert = false;
});

$(window).bind("beforeunload", function() {
    if (show_close_alert) {
        return "Killing me won't bring her back...";
    }
});

这不是万无一失的，因为有一些方法可以在不看到警报的情况下关闭浏览器（例如单击链接、立即点击停止，然后关闭浏览器），但它可能会尽可能接近。

这是一个小提琴。

但是请...不要这样做。

于 2013-07-31T16:04:49.853 回答
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.');
});
于 2015-02-20T11:05:39.000 回答
0

JSFiddle 使用以下内容来提醒用户他们试图关闭修改后的小提琴而不保存：

window.onbeforeunload = function(){
  if (window.editorsModified){
    return "You've modified your fiddle, reloading the page will reset all changes."
  }
};

这工作可靠（http://jsfiddle.net/MaxPRafferty/b6uEF/show/，最新的Chrome，FF，IE10），但总是会提示用户。您不能通过返回 false 来强制打开页面；

于 2013-07-31T15:58:00.893 回答
0

您的问题的答案是不要在服务器端添加图像。图像将停在服务器上并减慢速度，这不是一个好习惯，我知道您想重新渲染图像，有一种更快的方法可以使用您上传的文件来做到这一点。

这是一篇中篇文章： https ://medium.com/@650egor/react-30-day-challenge-day-2-image-upload-preview-2d534f8eaaa

它将显示任何上传图像的预览，以便用户可以看到图像的外观，一旦用户满意并真正想要保存它，他可以单击提交按钮，然后运行 ​​{handleSubmit} 函数。

脚步：

  1. 为输入字段创建一个 {handleChange} 函数
  2. 按照中篇文章显示预览
  3. 制作一个 {handleSubmit} 函数来提交服务器上的数据
  4. 重新渲染✌</li>
于 2021-04-08T11:49:40.363 回答