如何调用iframe的按钮窗口onunload事件中单击其中父页面和iframe驻留在不同的领域(h

我有按钮，打开一个iFrame（驻留在域说“XYZ”）的IFRAME加载它驻留在另一个域的页面（说“LMN”）

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

URL是从另一个域（I在不同的域中进行通信用jQuery“PostMessage的”）

当用户点击来自iFrame的取消按钮我需要关闭的iFrame但在此之前，有必要来显示网页留下消息（即留页/离开页面上-这是alreday呼吁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>

我如何调用同一页面离开的消息，这样，当用户点击页面离开我的消息可关闭的iFrame。

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

（导航：取消按钮 - >页假消息 - >如果（留页，然后“无关”），如果（离开的话页） - >关闭内嵌框架）

纯JavaScript

因为它似乎你有两个域代码的控制 - 尽管它们是在不同的主机 - 你应该能够使用从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/');
  }
}

然后在主机框架以下内容：

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);
}

（上面的代码已被手动输入，误差是可能的，它是指作为说明性示例）

通过以上你需要稍微修改您的标记，对于iframe和该按钮。

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

和

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

jQuery的

因为我没有你使用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/' ) 
  }
});

在主机：

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