禁用“您所做的更改可能无法保存”弹出窗口答案

【问题标题】：Disable "Changes you made may not be saved" pop-up window禁用“您所做的更改可能无法保存”弹出窗口
【发布时间】：2017-03-18 11:09:46
【问题描述】：

我使用以下前端代码导出.csv 文档。

HTML

  <form id="tool-export" method="post" action="export/">{% csrf_token %}
    <a id="export-link" class="btn btn-sm btn-primary" href="#">DOWNLOAD</a>
  </form>

  $('#export-link').click(function(e) {
    e.preventDefault();
    var link = $(this);
    var form = link.closest('form');

    var project_id = proj_id.find(":selected").val();
    var input = $('<input>').attr('type', 'hidden').attr('name', 'project_id').val(project_id);
    form.append($(input));

    var project_type = proj_type.val();
    input = $('<input>').attr('type', 'hidden').attr('name', 'project_type').val(project_type);
    form.append($(input));

    form.submit();
  });

导出效果很好，我得到了正确的文档。但在点击导出链接后，我还会收到您所做的更改可能无法保存消息。如何禁用此消息？我不想看到它。

【问题讨论】：

将您的<a> 标记更改为不带href 的按钮或输入标记
您使用哪些框架/插件？您看到的警报是使用beforeunload 事件创建的。要禁用它，您应该取消绑定该事件...
嗯，我不确定为什么会出现此警报，但如果您在致电 form.submit() 后 return false 可能会很好。
@Dekel，你是对的。发布您的答案，我将签署它作为解决方案。
@trex，很高兴我能帮助你解决这个问题。对不起，我错过了你的评论。如果您愿意，欢迎您找到我的其他一些答案并投票：)

标签： javascript jquery

【解决方案1】：

@Dekel 帮我搞定了。

消息是beforeunload 事件。我可以使用window.onbeforeunload = null; 禁用它。

  $('#export-link').click(function(e) {
    window.onbeforeunload = null;
    e.preventDefault();
    var link = $(this);
    var form = link.closest('form');

    var project_id = proj_id.find(":selected").val();
    var input = $('<input>').attr('type', 'hidden').attr('name', 'project_id').val(project_id);
    form.append($(input));

    var project_type = proj_type.val();
    input = $('<input>').attr('type', 'hidden').attr('name', 'project_type').val(project_type);
    form.append($(input));

    form.submit();
  });

【讨论】：

window.onbeforeunload = null; 在 chrome 和 IE 中工作，但在 Firefox 中仍然出现弹出窗口。
如何在drupal中实现这个？
根据 beforeunload 的 MDN 规范：HTML 规范指出，调用 window.alert()、window.confirm() 和 window.prompt() 方法可能会被忽略这个事件。有关更多详细信息，请参阅 HTML 规范。 @NNR 也来自 MDN：但请注意，并非所有浏览器都支持此方法，有些浏览器需要事件处理程序来实现两种遗留方法之一：阅读更多here
@srgbnd 如果我们对 onbeforeunload 有自定义要求，并且如果我们将其设为 null，则它适用于按钮单击。但是如果我们想在浏览器交叉按钮上调用 onbeforeunload 逻辑，那该怎么做呢？
是否有一个插件可以让我为所有/特定网站阻止它？

【解决方案2】：

我在 Chrome 中嵌入 Google-Form 时遇到了同样的错误，

我可以确认找到的解决方案都没有帮助我。这是我的弹窗截图：

我设法实现的唯一解决方案是隐藏元素，然后使用当前嵌入取消隐藏/创建新的iframe。这是我的代码的一部分：

       if (oldvalue !== value) { // checks the id of the form (value) is not the same
         // set value of the id
         $('#info').text(value); 
         // check the element exists
         let exists = value;
         if($("#" + value).length == 0) {
           //it doesn't exist
           exists = false;
         }
         // hide all child elements of the div for forms
         parent.children().hide();
         // create new node if needed
         if (!exists)
         {
           // create new form element and embed the form
           $("#google-form").clone().attr("id",value).attr('src', record.url).appendTo(parent);
         }
         // unhide error element
         $("#" + value).show();
       }

我的解决方案的完整代码是here。

【讨论】：

【解决方案3】：

在 jQuery 中只需使用：

$(window).off('beforeunload');

【讨论】：

在 google chrome 和 firefox 上都为我工作