如何在reactjs中关闭浏览器选项卡时触发弹出窗口?
我有一个与一些客户相关的信息的登记表。如果用户表单填满了一半并且用户要关闭该选项卡,那么将弹出保存并退出选项,退出。如何在reactjs中关闭浏览器选项卡时触发弹出窗口?
我有一些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解决方案。浏览器是否有任何反应库卸载?
感谢, Thangadurai
您可以添加和删除事件侦听器为您componentDidMount和componentWillUnmount生命周期功能中的“beforeunload”事件。
https://facebook.github.io/react/docs/component-specs.html
https://developer.mozilla.org/en-US/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;
}
....
请注意,Chrome不再使用返回的文本,它会显示一条通知消息,指出可能无法保存更改。 – loganfsmyth
这之前卸载功能在Safari浏览器,铬,火狐,歌剧等所有浏览器中工作 –
你可能还需要'回归 “一些字符串”'除了'e.returnValue'以瞄准其他浏览器。 @丹尼的回答是关于这个问题的。另请参阅:https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload –