在浏览器选项卡上调用JS函数关闭

Question

当用户关闭浏览器选项卡时，我需要调用JS函数。问题是我希望只有当用户关闭浏览器时才会发生这种情况。无需进行页面刷新，链接导航，表单提交和后退按钮按下。到目前为止我尝试了下面的jquery代码。

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

它不起作用。任何人都可以为此回答。除了jquery之外还有其他js工具吗？。

如果我调用我的函数“beforeunload”事件，上面的消息即将到来。我不想显示此消息，我的功能必须工作。我尝试给e.preventDefault。但是当我使用它时，它也没有调用我的功能。任何人都可以提出建议。 感谢。

Answer 1

我同意评论这是一种不好的做法，但我无法拒绝尝试回答这个问题的电话。

我能想到的唯一方法就是使用你已经在做的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...";
    }
});

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

这里是fiddle。

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

Answer 2

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强制页面打开;

Answer 3

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

Answer 4

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

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

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

步骤：

1. 为输入字段创建一个 {handleChange} 函数
2. 按照媒体文章显示预览
3. 制作一个{handleSubmit}函数来提交服务器上的数据
4. 重新渲染✌