如何将 postMessage 与 ionic 应用内浏览器插件一起使用？答案

【问题标题】：How to use postMessage with the ionic in-app-browser plugin?如何将 postMessage 与 ionic 应用内浏览器插件一起使用？
【发布时间】：2019-11-13 22:08:16
【问题描述】：

由于Cordova in-app-browser模块的版本为3.1.0-dev，看来我们可以通过以下方式使用postMessage API：

webkit.messageHandlers.cordova_iab.postMessage(stringifiedMessageObj);

但是，经过长时间的搜索，我没有成功使它起作用。它总是默默地失败。此外，webkit 对象不存在...正如this 问题中所建议的，我提交了一个有效的 JSON 字符串。请在下面找到我的 package.json 文件的摘录：

{
  "dependencies": {
     "@angular/core": "~8.1.2",
     "@ionic-native/core": "^5.16.0",
     "@ionic-native/in-app-browser": "^5.16.0",
     "cordova-plugin-inappbrowser": "git+https://github.com/apache/cordova-plugin-inappbrowser.git"
   }
}

我使用npm list –depth=0 检查了cordova 应用程序浏览器版本，并安装了3.1.1-dev。你们有什么想法吗？如果您需要更多信息，请不要犹豫。 :-)

编辑：我想将数据从 iframe 发送到我的“主线程”。为此，我使用了在 iframe 中注入脚本的 executeScript 方法。但可悲的是，我没有 webkit 对象。

this.ref = this.iab.create("https://google.com", "_blank", "EnableViewPortScale=yes,location=no,hidden=false");
this.ref.on('loadstop').subscribe(event => {
  this.ref.executeScript({
                code: 'webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify({foo:"bar"});'
            });
});

【问题讨论】：

你想向 iframe 发送数据吗？您正在应用中加载的内容
感谢您的回答。我同意这不是很清楚。我对此添加了一个小解释。我想将一些数据从 iframe 发送到我的“主线程”。

标签： cordova ionic-framework iframe inappbrowser postmessage

【解决方案1】：

当我测试我的应用程序时，我使用了命令ionic serve --devapp，并在我的 Android 手机上使用了应用程序 Ionic DevApp。因此，它看起来不是真正的 Android 原生应用。我引用cordova inappbrowser git repo：

浏览器怪癖不会触发 loadstart、loaderror、message 事件。

我在笔记本电脑上安装了一个 Android 模拟器，并成功地将 postMessage 从“iframe”传输到“主线程”。

【讨论】：