javascript - 可以使用 PostMessage API 与 Android WebView 进行通信吗？

Question

我通常使用 HTML5 PostMessage API将信息从我的 iframed 内容传达给父框架。最近，我在 Android WebView 中使用了我的内容(据我所知，这是 iframe 的原生 Android 等效项)。 native 应用程序是否可以监听我发送给它们的 PostMessage 事件？

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

Answer 1

我意识到这个问题很老，但我遇到了它，所以我想我会在这里回答。简而言之 - 我发现 postMessage 至少对于从子 iframe 到父窗口的通信确实有效，但是......

事实证明，我们真的不喜欢 iframe 在 android 的 WebView 中的行为方式，因此我们直接渲染了 iframe 的内容(如您所建议的那样)。这给我们留下了两个问题——首先我们有很多从 iframe 到它的父级的消息 Hook ，其次我们仍然需要调用 android 来对这些事件使用react。

这是来 self 们代码的示例消息 - 散布在整个 iframe 中:

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

当我们使用 Android 时，我们想要使用 android's support for javascript interfaces在 WebView 中运行时注入(inject)一个对象来处理此请求。

在 Android 端，这看起来像这样:

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 实现中添加了一个 bool 开关，以防您只想处理一些消息:

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

上面我们原来的postMessage可以改写:

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

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

我希望对某人有所帮助。