在使用Ionic开发APP时，为了在应用中打开或嵌入外部服务器页面，就需要用到浏览器插件，在Ionic官网的原生功能介绍中，提供了2种使用浏览的方式，分别为： Themeable Browser，官网地址：https://ionicframework.com/docs/native/themeable-browser/ In App Browser，官网地址：https://ionicframework.com/docs/native/in-app-browser/
下面我们就写一个demo，来使用这2个插件。 首先先用一下指令创建一个ionic应用
ionic start test3 tabs然后
cd test31、安装插件
ionic cordova plugin add cordova-plugin-themeablebrowser npm install @ionic-native/themeable-browser2、在app.module.ts中导入，并加入到providers中
import { ThemeableBrowser } from '@ionic-native/themeable-browser/ngx'; @NgModule({ providers: [ ThemeableBrowser, ], }) export class AppModule {}具体如下图： 3、在页面中使用Themable Browser
3.1 在页面的ts文件头部导入Themable Browser
import { ThemeableBrowser, ThemeableBrowserOptions, ThemeableBrowserObject } from '@ionic-native/themeable-browser/ngx';3.2 在页面的ts文件中的构造方法中注入ThemeableBrowser
constructor(private themeableBrowser: ThemeableBrowser) { }3.3 在页面的ts文件中写一个处理方法
public buttonClick() { const options: ThemeableBrowserOptions = { statusbar: { color: '#ffffffff' }, toolbar: { height: 44, color: '#f0f0f0ff' }, title: { color: '#003264ff', showPageTitle: true }, backButton: { image: 'back', imagePressed: 'back_pressed', align: 'left', event: 'backPressed' }, forwardButton: { image: 'forward', imagePressed: 'forward_pressed', align: 'left', event: 'forwardPressed' }, closeButton: { image: 'close', imagePressed: 'close_pressed', align: 'left', event: 'closePressed' }, customButtons: [ { image: 'share', imagePressed: 'share_pressed', align: 'right', event: 'sharePressed' } ], menu: { image: 'menu', imagePressed: 'menu_pressed', title: 'Test', cancel: 'Cancel', align: 'right', items: [ { event: 'helloPressed', label: 'Hello World!' }, { event: 'testPressed', label: 'Test!' } ] }, backButtonCanClose: true } const browser: ThemeableBrowserObject = this.themeableBrowser.create('https://www.baidu.com', '_self', options); }3.4 在页面的html文件中添加一个按钮，并把上面写的方法绑定到click事件上，如下：
<ion-button (click)="buttonClick()">Test ThemeableBrowser</ion-button>在Ionic中使用In App Browser的方式与使用ThemeableBrowser的方式很类似，下面介绍一下。 1、安装插件
ionic cordova plugin add cordova-plugin-inappbrowser npm install @ionic-native/in-app-browser2、在app.module.ts中导入，并加入到providers中
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'; @NgModule({ providers: [ InAppBrowser, ], }) export class AppModule {}具体如下图： 3、在页面中使用In App Browser
3.1 在页面的ts文件头部导入In App Browser
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';3.2 在页面的ts文件中的构造方法中注入InAppBrowser
constructor(private iab: InAppBrowser) { }3.3 在页面的ts文件中写一个处理方法
public buttonClick2() { this.iab.create('https://www.baidu.com', '_self', 'location=no'); }3.4 在页面的html文件中添加一个按钮，并把上面写的方法绑定到click事件上，如下：
<ion-button (click)="buttonClick2()">Test In-App-Browser</ion-button>1、app.module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { ThemeableBrowser } from '@ionic-native/themeable-browser/ngx'; import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], providers: [ StatusBar, SplashScreen, ThemeableBrowser, InAppBrowser, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent] }) export class AppModule {}2、ts文件代码
import { Component } from '@angular/core'; import { ThemeableBrowser, ThemeableBrowserOptions, ThemeableBrowserObject } from '@ionic-native/themeable-browser/ngx'; import { InAppBrowser } from '@ionic-native/in-app-browser/ngx'; @Component({ selector: 'app-tab1', templateUrl: 'tab1.page.html', styleUrls: ['tab1.page.scss'] }) export class Tab1Page { constructor(private themeableBrowser: ThemeableBrowser, private iab: InAppBrowser) {} public buttonClick() { console.log('test!!!'); const options: ThemeableBrowserOptions = { statusbar: { color: '#ffffffff' }, toolbar: { height: 44, color: '#f0f0f0ff' }, title: { color: '#003264ff', showPageTitle: true }, backButton: { image: 'back', imagePressed: 'back_pressed', align: 'left', event: 'backPressed' }, forwardButton: { image: 'forward', imagePressed: 'forward_pressed', align: 'left', event: 'forwardPressed' }, closeButton: { image: 'close', imagePressed: 'close_pressed', align: 'left', event: 'closePressed' }, customButtons: [ { image: 'share', imagePressed: 'share_pressed', align: 'right', event: 'sharePressed' } ], menu: { image: 'menu', imagePressed: 'menu_pressed', title: 'Test', cancel: 'Cancel', align: 'right', items: [ { event: 'helloPressed', label: 'Hello World!' }, { event: 'testPressed', label: 'Test!' } ] }, backButtonCanClose: true } const browser: ThemeableBrowserObject = this.themeableBrowser.create('https://www.baidu.com', '_self', options); } public buttonClick2() { this.iab.create('https://www.baidu.com', '_self', 'location=no'); } }3、html文件代码
<ion-header [translucent]="true"> <ion-toolbar> <ion-title> Tab 1 </ion-title> </ion-toolbar> </ion-header> <ion-content [fullscreen]="true"> <ion-header collapse="condense"> <ion-toolbar> <ion-title size="large">Tab 1</ion-title> </ion-toolbar> </ion-header> <div id="container"> <!-- <app-explore-container name="Tab 1 page"></app-explore-container> --> <br /> <br /> <a href="http://www.baidu.com">百度</a> <br /> <br /> <ion-button (click)="buttonClick()">Test ThemeableBrowser</ion-button> <br /> <br /> <ion-button (click)="buttonClick2()">Test In-App-Browser</ion-button> </div> </ion-content>1、初始界面 2、点击百度超链接，如下图： 3、点击 TEST THEMEABLE BROWSER按钮，如下图： 4、点击 TEST IN-APP-BROWSER按钮，如下图：
默认超链接打开浏览器的方式其实是开启了另一个应用，当屏幕滑动执行返回操作时不会回到第一个页面，而ThemeableBrowser和InAppBrowser都可以实现返回时自动回到第一个页面，但是ThemeableBrowser能够对浏览器的导航栏，菜单，标题等进行精确设定，相比InAppBrowser功能更强一些。
