Question

我想向外部网址提交POST表单，该网址应使用应用内浏览器打开一个包含帖子数据参数的新窗口，以便我如何在{ {1}}？

Answer 1

你可以在离子2中使用InAppBrowser这样做;

安装Inappbrowser cordova插件

cordova插件添加cordova-plugin-inappbrowser
导入Inappbrowser组件

从离子本地导入{InAppBrowser}＆＃39;;
创建一个我们将在inappbrowser中执行的javascript脚本字符串，我们将动态创建动态表单并将数据发布到url。因为我们需要创建一个像redirect.html这样的html页面并将其放在www文件夹中，我们将在应用程序浏览器中打开此文件并将表单从此html文件发布到外部URL

创建一个html文件并将其放在应用程序的www文件夹中将redirect.html

<!DOCTYPE html>
<html>
<head>
    <title>Redirecting to the payment page</title>
</head>
<body>
    <b>
    please wait we are redirecting to the payment page....
</b>
    <form id="ts-app-payment-form-redirect"></form>
</body>
</html>

在组件中这样做

   let options = {
        name: 'tanveer ahmad dar',
        email: 'tanveerahmaddar@example.com',
        item_id: 1234,
        reference: 1234,
        item_descr: 'description',
        item_quant: 1,
        item_valor: 50 * 100
    };

let formHtml:string = '';
for(let key in Options){
   if (result.hasOwnProperty(key)) {
       let value = result[key];
      formHtml+='<input type="hidden" value="'+value+'" id="'+key+'" name="'+key+'"/>';
   }
}

let url = "some payment gateway url"
let payScript = "var form = document.getElementById('ts-app-payment-form-redirect'); ";
payScript += "form.innerHTML = '" + formHtml + "';";
payScript += "form.action = '" + url + "';";
payScript += "form.method = 'POST';" ;
payScript += "form.submit();" ;

打开inappbrowser并在loadstop事件上使用inappbrowser的executeScript方法执行脚本

if (this.platform.is('cordova')) {
  let browser = new InAppBrowser('redirect.html', '_blank', 'location=no');
   browser.show();
   browser.on("loadstart")
   .subscribe(
      event => {
         console.log("loadstop -->",event);
         if(event.url.indexOf("some error url") > -1){
         browser.close();
         this.navCtrl.setRoot(BookingDetailPage,{
             success:false
          });
        }
      },
      err => {
        console.log("InAppBrowser loadstart Event Error: " + err);
   });
   //on url load stop
    browser.on("loadstop")
   .subscribe(
       event => {
          //here we call executeScript method of inappbrowser and pass object 
          //with attribute code and value script string which will be executed in the inappbrowser
          browser.executeScript({
              code:payScript
           });
       console.log("loadstart -->",event);
       },
   err => {
      console.log("InAppBrowser loadstop Event Error: " + err);
   });
  //on closing the browser
   browser.on("exit")
  .subscribe(
    console.log("exit -->",event);
  },
  err => {
   console.log("InAppBrowser loadstart Event Error: " + err);
  });
}

我已经这样做了，我使用此方法将带有付款详细信息的隐藏表单发布到付款网址。它的工作顺利。我还可以检查loadstart和loadstop事件中的inappbrowser url更改我可以在成功或失败网址上隐藏inappbrowser

希望这会对你有所帮助.. :)

离子2 inappbrowser POST形式与数据参数

1 个答案: