如何将InAppBrowser中获取的值返回至Ionic应用

实现方案 #

你需要用InAppBrowser内置的跨上下文消息通信机制来实现值的传递，步骤如下：

1. Ionic侧绑定消息监听事件 #

在初始化InAppBrowser实例后，监听message事件，接收从网页侧传回的数据：

// 保留你原有初始化browser的逻辑
const browser = this.inAppBrowser.create('目标页面URL', '_blank');

// 新增消息监听
browser.on('message').subscribe(event => {
  // event.data即为从网页上下文传回的隐藏字段值
  const hiddenValue = event.data;
  // 此处可直接在Ionic业务逻辑中使用该值
  console.log('获取到隐藏字段值：', hiddenValue);
});

2. 修改注入的JS代码，点击时发送数据 #

修改executeScript的注入代码，在拿到隐藏字段值后调用InAppBrowser内置的消息发送接口，将值传回Ionic侧：

browser.executeScript({
  code: `
    document.getElementById('BtnSubmit').addEventListener('click', function() {
      const result = document.getElementById('myInput').value;
      // 调用内置接口发送数据到Ionic上下文
      webkit.messageHandlers.cordova_iab.postMessage(result);
    });
  `
});

注意：建议将上述executeScript逻辑放到loadstop事件回调中执行，避免页面未加载完成时找不到对应DOM元素：

browser.on('loadstop').subscribe(() => {
  // 此处放置executeScript逻辑
});

如果需要传递复杂对象，可在发送时用JSON.stringify()序列化，接收时用JSON.parse()反序列化即可。

内容的提问来源于stack exchange，提问作者Muthuraja