Capture the Close Event of Popup Window in JavaScript

Capture the close event of popup window in JavaScript

Your example will work as long as the pop-up window url is in the same domain as the parent page, and you change the event to all lowercase:

var new_window = window.open('some url')
new_window.onbeforeunload = function(){ /* my code */ }

How to detect popup window close event

It does not work due to cross domain calls. To get the unload event you need to call a popup instead, which has the wanted url in an iframe.

document.querySelector('#share').onclick = function(){
    var popup = window.open('popup.html', '', "width=400, height=400");

    popup.onbeforeunload = function(){
        console.log('unload');
    }
};

popup.html

<iframe src = 'http://www.facebook.com/sharer/sharer.php?u=http://www.google.com'></iframe>

Is it possible to capture the close event of popup in this case

If you notice, when the popup shows up there is an overlay which covers rest of the elements except the modal. It has id similar to transitionExample-screen . So when you click on this element, the dialog is closed. What you need is to bind the click event on this element. That would be close.

JS:

$(document).on('click', '.close', function (event) {
    $('#transitionExample').popup('open');
});

$(document).on('click', '#transitionExample-screen', function () {
    alert("closing");
});

Demo: http://jsfiddle.net/tdzfhzjy/66/

Instead of id, you can use class if you have multiple popups. For class, just inspect the overlay

Trying to detect browser close event

Have you tried this code?

window.onbeforeunload = function (event) {
    var message = 'Important: Please click on \'Save\' button to leave this page.';
    if (typeof event == 'undefined') {
        event = window.event;
    }
    if (event) {
        event.returnValue = message;
    }
    return message;
};

$(function () {
    $("a").not('#lnkLogOut').click(function () {
        window.onbeforeunload = null;
    });
    $(".btn").click(function () {
        window.onbeforeunload = null;
});
});

The second function is optional to avoid prompting while clicking on #lnkLogOut and .btn elements.

One more thing, The custom Prompt will not work in Firefox (even in latest version also). For more details about it, please go to this thread.

Identifying X close event of a popup window using javascript

Something like this perhaps:

var MyPopup = {

  _win : null,

  _userClosingWindow : true,

  open : function() {
    var _this = this;
    this._win = window.open(...);
    this._win.onbeforeunload = function() {
      if( _this._userClosingWindow ) {
         // closed by user
      }
      else {
        // closed in code
      }
    };
  },

  close : function() {
    this._userClosingWindow = false;
    this._win.close();
  }

};

Then you can use MyPopup.open() and MyPopup.close() and still know when the close function is called or when the popup is closed by the user.

How to capture the browser window close event?

The beforeunload event fires whenever the user leaves your page for any reason.

For example, it will be fired if the user submits a form, clicks a link, closes the window (or tab), or goes to a new page using the address bar, search box, or a bookmark.

You could exclude form submissions and hyperlinks (except from other frames) with the following code:

var inFormOrLink;
$('a').on('click', function() { inFormOrLink = true; });
$('form').on('submit', function() { inFormOrLink = true; });

$(window).on("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
})

For jQuery versions older than 1.7, try this:

var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });

$(window).bind("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
})

The live method doesn't work with the submit event, so if you add a new form, you'll need to bind the handler to it as well.

Note that if a different event handler cancels the submit or navigation, you will lose the confirmation prompt if the window is actually closed later. You could fix that by recording the time in the submit and click events, and checking if the beforeunload happens more than a couple of seconds later.

---

Related Topics