如何从InAppBrowser向离子应用返回值

从InAppBrowser向离子应用返回值的方法是使用回调函数和事件监听。

在InAppBrowser中打开的网页可以通过JavaScript代码调用Cordova插件提供的方法将数据传递回离子应用。

以下是具体步骤：

在离子应用中，首先需要安装cordova-plugin-inappbrowser插件。使用以下命令安装：

ionic cordova plugin add cordova-plugin-inappbrowser

在离子应用的页面中，创建一个按钮或者其他交互元素，在点击时打开InAppBrowser，并传递一个回调函数的名称作为参数。示例代码如下：

import { InAppBrowser, InAppBrowserObject } from '@ionic-native/in-app-browser/ngx';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private platform: Platform, private inAppBrowser: InAppBrowser) {}

  openInAppBrowser() {
    const browser: InAppBrowserObject = this.inAppBrowser.create('https://example.com', '_blank');
    browser.on('loadstop').subscribe(() => {
      // 在InAppBrowser中加载完成后执行的代码
      browser.executeScript({ code: `
        // 在InAppBrowser中执行的JavaScript代码
        function sendDataBackToApp() {
          // 将数据传递给离子应用
          const data = '返回的数据';
          window.location.href = 'callback://?data=' + encodeURIComponent(data);
        }
      `}).then(() => {
        // 在InAppBrowser中执行的代码执行成功后，绑定按钮的点击事件
        browser.executeScript({ code: `
          document.getElementById('myButton').addEventListener('click', function() {
            sendDataBackToApp();
          });
        `});
      });
    });
  }
}

在InAppBrowser中，监听页面加载完成的事件loadstop，在事件的回调函数中执行JavaScript代码。JavaScript代码中定义了一个名为sendDataBackToApp的函数，用于将数据传递给离子应用。此处的数据可以根据实际情况进行修改。
在回调函数sendDataBackToApp中，通过调用window.location.href方法将数据传递给离子应用。传递的数据通过自定义的协议（如callback://）以及参数进行传递。参数需要使用encodeURIComponent进行编码，以防止特殊字符导致的问题。
在离子应用中，监听浏览器的回调链接地址，获取InAppBrowser返回的数据。在InAppBrowser的loadstart事件中，通过判断链接地址是否以自定义的协议开头，以及包含预定义的参数，来判断是否是回调链接。示例代码如下：

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private platform: Platform, private router: Router, private activatedRoute: ActivatedRoute) {
    this.platform.ready().then(() => {
      this.activatedRoute.queryParams.subscribe(params => {
        const data = params['data'];
        if (data) {
          // 处理返回的数据
          console.log('返回的数据:', decodeURIComponent(data));
        }
      });
    });
  }
}