HTML 5 PostMessage的/检测的iFrame加载失败 [英] HTML 5 PostMessage / Detect iFrame Failed To Load

问题描述

我们有一些code，它是利用新的的postMessage 在HTML 5功能来解决跨域通信问题。我试图找到一种方法来检测我是否张贴信息到正确装入其内容的iFrame。如果帧无法正确加载，postMessage的不知道这一点，会很乐意发帖到无​​响应的框架（我假设，因为消息被传递到车架，无论它是否是加载内容）。

We have some code that is making use of the new postMessage functionality in HTML 5 to work around cross-domain communication issues. I'm trying to find a way to detect whether I'm posting messages to an iFrame that loaded its contents correctly. If the frame fails to load correctly, postMessage doesn't know this and will happily post messages into an unresponsive frame (I assume since the messages are being delivered to the frame, regardless of whether or not it's contents loaded).

这是我们的工作流程：

1. 的用户负载 http://www.a.com/specialpage.aspx


2. a.com/specialpage.aspx依次加载一个孩子的iFrame从另一个域它的源设置为一个代理页面，说的 http://www.b.com/lookatmyproxy.htm 作为一个例子。


3. 用户做一些动作，点击一个按钮


4. window.postMessage用来发布消息的子框架，它是（希望）拾起该帧加载代理（b.com/lookatmyproxy.htm）。在接收后，消息被确认，处理和答复张贴回父框架（a.com/specialpage.aspx）。


5. 用户显示他们的行动的结果，每个人都开心。

1. User loads http://www.a.com/specialpage.aspx
2. a.com/specialpage.aspx in turn loads a child iFrame with it's source set to a proxy page from another domain, say http://www.b.com/lookatmyproxy.htm as an example.
3. User does some action, clicks a button
4. window.postMessage is used to post a message to the child frame, where it is (hopefully) picked up by the proxy that the frame loaded (b.com/lookatmyproxy.htm). After it is received, the message is validated, processed, and the reply is posted back to the parent frame (a.com/specialpage.aspx).
5. User is shown the results of their action, everyone is happy.

问题的情况是，如果b.com下跌和代理未能在iFrame中加载，postMessage的将刚刚火，忘记与父框架没有收到任何类型的错误或答复。安全问题和iframe中的性质似乎$ P $从检查帧内容或状态，以找出是否代理正确加载pvent我。我可以把一些超时逻辑的继电器，我们之间的控制a.com和b.com（a.com职位，以a.com/relay~~V，这反过来职位，以b.com/proxy~~V等） ，但似乎过于复杂。

The problem scenario is that if b.com is down and the proxy fails to load inside the iFrame, postMessage will just fire and forget and the parent frame never receives an error or reply of any kind. The security concerns and nature of iframes seem to prevent me from checking the frame contents or status to find out if the proxy loaded correctly. I could put a relay with some timeout logic that we are in control of in between a.com and b.com (a.com posts to a.com/relay, which in turn posts to b.com/proxy, etc.), but that seems overcomplicated.

有我要么检查的iFrame并告诉它的内容正确加载，或检测到的postMessage被输送到其源头未能框架加载的方式？

推荐答案

这不是最干净的答案，但我能解决我的问题。但是我发现了一些旧文档，同时在安全方面不会让你阅读其他帧的信息，你可以调用某些功能。在旧的浏览器这是用来欺骗帧进入设置对方网址片段，并导致行为发生。一个很好的参考是在这里：

It's not the cleanest answer but I was able to fix my problem. What I found was some old documentation that, while security does not let you read info from other frames, you can call some functions. In older browsers this was used to trick frames into setting each other url fragments and causing actions to happen. A good reference is here:

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

由于postMessage的是允许的，我的代理做的第一件事就是发布一个装消息给它的父框架，如果它的存在。代理看起来是这样的：

Since postMessage is allowed, the first thing my proxy does is post a "loaded" message to its parent frame if it exists. The proxy looks something like this:

//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相应的反应来阻止用户操作。这看起来是这样的：

On the other side of things, my pages listen for that message and set a variable when they receive it to show that the proxy loaded correctly. If they never receive the message, all actions assume the proxy is unavailable and the UI reacts accordingly to block user actions. That looks something like this:

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

这篇关于HTML 5 PostMessage的/检测的iFrame加载失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！