如何为iFrame按钮单击调用window onunload事件，父页面和iFrame位于不同的域中

我有一个打开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; } 
 Cancel  

我如何调用留言的同一页面，这样我就可以在用户点击留言信息时关闭iFrame。

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

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

Answer 1

纯粹的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和按钮。

 Cancel 

和

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