当ReactJS中的浏览器选项卡关闭时,如何触发弹出窗口?

汤加杜莱·奈纳马莱(Thangadurai Nainamalai)

我有一个包含一些与客户有关的信息的登记表。如果用户表单已填充一半,并且用户将关闭选项卡,那么我将触发带有保存和退出,退出选项的弹出窗口。

我有一些jQuery解决方案。但是如今,它并不是在所有浏览器中都能正常工作。

jQuery示例代码:

'use strict';
$(document).ready(function() {

  $.fn.addEvent = function (obj, evType, fn) {
    if (obj.addEventListener) {
      obj.addEventListener(evType, fn, false);
      return true;
    } else if (obj.attachEvent) {
      var r = obj.attachEvent('on'+evType, fn);
      return r;
    } else {
      return false;
    }
  };

  $.fn.KeepOnPage = function (e) {
    var doWarn = 1;
    if (!e) {
      e = window.event;
    }
    if (!e) {
      return;
    }
    if (doWarn == 1) { // and condition whatever you want to add here
      e.cancelBubble = true;
      e.returnValue = 'Warning!\n\nNavigating away from this page will delete your text if you haven\'t already saved it.';
    }
    if (e.stopPropagation) {
      e.stopPropagation();
    }
  };

  $.fn.addEvent(window, 'beforeunload', $.fn.KeepOnPage);
});

但是我们需要ReactJS中的解决方案。是否有任何React库可用于浏览器卸载?

谢谢,Thangadurai

丹尼

您可以在componentDidMount和componentWillUnmount生命周期函数中添加和删除“ beforeunload”事件的事件侦听器。

https://facebook.github.io/react/docs/component-specs.html

https://developer.mozilla.org/zh-CN/docs/Web/Events/beforeunload

例子:

...
componentDidMount() {
  window.addEventListener('beforeunload', this.keepOnPage);
}

componentWillUnmount() {
  window.removeEventListener('beforeunload', this.keepOnPage);
}

keepOnPage(e) {
  var message = 'Warning!\n\nNavigating away from this page will delete your text if you haven\'t already saved it.';
  e.returnValue = message;
  return message;
}
....

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

当浏览器选项卡或窗口关闭时,是否会触发一般事件?

来自分类Dev

用户单击关闭选项卡时如何打开新窗口浏览器?

来自分类Dev

如何使用JavaScript关闭浏览器选项卡(父窗口)

来自分类Dev

检测 Bokeh 中的浏览器选项卡关闭

来自分类Dev

当用户关闭ASP.NET MVC中的浏览器或选项卡时,如何注销用户?

来自分类Dev

每当浏览器选项卡/窗口关闭时,Angular 应用程序就会变得不可用

来自分类Dev

根据浏览器响应选项卡下的消息隐藏弹出窗口

来自分类Dev

如何处理Angular中的浏览器选项卡关闭事件?仅关闭,不刷新

来自分类Dev

当用户关闭基于 django2.0 的网站上的选项卡或浏览器时,如何强制注销用户

来自分类Dev

关闭浏览器选项卡nodejs

来自分类Dev

在关闭浏览器选项卡上发送邮件

来自分类Dev

在MVC Web应用程序中,当关闭浏览器或选项卡而不注销时如何处理会话

来自分类Dev

实施JWT存储以允许浏览器刷新但在选项卡/浏览器关闭时清除

来自分类Dev

是否可以在关闭浏览器/浏览器选项卡时清除所有cookie。在asp.net

来自分类Dev

实施JWT存储以允许浏览器刷新但在选项卡/浏览器关闭时清除

来自分类Dev

铬浏览器:打开太多窗口/选项卡时显示“ Aw,snap”

来自分类Dev

如何关闭知道进程ID的浏览器选项卡?

来自分类Dev

如何恢复意外关闭的浏览器选项卡?

来自分类Dev

如何在浏览器或选项卡关闭上实现Session.Abandon()?

来自分类Dev

X-Mouse Button Control:如何设置双击关闭浏览器选项卡?

来自分类Dev

调用ashx处理程序后在浏览器中关闭选项卡

来自分类Dev

在JSF中获取“浏览器选项卡关闭”事件

来自分类Dev

有什么办法知道浏览器中的选项卡何时被窗口覆盖?

来自分类Dev

以编程方式确定是否在浏览器中启用了弹出窗口阻止程序,而无需打开新选项卡

来自分类Dev

在浏览器关闭选项卡或浏览器退出上运行方法

来自分类Dev

在新的浏览器选项卡中重新打开页面时,如何重置会话范围的Bean

来自分类Dev

当用户离开我的站点时如何在浏览器中更改选项卡名称

来自分类Dev

当完整的请求信息出现在浏览器的网络选项卡中时,如何避免多次 POST

来自分类Dev

如何实现何时复制浏览器选项卡

Related 相关文章

  1. 1

    当浏览器选项卡或窗口关闭时,是否会触发一般事件?

  2. 2

    用户单击关闭选项卡时如何打开新窗口浏览器?

  3. 3

    如何使用JavaScript关闭浏览器选项卡(父窗口)

  4. 4

    检测 Bokeh 中的浏览器选项卡关闭

  5. 5

    当用户关闭ASP.NET MVC中的浏览器或选项卡时,如何注销用户?

  6. 6

    每当浏览器选项卡/窗口关闭时,Angular 应用程序就会变得不可用

  7. 7

    根据浏览器响应选项卡下的消息隐藏弹出窗口

  8. 8

    如何处理Angular中的浏览器选项卡关闭事件?仅关闭,不刷新

  9. 9

    当用户关闭基于 django2.0 的网站上的选项卡或浏览器时,如何强制注销用户

  10. 10

    关闭浏览器选项卡nodejs

  11. 11

    在关闭浏览器选项卡上发送邮件

  12. 12

    在MVC Web应用程序中,当关闭浏览器或选项卡而不注销时如何处理会话

  13. 13

    实施JWT存储以允许浏览器刷新但在选项卡/浏览器关闭时清除

  14. 14

    是否可以在关闭浏览器/浏览器选项卡时清除所有cookie。在asp.net

  15. 15

    实施JWT存储以允许浏览器刷新但在选项卡/浏览器关闭时清除

  16. 16

    铬浏览器:打开太多窗口/选项卡时显示“ Aw,snap”

  17. 17

    如何关闭知道进程ID的浏览器选项卡?

  18. 18

    如何恢复意外关闭的浏览器选项卡?

  19. 19

    如何在浏览器或选项卡关闭上实现Session.Abandon()?

  20. 20

    X-Mouse Button Control:如何设置双击关闭浏览器选项卡?

  21. 21

    调用ashx处理程序后在浏览器中关闭选项卡

  22. 22

    在JSF中获取“浏览器选项卡关闭”事件

  23. 23

    有什么办法知道浏览器中的选项卡何时被窗口覆盖?

  24. 24

    以编程方式确定是否在浏览器中启用了弹出窗口阻止程序,而无需打开新选项卡

  25. 25

    在浏览器关闭选项卡或浏览器退出上运行方法

  26. 26

    在新的浏览器选项卡中重新打开页面时,如何重置会话范围的Bean

  27. 27

    当用户离开我的站点时如何在浏览器中更改选项卡名称

  28. 28

    当完整的请求信息出现在浏览器的网络选项卡中时,如何避免多次 POST

  29. 29

    如何实现何时复制浏览器选项卡

热门标签

归档