Ionic 4/5中使用In-app-browser插件提交外部网页表单数据问题

嘿，我来帮你搞定这个In-app-browser提交表单的问题！其实In-app-browser完全可以用来向外部网页提交数据，包括带输入内容的表单，你原来的思路是对的，但有几个小坑导致代码跑不起来，我给你拆解修正并给出完整方案。

核心思路 #

用In-app-browser加载一个我们自己生成的本地HTML页面，在这个页面里嵌入表单——要么自动触发提交（适合隐藏字段的场景），要么让用户手动填完再提交，就能把数据发送到外部目标URL了。

先搞定你原来的自动提交隐藏表单需求 #

你的代码主要问题是没加自动提交逻辑，而且转义字符处理得有点绕。下面是修复后的完整代码：

首先确保你已经正确安装了插件：

# 安装cordova插件和ionic-native封装
ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

然后在你的页面组件里这样写：

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

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

  constructor(private iab: InAppBrowser) {}

  autoSubmitForm() {
    // 直接写正常的HTML标签，不用转义，代码更清晰
    const formHtml = `
      <html>
        <!-- 页面加载完成后自动提交表单 -->
        <body onload="document.getElementById('hiddenForm').submit()">
          <form id="hiddenForm" action="https://你的外部提交地址.com/submit" method="post">
            <input type="hidden" name="test" value="123">
            <!-- 可以添加更多隐藏字段 -->
            <input type="hidden" name="user_id" value="1001">
            <input type="hidden" name="source" value="ionic-app">
          </form>
        </body>
      </html>
    `;

    // 正确编码HTML内容为base64，确保特殊字符和中文能正常处理
    const encodedHtml = btoa(unescape(encodeURIComponent(formHtml)));
    const dataUrl = `data:text/html;base64,${encodedHtml}`;

    // 打开In-app-browser，配置显示地址栏方便调试
    const browser = this.iab.create(dataUrl, '_blank', {
      location: 'yes',
      zoom: 'no',
      hardwareback: 'yes'
    });

    // 可选：监听浏览器事件，比如加载完成或关闭
    browser.on('loadstop').subscribe(() => {
      console.log('表单页面加载完成，已自动提交');
    });

    browser.on('exit').subscribe(() => {
      console.log('用户关闭了浏览器');
    });
  }
}

关键修复点 #

• 给<body>加了onload事件，页面一加载就自动提交表单，解决了原来只显示表单不提交的问题。
• 去掉了不必要的HTML转义字符（比如<换成<），代码更易读，也避免了编码错误。
• 保留了可靠的base64编码方式，确保特殊字符、中文都能正确传递。

如果需要用户手动输入数据后提交 #

要是你需要让用户填写内容再提交，也可以生成一个带交互的表单页面，示例代码如下：

userInputSubmit() {
  const interactiveFormHtml = `
    <html>
      <body>
        <div style="padding: 20px; font-family: Arial;">
          <h3>请填写提交信息</h3>
          <form id="userForm" action="https://你的外部提交地址.com/submit" method="post">
            <div style="margin: 15px 0;">
              <label>用户名:</label>
              <input type="text" name="username" required style="width: 100%; padding: 8px; margin-top: 5px;">
            </div>
            <div style="margin: 15px 0;">
              <label>邮箱:</label>
              <input type="email" name="email" required style="width: 100%; padding: 8px; margin-top: 5px;">
            </div>
            <button type="submit" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px;">提交</button>
          </form>
        </div>
      </body>
    </html>
  `;

  const encodedHtml = btoa(unescape(encodeURIComponent(interactiveFormHtml)));
  const dataUrl = `data:text/html;base64,${encodedHtml}`;

  this.iab.create(dataUrl, '_blank', { location: 'yes' });
}

一些注意事项 #

• 确保你的外部目标URL支持POST请求，并且允许表单提交（大部分服务器默认支持，不用太担心跨域问题，因为这是传统表单提交而非AJAX请求）。
• 调试时打开location: 'yes'，可以看到表单提交后的跳转页面，方便确认是否提交成功。
• 如果需要处理提交后的回调，可以监听In-app-browser的loadstart事件，检测是否跳转到了预设的成功页面，再做后续处理。

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