javascript - 为什么 iframe 不能设置其父级的 location.hash？

Question

我有一个包含 iframe 的窗口，其中包含一个 iframe，如下所示:

+---------------+
|      Top      |
| +-----------+ |
| |   Middle  | |
| | +-------+ | |
| | | Inner | | |
| | +-------+ | |
| +-----------+ |
+---------------+

Top 和 Middle 在同一个域中，但 Inner 在不同的域中。我需要 Inner 与 Top 进行通信。我所知道的在 IE7 中支持(我需要支持)的唯一方法是更改​​窗口位置的哈希值。但是，我不希望信息在地址栏中闪烁，所以我引入了中间的iframe。

我希望 Inner 更改 Middle 的哈希值。 Middle 将读取它的哈希值并通知 Top，它有权直接与 Top 对话。

但是，在 Firefox 3 中，我无法从 Inner 写入 Middle 的哈希。没有出现错误，但散列看起来没有变化。写入其 location.href 会引发权限错误。

Top 可以写入 Middle 的哈希，但是，Middle 可以写入 Inner 的哈希，Top 可以写入 Inner 的哈希，Inner 和 Middle 都可以写入 Top 的哈希，所以唯一的有序对 那行不通的是我想要的! (我已经为此工作了一段时间。)

我已经在一个最小的测试用例中重现了这个。起初，我为同一个域的所有三个页面提供服务。当我将 Inner 放在不同的域时，我会遇到有问题的行为。当我把 Middle 放在第二个域时，每个人都可以再次给每个人写信。

为什么 Inner 不能写入 Middle 的哈希？

---

附录:许多人认为由于同源策略，这不应该是可能的。这正是我试图绕开的政策。这种确切的情况——设置(而不是读取)另一个窗口的位置——应该可以跨域。我还没有找到这方面的浏览器文档，但我找到了很多文章和演示。这本质上是 HTML 5 的 postMessage() 的前身。

引用:http://softwareas.com/cross-domain-communication-with-iframes

Answer 1

父框架可以使用以下方法设置子框架的 iframe 'src' 属性(这里使用 jquery):

$("#iframeWindow").attr('src', "http://<CHILD URL>/#hello");

子 iframe 可以使用以下方式设置父窗口的 href(地址栏内容):

window.top.location.href = "http://<PARENT URL>/#hello"

在 parent 和/或 child 中，您需要轮询更改，

var last = "";
setInterval(function() {
    if(last == window.location.href) return;
    last = window.location.href;

    //do stuff with 'window.location.hash'
}, 1000);

请注意，如果可以的话，那就太好了

window.top.location.href = window.top.location.href + "#hello"

但不允许读取位置对象(href 和 hash)

11 年 11 月 3 日在 chrome、ie6/7/9、firefox 3.6/4 上测试

edit1:如果人们愿意，可以现场演示

编辑2:http://dl.dropboxusercontent.com/u/14376395/html/xdomain.html :)

edit3:注意:如果您使用此方法，请确保您可以控制所有 iframe 页面，否则邪恶的第 3 方网站可能会使用哈希标签控制您的页面

edit4:更好的解决方案 http://ternarylabs.com/2011/03/27/secure-cross-domain-iframe-communication/当前由 Google JavaScript API 使用

edit5: dropbox 域名更改为 'dl.dropboxusercontent.com'