how to call window onunload event for iFrame button click where parent page and iFrame resides in different domain

Question

I have button which opens an iFrame (which reside in domain say 'xyz') the iFrame loads the page which resides in another domain (say 'lmn')

$("#templateSelectionFrame").get(0).contentWindow.location.href = url;

url is from another domain (I communicate in different domain with Jquery 'POSTMESSAGE')

when user clicks cancel button from iFrame i need to close the iFrame but before that it is necessary to show the page leaving message (ie. stay on page / leave page - this is alreday called on window.onbeforeunload).

var warnNavigateAway = true;

window.onbeforeunload = confirmBrowseAway;

// Called then user leave window without saving content.
function confirmBrowseAway() {
    if (warnNavigateAway) {
        return "If you leave this page, your work will be lost ...";
    }
}

function documentSaved() {
   warnNavigateAway = false;
}

function documentDirty() {
   warnNavigateAway = true;
}


<div id="bottomBar">
   <button class="cancelBtn" onclick="GoBack()">Cancel</button>
</div>

how do i call the same page leaving message so that i can close the iFrame when user clicks leave page message.

function GoBack() 
{
   var operationType = '<%: (Model.OperationType)%>';
   if (operationType == "Create")
   {
      window.history.back();
   }
   else {     
      $.postMessage(
         'closeIFrame',
         parentUrl,
         parent
      );
   }
}

(navigation: cancel button -> page leave message -> if(stay on page then 'nothing to do') if(leave page then ) -> close the iFrame)

Pure javascript

As it seems you have control of the code in both domains - despite them being on different hosts - you should be able to use the following from within the iframe:

var warnNavigateAway = true;

var confirmBrowseAway = function(){
  /// if warn is enabled, then ask the user. otherwise assume "browse away"
  var v = ( 
    warnNavigateAway
    ? 
    /// use the built-in confirm dialog to notify the user, this will also 
    /// halt execution - meaning the page close is prevented until an 
    /// answer is given.
    confirm('If you leave this page, your work will be lost ...')
    :
    true
  );
  if ( v ) {
    /// disable the warn just in case our deleting of the 
    /// iframe triggers the onunload
    warnNavigateAway = false;
  }
  return v;
}

/// i've kept the use of "onevent" handlers as in your example, but you 
/// should use addEventListener and attachEvent in the same way as I have  
/// for the second part of the code in the outer frame.

/// apply as a listener in case the user navigates without using the button
window.onbeforeunload = confirmBrowseAway;
/// apply the same method for the onclick of the button
document.getElementById('cancelButton').onclick = function(){
  if ( confirmBrowseAway() ) {
    window.parent.postMessage('close_iframe', 'http://xyz/');
  }
}

and the following in the host frame:

var messageListener = function(e){
  if ( e.origin !== "http://lmn/" ) {
    return;
  }
  if ( e.data == 'close_iframe' ) {
    /// however you prefer to close your iframe
    document.getElementById('myIframe').style.display = 'none';
    /// or removal...
    document.getElementById('myIframe').parentNode.removeChild(
      document.getElementById('myIframe')
    );
  }
};

if ( window.addEventListener ) {
  window.addEventListener("message", messageListener, false);
}
else if( window.attachEvent ) {
  window.attachEvent("onmessage", messageListener);
}

(The above code has been manually typed, errors may be possible, it is meant as an illustrative example)

With the above you'll need modify your markup slightly, for the iframe and for the button.

<button id="cancelButton" class="cancelBtn">Cancel</button>

and

<iframe id="myIframe" ... />

jQuery

Because I failed to spot you were using jQuery here is a jQuery version :)

iframe:

var warnNavigateAway = true;

var confirmBrowseAway = function(){
  /// if warn is enabled, then ask the user. otherwise assume "browse away"
  var v = ( 
    warnNavigateAway
    ? 
    /// use the built-in confirm dialog to notify the user, this will also 
    /// halt execution - meaning the page close is prevented until an 
    /// answer is given.
    confirm('If you leave this page, your work will be lost ...')
    :
    true
  );
  if ( v ) {
    /// disable the warn just in case our deleting of the 
    /// iframe triggers the onunload
    warnNavigateAway = false;
  }
  return v;
}

$(window).bind('beforeunload', confirmBrowseAway);
$('.cancelBtn').bind('click', function(){
  if ( confirmBrowseAway() ) {
    $.postMessage( 'close_iframe', 'http://xyz/' ) 
  }
});

in the host:

$.receiveMessage(
  function(e){
    if ( e.data == 'close_iframe' ) {
      /// however you prefer to close your iframe
      $('.myIframe').hide();
      /// or removal...
      $('.myIframe').remove();
    }
  },
  "http://lmn/"
);

Comments

[Uttam]

thank you very much.The solution given for jQuery solved my problem , now it works fine.

[Pebbl]

no problem at all :) you pretty much had the idea already, it was just subtle changes to get it working.