How to detect the window(new tab) close event?

Question

I have one parent page and child page. the child page opened in new tab

I want to show one alert message (The child page is closing), when i close

Answer 1

You might not be able to do that other than some cookie based methods which is development work arounds like non persistent cookies. Second identifying a page refresh, form based redirect, or back redirect or browser close unload event identification is not direct and is tedious. Recommend not to depend on it.

you can do some small things before the customer closes the tab. javascript detect browser close tab/close browser but if your list of actions are big and the tab closes before it is finished you are helpless. You can try it but with my experience donot depend on it. Yes, you cannot at this time differentiate back and refresh and close. So no foolproof way of saying whether the child has definitely closed.

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";
  /* Do you small action code here */
  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/beforeunload?redirectlocale=en-US&redirectslug=DOM/Mozilla_event_reference/beforeunload

Answer 2

There is afaik never been a cross browser script for this. The solution is to NOT rely on undocumented and changeable features of a specific browser to detect something that is important.

Since you have a CHILD page, you can set up a test in the parent (opener) that at intervals test the childWindowHandle.closed property and acts on that.

Answer 3

Does the script from http://chrismckee.co.uk/good-sir-before-you-unload-crossbrowser-javascript-headaches/ work?

Assuming your just trying to fire beforeunload event crossbrowser, this pretty much does it ( excluding opera )

try{
    // http://www.opera.com/support/kb/view/827/
    opera.setOverrideHistoryNavigationMode('compatible');
    history.navigationMode = 'compatible';
}catch(e){}

//Our Where The F' Are You Going Message
function ReturnMessage()
{
    return "WTF!!!";
}

//UnBind Function
function UnBindWindow()
{
    window.onbeforeunload = null;
    return true;
}

//Bind Links we dont want to affect
document.getElementById('homebtn').onclick = UnBindWindow;
document.getElementById('googlebtn').onclick = UnBindWindow;

//Bind Exit Message Dialogue
window.onbeforeunload = ReturnMessage;

Answer 4

There is an example in Mozilla Devloper site which basically says check for browser type and use the below check accordingly.Hope this helps.