从 iframe 打开 JQuery UI 对话框，以便当 iframe 来自不同域时它位于顶部窗口中

Question

我想从 iframe 打开一个 JQuery UI 对话框，但我不希望该对话框成为 iframe 的子级。我希望它成为顶部窗口的子窗口。

这个问题一直是asked before，但我觉得这两个答案都不适合我的情况。使我的情况不同的是，我的 iframe 来自与顶部窗口不同的域。它们使用相同的主机，但使用不同的协议。 iframe 在 https 下提供，而顶部窗口在 http 下提供。

---

answer with the most upvotes（@Dmitry）说要使用顶部窗口中的jQuery 对象来打开对话框。像这样：

window.top.jQuery.dialog(...);

这在 iframe 和顶部窗口来自同一个域时有效，但如果不是，则会引发以下错误：

Error: Permission denied to access property 'jQuery'

---

selected answer（@CalebD）建议如下：

移动您的 JavaScript，使其在 父文档。

但它没有详细说明如何实现这一点。我能看到这样做的唯一方法是让 iframe 在顶部窗口的 document 对象上触发一个事件，但是当 iframe 使用与顶部窗口不同的域时，这又会导致错误。

---

我现在的妥协是使用以下代码来获得可用的最高窗口。

var topWindow = (function() {
    var topW = window;
    while (topW.parent != topW.self) {
        try {
            var document = topW.parent.document; // Test
            topW = topW.parent;
        } catch(e) {
            return topW.self;
        }
    }
    return topW.self;
})(),

然后我可以使用：

topWindow.jQuery.dialog(...);

当然，当 iframe 使用不同的域时，对话框是 iframe 的子级，但至少当 iframe 来自同一域时，它可以按照我想要的方式工作。

---

当 iframe 和顶部窗口来自不同域时，有什么方法可以从 iframe 打开一个对话框，使其成为顶部窗口的子窗口？有什么比现在更好的吗？

Answer 1

同源策略使您无法与该页面进行交互。

您需要控制这两个域并使用window.postMessage() 将详细信息从一个页面传递到另一个页面，以了解要做什么。父页面需要监听消息并知道如何打开对话框。

Answer 2

使用postMessage()。它类似于事件，但可以跨域工作。这几乎是允许来自不同域的两个框架进行通信的唯一方式，因为它必须是双方同意的（一个人必须知道消息会来，一个人会故意发布消息）。