javascript - HTML 5 PostMessage/检测 iFrame 加载失败

Question

我们有一些代码正在使用新的 postMessage HTML 5 中用于解决跨域通信问题的功能。我试图找到一种方法来检测我是否将消息发布到正确加载其内容的 iFrame。如果框架无法正确加载，postMessage 不知道这一点，并且会很乐意将消息发布到一个无响应的框架中(我假设是因为消息正在传递到框架，无论它是否加载了内容)。

这是我们的工作流程:

1. 用户负载 http://www.a.com/specialpage.aspx
2. a.com/specialpage.aspx 依次加载子 iFrame，其源设置为来自另一个域的代理页面，例如 http://www.b.com/lookatmyproxy.htm举个例子。
3. 用户做了一些 Action ，点击了一个按钮
4. window.postMessage 用于将消息发布到子框架，它(希望)由框架加载的代理 (b.com/lookatmyproxy.htm) 拾取。收到消息后，将对消息进行验证和处理，并将回复发送回父框架 (a.com/specialpage.aspx)。
5. 向用户显示他们操作的结果，每个人都很高兴。

问题场景是，如果 b.com 关闭并且代理无法加载到 iFrame 中，postMessage 将触发并忘记，父框架永远不会收到任何错误或回复。安全问题和 iframe 的性质似乎阻止我检查框架内容或状态以查明代理是否正确加载。我可以在 a.com 和 b.com 之间放置一个具有我们控制的超时逻辑的中继(a.com 发布到 a.com/relay，后者又发布到 b.com/proxy，等等) ，但这似乎过于复杂。

有没有办法让我检查 iFrame 并判断其内容是否已正确加载，或者检测到 postMessage 正在传送到源加载失败的框架？

Answer 1

这不是最干净的答案，但我能够解决我的问题。我发现的是一些旧文档，虽然安全性不允许您从其他框架读取信息，但您可以调用一些函数。在旧版浏览器中，这用于欺骗框架设置彼此的 url 片段并导致操作发生。这里有一个很好的引用:

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

由于允许 postMessage，我的代理所做的第一件事就是将“已加载”消息发布到其父框架(如果存在)。代理看起来像这样:

//tell the parent that we're functional
var data = '{ "action" : "Loaded" }';
if (parent && parent.frames && parent.frames[0] && parent.frames[0].content) {
    parent.frames[0].content.postMessage(data, '*');
}

window.addEventListener("message", function (e) {
    if (e.domain == undefined) {
        //do something
    }
}, false);

另一方面，我的页面会监听该消息并在收到该消息时设置一个变量以显示代理已正确加载。如果他们从未收到消息，则所有操作都假定代理不可用，并且 UI 会相应地使用react以阻止用户操作。看起来像这样:

$(document).ready(function () {
    window.addEventListener("message", function (e) {
        var args = (e.data && (e.data.length > 0)) ? JSON.parse(e.data) : {};
        if (args.action) {
            if (args.action == 'Loaded') {
                if (typeof ProxyLoaded_success == 'function') {
                    ProxyLoaded_success(args);
                }
            } 
        }
    }, false);
});

var proxyLoaded = false;
function ProxyLoaded_success(args) {
    proxyLoaded = true;
}

function abc() {
    if(proxyLoaded == true) {
        //do something here
    } else {
        alert("proxy didn't load. call support");
    }
}