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

（ナビゲーション：キャンセルボタン->ページを残すメッセージ-> if（ページにとどまるthen'何もしない'）if（ページを離れるthen）-> 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バージョンがあります:)

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