关闭选项卡/浏览器前的确认

Confirmation before closing of tab/browser

本文关键字：确认 浏览器 选项      更新时间：2023-09-26

如何在用户离开页面之前像在gmail中一样询问用户的确认？

我在各个地方搜索了这个问题，但他们提到的只是javascript window.unload和window.onbeforeunload的使用。此外，它在大多数情况下在 chrome 中不起作用，因为它会被阻止。

试试这个：

<script>
window.onbeforeunload = function (e) {
    e = e || window.event;
    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Sure?';
    }
    // For Safari
    return 'Sure?';
};
</script>

这是一个工作的小提琴

试试这个：

<script>
    window.onbeforeunload = function(e) {
       return 'Dialog text here.';
    };
</script>

更多信息在这里 MDN.

2020年最短的解决方案（对于那些不需要支持IE的快乐的人）

在Chrome，Firefox，Safari中测试。 

function onBeforeUnload(e) {
    if (thereAreUnsavedChanges()) {
        e.preventDefault();
        e.returnValue = '';
        return;
    }
    delete e['returnValue'];
}
window.addEventListener('beforeunload', onBeforeUnload);

实际上，没有一个现代浏览器（Chrome，Firefox，Safari）将"返回值"作为用户的问题显示。相反，它们显示自己的确认文本（这取决于浏览器）。但是我们仍然需要返回一些（甚至是空的）字符串才能在Chrome上触发该确认。

更多解释见MDN在这里和这里。

我阅读了有关答案集的评论，设置为"正常"。大多数用户要求应该允许按钮和某些链接单击。在这里，将向现有代码添加一行。

<script type="text/javascript">
  var hook = true;
  window.onbeforeunload = function() {
    if (hook) {
      return "Did you save your stuff?"
    }
  }
  function unhook() {
    hook=false;
  }

调用 unhook（） on单击您想要允许的按钮和链接。例如

<a href="#" onClick="unhook()">This link will allow navigation</a>


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;

如果你想根据条件提问：

var ask = true
window.onbeforeunload = function (e) {
    if(!ask) return null
    e = e || window.event;
    //old browsers
    if (e) {e.returnValue = 'Sure?';}
    //safari, chrome(chrome ignores text)
    return 'Sure?';
};
  1. 假设我想关闭一个窗口，如果什么都没有选择，则
  2. 我想关闭窗口并选中某些内容，但不提示我。
  3. 我想关闭一个窗口，但选择了某些内容提示我。

对于这三个条件，我在下面的代码中搜索了很多，进行了适合我需求的更改，希望帮助其他人。问是一个键，如果我想弹出提示"true"将提示您关闭窗口，否则不会。 假设我想打印我的文档并重定向我的页面，询问将是错误的，并且不会有提示。假设您的页面有数据，然后检查一个条件是我的情况，如果小计为零，则值小计为零，则没有提示其他明智的提示我您的页面中有内容。

<pre>
    var ask = true;
    window.onbeforeunload = function(e) {
       if (!ask) return null
       var subtotal = $('#lblgtwithsgst').text();
         if (subtotal != '0') {
          e = e || window.event;
          //old browsers
            if (e) {
             e.returnValue = 'Sure?';
            }
            //safari, chrome(chrome ignores text)
            return 'Sure?';
         }  
      }
      $('#btnPrint').click(function(){
        ask = false;
        ///print your doc no prompt if ask is false;
      )};

// use jquery version older than 1.6
var preventUnloadPrompt;
var messageBeforeUnload =
  'my message here - Are you sure you want to leave this page?';
$('a').live('click', function () {
  preventUnloadPrompt = true;
});
$('form').live('submit', function () {
  preventUnloadPrompt = true;
});
$(window).bind('beforeunload', function (e) {
  var rval;
  if (preventUnloadPrompt) {
    return;
  } else {
    return messageBeforeUnload;
  }
  return rval;
});

对于角度，更改组件表单名称并粘贴到需要显示警报的组件中。

  @HostListener('window:beforeunload', ['$event'])
  beforeunloadHandler(event) {
    return !this.form.dirty;
  }
相关文章：