Javascript 如何为iFrame按钮调用windowonunload事件单击父页面和iFrame位于不同域中的位置

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

url来自另一个域（我在不同的域中使用Jquery“POSTMESSAGE”进行通信）

当用户从iFrame单击“取消”按钮时，我需要关闭iFrame，但在此之前，需要显示页面离开消息（即停留在页面上/离开页面-这是在

窗口上调用的alreday。onbeforeuload

）

var-warnNavigateAway=true；
window.onbeforeunload=confirmRowSeaway；
//调用，然后用户离开窗口而不保存内容。
功能确认RowSeaway（）{
如果（警告方向）{
return“如果您离开此页面，您的工作将丢失…”；
}
}
函数documentSaved（）{
warnNavigateAway=false；
}
函数documentDirty（）{
warnNavigateAway=true；
}
取消

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

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

函数GoBack（）
{
var操作类型=“”；
如果（操作类型==“创建”）
{
window.history.back（）；
}
否则{
$.postMessage(
“closeIFrame”，
父URL，
父母亲
);
}
}

（导航：取消按钮->页面离开消息->如果（停留在页面上然后‘无事可做’）如果（离开页面然后）->关闭iFrame）

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

在主机中：

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

---

非常感谢。为jQuery提供的解决方案解决了我的问题，现在它可以正常工作了。一点问题也没有：）你已经有了这个想法，只是为了让它工作而做了一些细微的改变。

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

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

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