Javascript 无法加载HTML 5 PostMessage/Detect iFrame

我们有一些代码利用HTML5中的新功能来解决跨域通信问题。我正试图找到一种方法来检测我是否将消息发布到一个正确加载其内容的iFrame。如果框架无法正确加载，postMessage不知道这一点，并且会很高兴地将消息发布到无响应的框架中（我假设消息正在传递到框架，而不管是否加载了内容）

这是我们的工作流程：

用户负载

a、 com/specialpage.aspx依次从另一个域加载一个子iFrame，并将其源设置为代理页面，例如

用户执行一些操作，单击一个按钮

window.postMessage用于将消息发布到子框架，在子框架中，它（希望）由框架加载的代理（b.com/lookatmyproxy.htm）拾取。收到消息后，将对消息进行验证、处理，并将回复发回父帧（a.com/specialpage.aspx）

用户看到他们的行动结果，大家都很高兴

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

---

我有没有办法检查iFrame并告诉它的内容加载是否正确，或者检测postMessage是否正在发送到源代码加载失败的帧？

这不是最清晰的答案，但我能够解决我的问题。我发现的是一些旧文档，虽然安全性不允许您从其他帧读取信息，但您可以调用一些函数。在较旧的浏览器中，这被用来欺骗帧，使其相互设置url片段并导致动作发生。这里有一个很好的参考：

由于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);

$(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");
    }
}

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

//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);

$(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");
    }
}