javascript - How to trigger popup when browser tab closes in ReactJS? - Stack Overflow

admin管理员组

文章数量:1358107

I have a enrollment form with some customer related information. If user form is half filled and the user is going to close the tab, then I'll trigger the popup with option of save and exit, exit.

I have some jQuery solution. But nowadays it's not working in all browsers.

Jquery sample Code:

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

But we need solution in ReactJS. Is there any React library for the browser unload?

Thanks, Thangadurai

I have a enrollment form with some customer related information. If user form is half filled and the user is going to close the tab, then I'll trigger the popup with option of save and exit, exit.

I have some jQuery solution. But nowadays it's not working in all browsers.

Jquery sample Code:

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

But we need solution in ReactJS. Is there any React library for the browser unload?

Thanks, Thangadurai

• javascript
• jquery
• reactjs
• typescript
• ecmascript-6

Share Improve this question Follow edited Jul 10, 2020 at 10:22 coding4fun 3,51711 gold badge1818 silver badges2929 bronze badges asked Jul 29, 2016 at 5:22 Thangadurai NainamalaiThangadurai Nainamalai 18911 gold badge44 silver badges1919 bronze badges 1

• You probably also need to return "some string" in addition to e.returnValue in order to target the other browsers. @Danny's answer is spot on with regards to this. Also see: developer.mozilla/en-US/docs/Web/Events/beforeunload – Ryan H. Commented Sep 1, 2017 at 0:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can add and remove an event listener for the 'beforeunload' event within your ponentDidMount and ponentWillUnmount lifecycle functions.

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

https://developer.mozilla/en-US/docs/Web/Events/beforeunload

Example:

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

ponentWillUnmount() {
  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;
}
....

本文标签： javascriptHow to trigger popup when browser tab closes in ReactJSStack Overflow