发送帖子表单后未触发 Ionic 5 inappbrowser loadstop答案

【问题标题】：Ionic 5 inappbrowser loadstop is not triggered after sending post form发送帖子表单后未触发 Ionic 5 inappbrowser loadstop
【发布时间】：2021-10-08 11:22:06
【问题描述】：

发送帖子后未触发 loadstop 事件...我不知道为什么。已经花了 3 天的时间，我已经接近最后期限了。

感谢任何帮助。

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 //CREATE THE FORM AND URL
var form = document.createElement("form");
var url = this.requestPath;
form.setAttribute("method", "post");
form.setAttribute("action", url);

var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", 'Version');
hiddenField.setAttribute("value", this.version);
form.appendChild(hiddenField);

var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", 'MerID');
hiddenField.setAttribute("value", this.merchantID);
form.appendChild(hiddenField);

document.body.appendChild(form);
    let type = '';
//type = '_self';
//type = '_system';
type = '_blank';

url = '';
//let browser = this.theInAppBrowser.create(url, type);
let browser = this.theInAppBrowser.create('http://localhost/', type);
//form.submit();

if (browser) {

  //browser.show();
  browser.on("loadstop").subscribe(function (event) {
   
    if (event.url == 'http://localhost/') {
      console.log('submitting form')
      form.submit();
    }
    console.log('res : loadstop', event);
  },
    err => {
      console.log('error : ', err);
    })

}

因此 loadstop 最初工作并触发提交的表单。表单成功导航到支付外部网站，但 loadstop 不再工作，我无法导航回我的移动应用程序。

编辑：忘记添加从 Android Studio 调试时，我可以看到导航（onPageDidNavigate 和 onPageFinished）

img from Android Studio

【问题讨论】：

标签： angular events form-submit inappbrowser ionic5

【解决方案1】：

对于其他任何人...我遇到的问题是我正在实例化一个新表单并且该事件无法访问。

 const pageContent = '<html><head></head><body>' +
  '<form name="redirect" id="redirect" action="' + this.requestPath + '" method="post">' +
  '<input type="hidden" name="Version" value="' + this.version + '">' +
  '<input type="hidden" name="MerID" value="' + this.merchantID + '">' +
  '<input type="hidden" name="AcqID" value="' + this.acquirerID + '">' +

  '</form> <script type="text/javascript">document.getElementById("redirect").submit();</script>' +
  '</body></html>';

const pageContentUrl = 'data:text/html;base64,' + btoa(pageContent);

const browserRef = this.theInAppBrowser
  .create(
    pageContentUrl,
    '_blank',
    this.options
  );

browserRef.on('loadstop').subscribe(event => {
  console.log('loadstop started');
  console.log(event);
  console.log('loadstop url', event.url);

  if (event.url == 'https://...') {
    console.log(JSON.stringify(event));
    browserRef.close();
  }

});

通过像上面那样改变它现在可以工作了！终于

【讨论】：