InAppBrowserをオプション付きで使う方法

InAppBrowserでToolbarの有無や画面遷移方式などを指定するには、オプションを利用します。
このようにcreateの引数として列挙することも可能ですが、2つ以上だと非常に見づらいです。

    const browser = this.inAppBrowser.create(
      'https://ionicframework.com/',
      '_blank',
      'location=no,transitionstyle=crossdissolve,toolbar=no' // 見づらい
    );
    browser.show();

おそらくInAppBrowserを利用するときには2つ以上のオプションで設定することになるので、
InAppBrowserOptionsを使うと便利です。

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

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

  ionViewWillEnter() {
    const options: InAppBrowserOptions = {
      location: 'no',
      transitionstyle: 'crossdissolve',
      toolbar: 'no'
    }; // 追加

    const browser = this.inAppBrowser.create(
      'https://ionicframework.com/',
      '_blank',
      options // 修正
    );
    browser.show();
  }
}

オプションの詳細は、MonacaのDocが見やすいのでおすすめです。

docs.monaca.io

 

3 users

8 pockets

InAppBrowser プラグイン | Monaca Docs

https://docs.monaca.io/ja/reference/cordova_6.2/inappbrowser/