Ionic Cordova inappbrowser 在 iOS 中不起作用

Posted 2023-03-12

【中文标题】Ionic Cordova inappbrowser 在 iOS 中不起作用

【英文标题】：Ionic Cordova inappbrowser not working in iOS

【发布时间】：2017-09-19 04:15:41

【问题描述】：

我为 Ionic Cordova 安装了 inAppBrowser 插件（至少我认为我安装正确。我按照这里的说明进行操作：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/#installation）。

我将 inAppBrowser 导入我的 app.module.ts 文件并将其添加到提供者列表中：

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

和

providers: [
StatusBar,
SplashScreen,
InAppBrowser,
provide: ErrorHandler, useClass: IonicErrorHandler  
]

我也像这样将它注入到相关页面中：

export class AboutPage 

options : InAppBrowserOptions = 
    location : 'yes',
    hidden : 'no',
    clearcache : 'yes',
    clearsessioncache : 'yes',
    zoom : 'yes',//android only
    hardwareback : 'yes',
    mediaPlaybackRequiresUserAction : 'no',
    shouldPauseOnSuspend : 'no', //Android only
    closebuttoncaption : 'Close', //ios only
    disallowoverscroll : 'no', //iOS only
    toolbar : 'yes', //iOS only
    enableViewportScale : 'no', //iOS only
    allowInlineMediaPlayback : 'no',//iOS only
    presentationstyle : 'pagesheet',//iOS only
    fullscreen : 'yes',//Windows only
;

  constructor(public navCtrl: NavController, public navParams: NavParams, private theInAppBrowser: InAppBrowser) 
  

  public openWithSystemBrowser(url : string)
    let target = "_system";
    this.theInAppBrowser.create(url,target,this.options);

public openWithInAppBrowser(url : string)
    let target = "_blank";
    this.theInAppBrowser.create(url,target,this.options);

public openWithCordovaBrowser(url : string)
    let target = "_self";
    this.theInAppBrowser.create(url,target,this.options);


  ionViewDidLoad() 
    console.log('ionViewDidLoad AboutPage');
  

然后我在 html 页面中添加了一个按钮：

<button ion-button (click)="openWithSystemBrowser('https://www.preachingfriars.org')">Visit our site</button>

它似乎在 Android 中运行良好，但在 iOS 中没有运气。当我单击按钮时，什么都没有发生。我已经在论坛上搜索了几天，但仍然无法使其正常工作。如果您能提供任何帮助，我将不胜感激！

谢谢！ 布伦特

【问题讨论】：

这个问题解决了吗？

不。我完全放弃了 Ionic，转而使用 phonegap。

【参考方案1】：

create 方法接受一个字符串作为选项参数，而不是一个对象。 而且你还必须调用 show 方法。

const browser = this.iab.create(targetUrl, '_self', 'location=no');
browser.show();

【讨论】：

嗨，Christian - 请原谅我的无知，但我究竟会在哪里使用它？我对离子编程还是比较陌生。提前致谢。

在您的代码中，您必须更改这一行： this.theInAppBrowser.create(url,target,this.options) => this.theInAppBrowser.create(url,target,'location=yes, hidden=no, clearcache=yes................');

【参考方案2】：

尝试在平台就绪方法中加载它。

@Component(
  templateUrl: 'app.html'
)
export class MyApp 

  browser: InAppBrowserObject;
options: InAppBrowserOptions = 
  location: 'no', //Or 'no' 
  hidden: 'yes', //Or  'yes'
  zoom: 'no', //Android only ,shows browser zoom controls 
  hardwareback: 'yes',
  mediaPlaybackRequiresUserAction: 'yes',
  shouldPauseOnSuspend: 'no', //Android only 
  closebuttoncaption: 'Share', //iOS only
  disallowoverscroll: 'no', //iOS only 
  toolbar: 'yes', //iOS only 
  toolbarposition: 'bottom',
  enableViewportScale: 'no', //iOS only 
  allowInlineMediaPlayback: 'no', //iOS only 
  presentationstyle: 'formsheet', //iOS only 
  fullscreen: 'yes', //Windows only  
  suppressesIncrementalRendering: 'no',
  transitionstyle: 'crossdissolve',

;

constructor(public toastCtrl: ToastController, public actionSheetCtrl: ActionSheetController, public network: Network, public iab: InAppBrowser, public platform: Platform, statusBar: StatusBar, public splashScreen: SplashScreen) 

  platform.ready().then(() => 
    statusBar.styleDefault();
    this.openinInappbrowser();
  );



openinInappbrowser() 
  this.browser = this.iab.create('https://ionicframework.com', '_blank', this.options);
  this.browser.show();
  this.splashScreen.hide();
  this.browser.on('loaderror').subscribe(event => 

    this.browser.hide();
    this.presentToast('Something Wnt Wrong');
  );



let toast = this.toastCtrl.create(
  message: arg,
  duration: 1500,
  position: 'bottom'
);

toast.onDidDismiss(() => 
  console.log('Dismissed toast');
);

toast.present();

isNetavailable() 
  if (this.network.type == 'none' || this.network.type == 'unknown') 
    return false;
   else 
    return true;
  

【参考方案3】：

InAppBrowser 的选项。可选，默认为：location=yes。 选项字符串不能包含任何空格，并且每个 功能的名称/值对必须用逗号分隔。功能名称 不区分大小写。 - https://ionicframework.com/docs/native/in-app-browser/

以下是将选项对象转换为可在使用 theInAppBrowser.create 时使用的字符串的方法：

// ...

var optionsStr = '';

for (var key of Object.keys(this.options || )) 
    if (optionsStr) // Add a comma if there are any previous options to keep each key value pair seperated
        optionsStr += ",";
    
    // Add <key>=<value> to optionsStr
    optionsStr += key + '=' + options[key];


// Be sure to pass a string instead of an object for options https://ionicframework.com/docs/native/in-app-browser/
// create(url: string, target: string, options: string)
this.browser = this.theInAppBrowser.create('https://ionicframework.com', '_blank', optionsStr);

// ...

【参考方案4】：

您可以尝试将其添加到您的 config.xml 文件中

插件名称="cordova-plugin-inappbrowser" spec="3.1.0" value="CDVInAppBrowser"

如果 CDVInAppBrowser 不在这里，则将其添加为值

【参考方案5】：

您可以尝试将其添加到您的 config.xml 文件中

<allow-intent href="*" />
<feature name="InAppBrowser">
        <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
</feature>

【讨论】：

嗨 - 我相信这是白名单插件。我安装了白名单，并且“allow-intent”行位于 config.xml 文件中。还是不行。

还没有找到解决办法。上述建议无效。

问题是关于 iOS，而不是关于 android.. :)