Ionic In-App-Browser自定义事件接收实现技术问询

你提的需求完全可行！InAppBrowser不仅支持loadstart、loadstop、loaderror、exit这些内置事件，还允许网页端向Ionic应用发送自定义事件，你的代码思路本身是没问题的。

一、先确认你的Ionic端代码（优化版） #

你的订阅逻辑是对的，这里可以稍微优化下写法，避免使用that（用箭头函数就能保留上下文）：

this.browser.on('buttonOnWebSitePressed').subscribe(event => {
  this.browser.hide();
  // 如果需要接收网页传的额外数据，还可以打印event.data
  // console.log('网页传递的数据:', event.data);
});

二、网页端触发自定义事件的方法 #

网页端需要通过window.parent.postMessage()来发送消息，InAppBrowser会自动把这个消息转换成对应的自定义事件，传递给你的Ionic应用。具体实现如下：

1. 网页端按钮点击事件中发送自定义消息：

// 假设网页上有个id为"web-button"的按钮
document.getElementById('web-button').addEventListener('click', () => {
  // 发送自定义事件，第一个参数是事件内容，第二个参数是目标域名（生产环境建议指定你的应用域名，不要用*）
  window.parent.postMessage(
    {
      event: 'buttonOnWebSitePressed', // 必须和Ionic端订阅的事件名一致
      data: { // 可选：可以附带任意可序列化的额外数据
        buttonId: 'web-button',
        timestamp: Date.now()
      }
    },
    '*' // 测试阶段用*，生产环境替换成你的Ionic应用域名，比如"https://yourapp.com"
  );
});

2. 关键注意点：

• 生产环境中，postMessage的第二个参数一定要指定具体域名，不要用*，避免跨域安全风险。
• 传递的数据必须是可序列化的（比如对象、字符串、数字，不能传函数或DOM元素）。

三、补充：接收网页端的额外数据 #

如果网页端传递了data字段，你可以在Ionic的订阅回调里直接获取：

this.browser.on('buttonOnWebSitePressed').subscribe(event => {
  console.log('网页按钮点击时间:', event.data.timestamp);
  this.browser.hide();
});

总结一下：自定义事件是InAppBrowser支持的功能，只要网页端按上述方式用postMessage发送指定格式的消息，Ionic端就能通过on('自定义事件名')成功订阅并响应。

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