This question already has answers here:
Prompt User before browser close?
(4 answers)
Closed 9 months ago.
I want to show a dialog when users click the X button to close the browser's window. In the dialog, it will ask users if they want to proceed with closing or not, if users choose no, it won't close the window.
I am wondering how to achieve this. I tried the unload event handler, the code was triggered but the window has already been closed. I also tried onbeforeunload, but it seems not triggered at all.
window.addEventListener('onbeforeunload ', () => {
// code not triggered here
});
window.addEventListener('unload', () => {
// code triggered but window is already closed
});
Even if we assume that there is an event handler which will be triggered before the window is closed, then what code should I write in order to prevent closing the window? It looks like once X button is clicked, the window is just "determined" to close and it's not reversible?
[https://stackoverflow.com/questions/2923139/prompt-user-before-browser-close]
this is the basic way to do
but prompt will be always the same
window.onbeforeunload = function(evt) {
return true;
}
I'm opening a modal dialog. As soon as i open the modal dialog i will mask the parent window so that none of the click events can be done on the parent window.
But however, i will need to clear the mask once the child window is closed.
Below is the piece of code which will open the dialog and return the opened window reference.
this.contentWindow = openDialog(this.url);
Once i open the content window, i will apply mask on the parent window as below : Till here all is well :)
this.parentWindow.jQuery("div#layerOverlay").css('display', 'block');
But, also i need to register a call back event on the contentwindow when it's closed
this.contentWindow.onunload = function () { restoreIEMask(); };
function restoreIEMask() {
getTopWindow().jQuery("div#layerOverlay").css('display', 'none');
}
The above piece of code works fine in other browsers except in IE11. I tried various ways in attaching the callback on the contentwindow iframe etc. But nothing seems to work.
Can some please suggest how to get out of this situation.
How can I determine if the popup window was opened? E.g. someone clicked on the extension (chrome.browserAction), the window open and I want to show a loading sign inside the popup every time someone does that?
You can register onClicked event listener for browserAction.
chrome.browserAction.onClicked.addListener(function () {
// do what you want
});
You can also listen to window.onload event in popup page.
window.onload = function() {
// do what you want
};
When user close the browser window I want to show fancybox popup with confirm custom message, or my div with my style and image. How I can do it?
With Jquery, you have to bind the beforeunload event to a function.
Try this :
$(window).bind('beforeunload', function () {
// display fancybox popup
});
Due to how some of our pages work, JS can get injected into the page at any point and sometimes this JS closes the current window. The problem is that I need to attach an event listener to the onunload of the window so that a value may be returned from the window to the parent page. But because the window close script may be injected at any point, I can't bind this event to the onload due to how it works so I was hoping to use DOMContentLoaded since that event will trigger before the injected script does.
However in my tests, I cannot get anything to bind to DOMContentLoaded on the parent page where the new window is being created.
Here is an what I am currently working with: Plunker
We only need this to work in Chrome at the moment.
Our current method of doing this works like this (pseudocode):
onButtonClick = function(){
win = window.open(...);
win.onload = function(){
win.onunload = function(){
//Bind some function that will get the window's "return value" and pass it to the parent page
//This will never happen if the window closes itself before the page is done loading
};
};
};
Can I use DOMContentLoaded to accomplish what I want? If so, how do I properly attach it to the window?
Note: I cannot bind the onunload event directly to the window once it is created. It seems to fire the onunload event twice (once when the window opens and once when it closes). You can see this happening if you use the bindOnCreate function in my example.
If you change line 58 from
w.document.addEventListener('DOMContentLoaded', ...)
to
w.addEventListener('DOMContentLoaded', ...)
it works. I'll try to explain what's actually going on under the hood:
When window is opened, it is initially having URL about:blank. You can check this by logging w.location.toString() in onunload event handler (see next step).
Immediately after that the browser loads URL supplied in window.open, thus triggering onunload for about:blank (first time).
Real page with different window.document is loaded into pop-up window, but your event handlers are still listening to the DOM root of about:blank page because you added events to window.document, not window; and right now as we have another URL loaded, window.document is completely different object than one step before.
When you close window, onunload is triggered again (second time) because your onunload event was connected to window.
If you addEventListener for pop-up's window, it receives events from all window.document-s that will be loaded inside that window because of JS event bubbling mechanism.
I hope this answers your questions.
Alternatively, you can send a message from the child window to its opener, rather than let opener to handle child window's unload event. This will be much easier and you don't need to worry about the injection point. Also you can get rid of twice unload event, as Andrew Dunai has already given the reason for this issue.
Here I give a very simple demo, only shows the skeleton of my messaging solution:
parent.html
<button id="open">Open Window</button>
<button id="close">Close Window</button>
<div></div>
<script>
var child;
document.querySelector('#open').addEventListener('click', function() {
document.querySelector('div').innerHTML = '';
child = window.open('child.html', 'child', 'width=600,height=600');
}, false);
document.querySelector('#close').addEventListener('click', function() {
child.close();
}, false);
window.addEventListener('message', function(e) {
document.querySelector('div').innerHTML = e.data;
}, false);
</script>
child.html
<input type="text" value="" placeholder="input something">
<script>
window.addEventListener('beforeunload', function() {
var msg = document.querySelector('input').value;
window.opener.postMessage(msg, '*');
}, false);
</script>
Either you close child window by click its own window's close button, or the button in parent window, the value in child's input will always send to parent and presented.
This is the key approach for one of my side project, and works very well.