3

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

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

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

当用户从 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>

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

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

（导航：取消按钮 -> 页面留言 -> 如果（留在页面然后“无事可做”）如果（离开页面然后） -> 关闭 iFrame）

4

1 回答 1

2

纯 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 版本:)

框架：

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/"
);
于 2012-10-04T12:16:47.390 回答