javascript - IONIC 2 InAppBrowser 无法在 IOS 中运行

Question

This below code is working fine in Android. but, it doesn't works in IOS.

We think the browser.executeScript is not working here. here we are getting the redirection url from the API as a html content (this.paymentGatewayDetails) and we need to open that. It works fine in android.

1. trying this in IOS 11.0 phone.

2. IONIC 2.2 version

3. Plugin @ionic-native/in-app-browser": "^4.3.2"

This is the function we are trying to execute.

callGateway() {  
 return new Promise(
   (resolve, reject) => {

    let injected = false;

    if (!this.paymentGatewayDetails) {
      reject("PG_DET_INVALID")
    }

 const browser = this.iab.create("about:blank", "_blank", "location=no");
    browser.show()

    //inject html code to blank page. one time
    browser.on("loadstop")
      .subscribe(
      (sucess) => {
        if (!injected) {
          browser.executeScript({ code: "document.write('" + this.paymentGatewayDetails + "');" }).then(
            (sucess) => {
              console.log("sucess");
              browser.executeScript({ code: "document.mypg.submit();" }).then(
                (sucess) => {
                  console.log("sucess redirection");
                }, (err) => {
                  console.log("error redirection");
                }
              );
            }, (err) => {
              console.log("err")
            }
          );
          injected = true;             
        }
        console.log("success url is", sucess.url);
        if (sucess.url.includes("mobile.mypg.com")) {
          //payment gateway call sucess.
          browser.close()
          resolve("PG_CALL_SUCC")
        }
      }
      )}

We had given in PLIST file

<key>NSAppTransportSecurity</key>
   <dict>
       <key>NSAllowsArbitraryLoads</key>
       <true/>
   </dict>

And in INDEX.html>

<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline';”>

We had installed the Whitelist plugin also

cordova-plugin-whitelist

在 config.xml 中还添加了这些行

<content src="index.html" />
<access origin="*" subdomains="true" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

cordova plugin ls

com.darktalker.cordova.screenshot 0.1.5 "Screenshot"

cordova-plugin-actionsheet 2.3.3 "ActionSheet"

cordova-plugin-compat 1.1.0 "Compat"

cordova-plugin-console 1.0.5 "Console"

cordova-plugin-device 1.1.4 "Device"

cordova-plugin-dialogs 1.3.3 "Notification"

cordova-plugin-fcm 2.1.2 "FCMPlugin"

cordova-plugin-geolocation 2.4.3 "Geolocation"

cordova-plugin-globalization 1.0.7 "Globalization"

cordova-plugin-hotline 1.2.1 "Hotline plugin for Phonegap"

cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"

cordova-plugin-mfp 8.0.2017072706 "IBM MobileFirst Platform Foundation"

cordova-plugin-mfp-jsonstore 8.0.2017081712 "IBM MobileFirst Platform Foundation JSONStore"

cordova-plugin-nativestorage 2.2.2 "NativeStorage"

cordova-plugin-okhttp 2.0.0 "OkHttp"

cordova-plugin-screen-orientation 2.0.1 "Screen Orientation"

cordova-plugin-sms 1.0.5 "SMS"

cordova-plugin-splashscreen 4.0.3 "Splashscreen"

cordova-plugin-statusbar 2.2.2 "StatusBar"

cordova-plugin-whitelist 1.3.1 "Whitelist"

cordova-plugin-x-socialsharing 5.1.8 "SocialSharing"

cordova.plugins.diagnostic 3.6.6 "Diagnostic"

es6-promise-plugin 4.1.0 "Promise"

ionic-plugin-keyboard 2.2.1 "Keyboard"

uk.co.workingedge.phonegap.plugin.launchnavigator 4.0.4 "Launch Navigator"

Please help us to fix this issue...

谢谢

Answer 1

我解决了这个问题。

browser.executeScript({ code: "document.write('"+ this. paymentGatewayDetails + "');"}); 适用于 IOS 和 Android

这里我删除了 .then( (成功)=> {

Now the new code which is working in both IOS and Android

    callGateway() {  
 return new Promise(
   (resolve, reject) => {

    let injected = false;

    if (!this.paymentGatewayDetails) {
      reject("PG_DET_INVALID")
    }

 const browser = this.iab.create("about:blank", "_blank", "location=no");
    browser.show()

    //inject html code to blank page. one time
    browser.on("loadstop")
      .subscribe(
      (sucess) => {
        if (!injected) {
          browser.executeScript({ code: "document.write('" + this.paymentGatewayDetails + "');" });
              console.log("sucess");
              browser.executeScript({ code: "document.mypg.submit();" }).then(
                (sucess) => {
                  console.log("sucess redirection");
                }, (err) => {
                  console.log("error redirection");
                }
              );           
          injected = true;             
        }
        console.log("success url is", sucess.url);
        if (sucess.url.includes("mobile.mypg.com")) {
          //payment gateway call sucess.
          browser.close()
          resolve("PG_CALL_SUCC")
        }
      }
      )}

I don't know why it is not works there. If someone knows it please answer.

Thanks