IONIC 5如何从InAppBrowser获取JSON数据并传入应用存储

完全可以实现，核心是借助InAppBrowser提供的注入脚本能力提取页面内容，具体操作步骤如下：

• 第一步：确认依赖已导入
  确保你已经在项目中安装了cordova-plugin-inappbrowser和对应的Ionic Native包装器，在用到的业务组件顶部导入：

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

  同时要在对应模块的providers数组中添加InAppBrowser声明。

• 第二步：创建浏览器实例并监听加载完成事件
  调用create方法打开目标JSON页面，监听loadstop事件，该事件触发时页面内容已经完成加载：

  // 替换为你实际要访问的JSON页面地址
  const targetUrl = 'https://xxx.com/return-json-page';
  const browser = this.iab.create(targetUrl, '_blank', {
    // 不需要展示页面的话可以把hidden设为yes，后台静默加载
    hidden: 'no',
    clearcache: 'yes',
    clearsessioncache: 'yes'
  });
  
  browser.on('loadstop').subscribe(async () => {
    // 页面加载完成后执行脚本提取内容
  });
  

• 第三步：注入脚本提取JSON并存储到项目中
  纯JSON返回的页面内容默认会被浏览器包裹在<pre>标签中，直接提取该标签的文本内容解析即可：

  // 执行注入的JS代码，返回值是执行结果数组
  const scriptResult = await browser.executeScript({
    code: "document.querySelector('pre') ? document.querySelector('pre').innerText : document.body.innerText"
  });
  
  if (scriptResult?.[0]) {
    try {
      // 解析为JSON对象
      const targetJson = JSON.parse(scriptResult[0]);
      // 可根据需求存储到本地存储、全局状态等位置
      // 示例：存到localStorage
      localStorage.setItem('fetchedJson', JSON.stringify(targetJson));
      // 拿到数据后可以主动关闭浏览器窗口
      browser.close();
    } catch (parseErr) {
      console.error('JSON内容解析失败', parseErr);
    }
  }
  

补充说明 #

如果需要更灵活的跨上下文通信，可以用消息回调的方式传输数据：

1. 在注入的JS代码中调用webkit.messageHandlers.cordova_iab.postMessage方法抛出数据
2. 外层通过browser.on('message').subscribe()监听接收数据，该方式更适合多步交互的场景。

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