我需要在用户离开页面之前警告用户未保存的更改(这是一个非常常见的问题).

window.onbeforeunload=handler

这有效,但它会引发一个默认对话框,其中包含一条包含我自己文本的令人生气的标准消息.我需要完全替换标准消息,所以我的文本是清楚的,或者(更好)用一个模式对话框替换整个对话框使用jQuery.

到目前为止,我失败了,我还没有找到任何似乎有答案的人.它甚至可能吗？

我的页面中的Javascript:

<script type="text/javascript">   
   window.onbeforeunload=closeIt;
</script>

closeIt()函数:

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

使用jQuery和jqModal我尝试过这种事情(使用自定义确认对话框):

$(window).beforeunload(function() {
        confirm('new message: ' + this.href + ' !', this.href);
        return false;
    });

这也行不通 - 我似乎无法绑定到beforeunload事件.

我使用以下前端代码导出.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>

JS

  $('#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();
  });

出口运作良好,我得到了正确的文件.但是,我也会在点击导出链接后收到您所做的更改可能无法保存的消息.如何禁用此消息？我不想看到它.

我已经实施了一个CanDeactivate警卫,以避免用户在上传过程中离开页面并且它可以工作.问题是我的消息始终是默认消息(由于浏览器语言而在荷兰语中),甚至自己设置消息,仍然显示相同的默认confirm窗口.我想写自己的消息(实际上我有一个我想要显示的模态,但首先我希望看到我的简单消息工作)

任何想法可能是什么？我错过了什么吗？提前致谢!

这是代码

守护.

    import { Injectable, ViewContainerRef } from '@angular/core';
    import { CanDeactivate } from '@angular/router';
    import { Observable } from 'rxjs/Observable';
    import { DialogService } from '../services';

    export interface PendingUpload {
        canDeactivate: () => boolean | Observable<boolean>;
    }
    @Injectable()
    export class PendingUploadGuard implements CanDeactivate<PendingUpload> {
        constructor(private dialogService: DialogService, private viewContainerRef: ViewContainerRef) { }

        canDeactivate(component: PendingUpload): boolean | Observable<boolean> {

            return component.canDeactivate()
                ? true
                : confirm("Test custom message");

               //dialog I want to use later
               //this.dialogService.confirm("modal …

设置

我实现了一些代码来防止用户从未保存的表单中丢失数据，这些数据本来应该显示这一点，但我的代码似乎没有被执行。我的代码：

$(window).on('beforeunload', function (e)
{
  if ($('.loading').length)
  {
    var confirmationMessage = 'Data is still being saved and/or loaded in the background. Leaving the page may cause your data to not be saved correctly.';

    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
    return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
  }

  if ($('form.detect-dirty.dirty').length)
  {
    var confirmationMessage = 'You have edited but not saved a form on this page.';

    (e || window.event).returnValue = confirmationMessage; //Gecko + IE
    return confirmationMessage; //Gecko + …

我正在尝试更改消息“您所做的更改可能无法保存。” 在离开页面时。我为此使用 window.onbeforeunload。