允許子Iframe從其他域調用其父窗口上的函數

我製作了一個頁面，該頁面被加載到IFrame中，並且在完成加載後需要在父頁面上調用一個函數。允許子Iframe從其他域調用其父窗口上的函數

它在發展本地工作（在同一個域），但在現實世界中，託管在一個完全不同的領域，所以很明顯我遇到了跨域的問題，即：

不安全的JavaScript嘗試訪問從URL http：// [...] site2.com/iframe來自框架的URL http：// [...] site1.com。域，協議和端口必須匹配。

我控制着兩臺服務器，所以我可以在一臺服務器上或兩臺服務器上放一些可以相互通話的服務器嗎？

我已經看過在iframe頁面和父頁面中設置「document.domain」。

我已經試驗了設置訪問控制報頭：

頭（「訪問控制允許來源：*」）;

但都沒有工作。

當我控制兩臺服務器時，是否有任何方法允許Iframe在父窗口中調用完全不同域上的函數？

來源

2012-10-24 Brett

This [post]（http://stackoverflow.com/questions/5477324/iframe-calling-parent-javascript）提供了一個非常簡單的解決方案。 – craned

您可以通過message posting API在幀之間進行通信。

例如，在你的孩子框架，你可以稱之爲：

parent.postMessage("child frame", "*");

而在父框架，註冊一個消息處理程序：

window.addEventListener("message", function(event) { 
    console.log("Hello from " + event.data); 
});

來源

2012-10-24 03:47:37 dfreeman

在現代瀏覽器中，您可以使用在不同域上的協作幀之間進行通信。您不能直接調用函數，但可以在兩者之間傳遞數據或消息。請參閱description on MDN。

來源

2012-10-24 03:47:08 jfriend00

有許多的選擇這裏：http://softwareas.com/cross-domain-communication-with-iframes

來源

2012-10-24 03:55:31 iivel

通過使用.htaccess重寫可以輕鬆解決此問題。

演示：

A.創建在該目錄中名爲「iframeContent /」關於服務器1.

B.將一個目錄中的文件名爲index.php文件包含：

<html> 
<head></head> 
<body> 

<script type="text/javascript"> 

    parent.check(); 

</script> 

</body> 
</html>

這是iFrame的內容。它會在父級調用一個函數。

C.在該目錄下一個名爲索引文件在服務器上創建一個名爲「iframeTesting_without-htaccess的/」目錄2.

D.廣場。含有PHP：

<html> 
<head></head> 
<body> 

<script type="text/javascript"> 

    function check() { 

     alert("hello"); 

    } 

</script> 

<iframe id="sidebnrId" name="sidebnr" 
src="PATH-ON-SERVER-1/iframeContent/" frameborder="0" 
height="500px" width="600px" scrolling="no"></iframe> 

</script> 

</body> 
</html>

這簡直是父窗口的內容。請注意，iFrame內容位於另一臺服務器上（因爲在SERVER 1上）。 E.使用Web瀏覽器訪問「PATH-ON-SERVER-2/iframeTesting_without-htaccess /」 - >沒有任何反應：iframe無法訪問其父項的功能。

這裏是你如何能解決問題

F.創建一個名爲「iframeTesting_with-htaccess的/」在服務器2

G.將在該目錄中的另一個目錄中的index.php文件名爲包含：

<html> 
<head></head> 
<body> 

<script type="text/javascript"> 

    function check() { 

     alert("hello"); 

    } 

</script> 

<iframe id="sidebnrId" name="sidebnr" 
src="content-iframe/" frameborder="0" 
height="500px" width="600px" scrolling="no"></iframe> 

</script> 

</body> 
</html>

這一次的iFrame已經不直接指向CON帳號在SERVER 1上，但是位於同一臺服務器（服務器2）上的中間虛構目錄「content-iframe /」。

H.將在該目錄中的.htaccess文件：

Options +FollowSymLinks 
RewriteEngine On 

RewriteBase/

RewriteRule ^content-iframe/$ PATH-ON-SERVER-1/iframeContent/ [R,NC,P]

該文件的作用是任何接入到虛擬目錄的內容重定向服務器1.

I.重試，使用網絡瀏覽器訪問「PATH-ON-SERVER-2/iframeTesting_with-htaccess /」。這一次它會起作用。我希望它可以幫助:-)

來源

2013-10-12 10:01:26 Gilbou

允許子Iframe從其他域調用其父窗口上的函數

回答

相關問題