允许子iframe从其他域调用其父窗口上的函数

Question

我创建了一个在IFrame中加载的页面，它需要在完成加载后在父页面上调用一个函数。

它在开发中本地工作（在同一个域上），但在真实世界中，它托管在一个完全不同的域上，所以显然我遇到了跨域问题，即：

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

我控制两台服务器，所以我可以在一台或两台服务器上放一些东西，说它们可以互相通话吗？

我查看了在iframe页面和父页面中设置“document.domain”。

我已尝试设置访问控制标头：

header（'Access-Control-Allow-Origin：*'）;

但这些都不起作用。

当我控制两台服务器时，有没有办法允许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.在SERVER 1上创建名为“iframeContent /”的目录。

B.在该目录中放置一个名为index.php的文件，其中包含：

 <html> <head></head> <body> <script type="text/javascript"> parent.check(); </script> </body> </html>

这是iFrame的内容。 它将调用父项中的函数。

C.在SERVER 2上创建名为“iframeTesting_without-htaccess /”的目录。

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内容位于另一台服务器上（因为在SERVER 1上）。

E.使用Web浏览器访问“PATH-ON-SERVER-2 / iframeTesting_without-htaccess /” - >没有任何反应：iframe无法访问其父级的功能。

这是你如何解决问题

F.在SERVER 2上创建另一个名为“iframeTesting_with-htaccess /”的目录。

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不再直接指向SERVER 1上的内容，而是指向位于同一服务器（SERVER 2）上的中间虚构目录“content-iframe /”。

H.在该目录中放置一个.htaccess文件，其中包含：

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

该文件的作用是将对虚拟目录的任何访问重定向到SERVER 1上的内容。

I.再试一次，使用网络浏览器访问“PATH-ON-SERVER-2 / iframeTesting_with-htaccess /”。 这次它会起作用。 我希望它有所帮助:-)

Answer 4

在现代浏览器中，您可以使用window.postMessage()在不同域上的协作帧之间进行通信。 您不能直接调用函数，但可以在两者之间传递数据或消息。 请参阅MDN上的说明。

允许子iframe从其他域调用其父窗口上的函数

问题描述

4 个解决方案

解决方案1
78 已采纳 2012-10-24 03:47:37

解决方案2
4 2012-10-24 03:55:31

解决方案3
2 2013-10-12 10:01:26

解决方案4
1 2012-10-24 03:47:08

允许子iframe从其他域调用其父窗口上的函数

问题描述

4 个解决方案

解决方案1 78 已采纳 2012-10-24 03:47:37

解决方案2 4 2012-10-24 03:55:31

解决方案3 2 2013-10-12 10:01:26

解决方案4 1 2012-10-24 03:47:08

解决方案1
78 已采纳 2012-10-24 03:47:37

解决方案2
4 2012-10-24 03:55:31

解决方案3
2 2013-10-12 10:01:26

解决方案4
1 2012-10-24 03:47:08