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

使用postMessage()。它与事件类似，但是起源于交叉。这几乎是允许来自不同域的两个帧进行通信的唯一方式，因为它必须是双方同意的（必须知道一条消息会传来，一个人会故意发布消息）。

Answer 2

相同的来源政策可以防止您与该网页进行互动。

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

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

2 个答案: