允许孩子iframe来从不同的域调用它的父窗口上的功能(Allowing a child Ifram

我做了它获取的iframe中加载的页面，它需要调用一个函数父页面上加载完成后。

它的工作原理在本地发展（在同一个域），但在现实世界中，托管在一个完全不同的领域，所以很明显我遇到了跨域的问题，即：

从框架// [...] site1.com与URL HTTP：不安全的JavaScript尝试与URL HTTP访问框架// [...] site2.com/iframe。域，协议和端口必须匹配。

我同时控制服务器，所以有可能是我把东西一台或两台服务器的，说他们不允许互相交谈？

我已经看过在iFrame网页和父页面设置“document.domain的”。

我已经尝试设置访问控制首：

头（“访问控制允许来源：*”）;

但无论这些工作。

是否有允许的iframe调用父窗口的功能上完全不同的域时，我同时控制服务器的方法吗？

Answer 1:

您可以通过帧之间沟通的消息发布API 。

例如，你的孩子帧可以称之为：

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

和在父帧中，注册消息处理程序：

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

Answer 2:

有许多的选择这里： http://softwareas.com/cross-domain-communication-with-iframes

Answer 3:

这个问题可以通过使用的.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.将在该目录中的文件名为index.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的内容位于另一台服务器上（因为服务器1）。

E.访问 “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已不直接指向内容服务器1上而是与中间假想目录“内容的iframe /”位于相同的服务器（服务器2）上。

H.将在该目录中的.htaccess文件：

 Options +FollowSymLinks RewriteEngine On RewriteBase / RewriteRule ^content-iframe/$ PATH-ON-SERVER-1/iframeContent/ [R,NC,P]

该文件的作用是任何接入到虚拟目录的内容重定向服务器1。

一，再试一次，获得 “PATH-ON-SERVER-2 / iframeTesting_with-htaccess的/” 用网页浏览器。这一次，它会奏效。我希望这有助于:-)

Answer 4:

在现代浏览器，你可以使用window.postMessage()在不同的领域合作框架之间进行通信。您不能直接调用函数，但你可以在二者之间传递数据或消息。见的MDN说明。

文章来源: Allowing a child Iframe to call a function on its parent window from a different domain