可以使用PostMessage API与Android WebView进行通信吗? [英] Can the PostMessage API be used to communicate with an Android WebView?

问题描述

我通常使用HTML5 PostMessage API 来将信息从我的iframed内容传达到父框架.最近，我在Android WebView中使用了我的内容(据我所知，这相当于iframe的本机Android).本地应用程序是否可以监听我发送给他们的PostMessage事件?

I usually use the HTML5 PostMessage API to communicate information from my iframed content to the parent frame. Recently I've had my content used inside an Android WebView (as far as I can tell this is the native-Android equivalent of an iframe). Is there a way for the native app to listen for PostMessage events that I send up to them?

我知道 addJavascriptInterface 存在，我我只是希望有一种方法可以重用我现有的PostMessage代码而无需编写新的东西.

I'm aware that addJavascriptInterface exists, I'm just hoping that there's a way to reuse my existing PostMessage code without writing something new.

推荐答案

我知道这个问题很旧，但是我遇到了，所以我想在这里回答.简而言之-我发现postMessage至少对从子iframe到父窗口的通信有效，但是

I realize this question is old but I ran into it so I figured I would answer here. In short - I am finding that postMessage does work at least for communication from a child iframe to a parent window BUT...

事实证明，我们真的不喜欢iframe在Android的WebView中的表现方式，因此我们改为直接渲染iframe的内容(如您所建议).这给我们带来了两个问题-首先，从iframe到它的父级，我们有很多消息挂钩；其次，我们仍然需要调出android对这些事件做出反应.

Turns out we really didn't like the way the iframe behaved in android's WebView so we rendered the contents of the iframe directly instead (as you suggest). This left us with two problems - first we had lots of messaging hooks from that iframe to it's parent and second we still needed to call out to android to react to these events.

这是我们代码中的示例消息-遍及整个iframe:

Here's an example message from our code - which was sprinkled throughout the iframe:

    parent.postMessage(JSON.stringify({
        action    : 'openModal',
        source    : embedId
    }), '*');

当我们使用Android时，我们想要使用的是

When we're on Android what we want is to use android's support for javascript interfaces to inject an object to handle this request when running in a WebView.

在Android方面，它看起来像这样:

On the Android side this will look something like this:

class JsObject {
   @JavascriptInterface
    public boolean postMessage(String json, String transferList) {
        return false; // here we return true if we handled the post.
    }
}

// And when initializing the webview... 
webView.addJavascriptInterface(new JsObject(), "totDevice");

现在，当在此WebView中运行时，totDevice将存在，而在iframe中运行时将不存在.因此，现在我们可以创建一个包装器来检查这种情况，并在两种方法之间干净地切换，而不是直接调用parent.postMessage.在这里，我们还为我们的Android实现添加了一个布尔型开关，以防您只想处理某些消息:

Now when running inside this WebView totDevice will exist and when running in an iframe it won't. So now we can create a wrapper to check for this condition and cleanly switch between the two methods rather than calling parent.postMessage directly. Here we also added a boolean switch in our Android implementation in case you only wanted to handle some of the messages:

function postMessage(parent, json, transferlist) {
    if (!totDevice || !totDevice.postMessage(json, transferList)) {
        parent.postMessage(json, transferlist);
    }
}

我们上面的原始postMessage可以被重写:

Our original postMessage from above can be rewritten:

    postMessage(parent, JSON.stringify({
        action    : 'openModal',
        source    : embedId
    }), '*');

现在，我们有一组代码可以在iframe或android WebView中运行，而无需更改(至少对代码的这一部分而言).

Now we have a single set of code that can run in an iframe or android WebView with no change (at least to this part of the code).

我希望能对某人有所帮助.

I hope that helps someone.

这篇关于可以使用PostMessage API与Android WebView进行通信吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！