31

我制作了一个页面，该页面在 IFrame 中加载，并且在完成加载后需要在父页面上调用一个函数。

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

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

我控制了两台服务器，所以我是否可以在其中一台或两台服务器上放置一些内容，表明它们可以相互通信？

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

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

header('Access-Control-Allow-Origin: *');

但这些都不起作用。

当我控制两台服务器时，是否有任何方法允许 iframe 在完全不同的域上调用父窗口中的函数？

4

4 回答 4

87

您可以通过消息发布 API在框架之间进行通信。

例如，在您的子框架中，您可能会调用：

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

并在父框架中，注册一个消息处理程序：

window.addEventListener("message", function(event) {
    console.log("Hello from " + event.data);
});
于 2012-10-24T03:47:37.927 回答
4

这里有很多选项：http: //softwareas.com/cross-domain-communication-with-iframes

于 2012-10-24T03:55:31.517 回答
2

使用.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. 使用网络浏览器访问“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]

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

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

于 2013-10-12T10:01:26.623 回答
1

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

于 2012-10-24T03:47:08.510 回答