如何为iFrame按钮单击调用window onunload事件，父页面和iFrame位于不同的域中 [英] how to call window onunload event for iFrame button click where parent page and iFrame resides in different domain

问题描述

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

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来自另一个域（我在不同的域中与Jquery'POSTMESSAGE'进行通信）

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

当用户点击iFrame的取消按钮时我需要关闭iFrame但在此之前有必要显示页面留言（即留在页面上/离开页面 - 这是在 window.onbeforeunload 上调用alreday。

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>

如何拨打同一页面留言，以便我可以在用户点击离开页面时关闭iFrame消息。

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

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

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

推荐答案

纯javascript

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

（以上代码已手动输入，可能有错误，它是一个说明性的例子）

使用上面的内容，你需要稍微修改你的标记，iframe和按钮。

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

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

和

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

jQuery

因为我没有发现你在这里使用jQuery是一个jQuery版本：）

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

：

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

这篇关于如何为iFrame按钮单击调用window onunload事件，父页面和iFrame位于不同的域中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！