Question

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

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

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

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

我已经在Iframe页面和父页面中设置了“document.domain”。

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

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

但这些都不起作用。

当我控制两台服务器时，有没有办法让Iframe在完全不同的域上的父窗口中调用一个函数？

Answer 1

您可以通过message posting 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 重写可以轻松解决此问题。

演示：

一个。创建一个名为＆＃34; iframeContent /＆＃34;的目录。在服务器1上。

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

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

<script type="text/javascript">

    parent.check();

</script>

</body> 
</html>

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

℃。创建一个名为＆＃34; iframeTesting_without-htaccess /＆＃34;的目录。在SERVER 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内容位于另一台服务器上（因为在SERVER 1上）。

电子。访问＆＃34; PATH-ON-SERVER-2 / iframeTesting_without-htaccess /＆＃34;使用网络浏览器 - ＆gt;没有任何反应：iframe无法访问其父级的功能。

以下是您如何解决问题

F。创建另一个名为＆＃34; iframeTesting_with-htaccess /＆＃34;在SERVER 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不再直接指向SERVER 1上的内容，而是指向中间虚构目录＆＃34; content-iframe /＆＃34;位于同一服务器（SERVER 2）上。

小时。在该目录中放置一个包含以下内容的.htaccess文件：

Options +FollowSymLinks
RewriteEngine On

RewriteBase /

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

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

予。再试一次，访问＆＃34; PATH-ON-SERVER-2 / iframeTesting_with-htaccess /＆＃34;使用网络浏览器。这次它会起作用。我希望它有所帮助： - ）

Answer 4

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

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

4 个答案: