javascript 如何为 iFrame 按钮调用窗口 onunload 事件单击父页面和 iFrame 驻留在不同域中的位置

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

提问by Uttam

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')

我有按钮可以打开 iFrame （位于域中，例如“xyz”），iFrame 加载位于另一个域中的页面（例如“lmn”）

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

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

url 来自另一个域（我在不同的域中与 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).

当用户点击 iFrame 中的取消按钮时，我需要关闭 iFrame，但在此之前必须显示页面留下消息（即留在页面/离开页面 - 这已经被调用了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.

我如何调用相同的页面留下消息，以便在用户单击离开页面消息时关闭 iFrame。

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)

（导航：取消按钮 -> 页面留言 -> if（停留在页面然后'无事可做'） if（离开页面然后） -> 关闭 iFrame）

回答by Pebbl

Pure javascript

纯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:

由于您似乎可以控制两个域中的代码 - 尽管它们位于不同的主机上 - 您应该能够在 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.

有了上面的内容，您需要为 iframe 和按钮稍微修改您的标记。

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

and

和

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

jQuery

jQuery

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

因为我没有发现你在使用 jQuery，这里是一个 jQuery 版本:)

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/"
);