安装InAppBrowser插件
ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser
在对应Page页面的ts文件中引用
import { InAppBrowser,InAppBrowserOptions } from '@ionic-native/in-app-browser/ngx';
另外在app.module.ts文件中的@NgModule,providers里添加InAppBrowser
options : InAppBrowserOptions = {
location : 'yes',//Or 'no'
hidden : 'no', //Or 'yes'
clearcache : 'yes',
clearsessioncache : 'yes',
zoom : 'yes',//Android only ,shows browser zoom controls
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
};
在新的InAppBrowser实例、当前浏览器实例或系统浏览器中打开URL。
var ref = cordova.InAppBrowser.open(url, target, options);
选项：用于InAppBrowser的选项。可选，默认为：location=yes(（字符串）
选项字符串不能包含任何空格，每个功能的名称/值对必须用逗号分隔。功能名称不区分大小写。
所有平台都支持：
位置：设置为“是”或“否”可打开或关闭InAppBrowser的位置栏。
Android支持以下附加选项：
隐藏：设置为“是”以创建浏览器并加载页面，但不显示该页面。loadstop事件在加载完成时激发。省略或设置为“否”（默认）以使浏览器正常打开和加载。
beforeload：设置为启用beforeload事件以修改浏览器中实际加载的页面。接受的值是get to intercept only get requests、post to intercept on post requests或yes以拦截get和post请求。请注意，POST请求当前不受支持，将被忽略（如果设置beforeload=POST，则会引发错误）。
clearcache：设置为yes以在打开新窗口之前清除浏览器的cookie缓存
clearsessioncache：设置为“是”，以便在打开新窗口之前清除会话cookie缓存
CloseButtonCeption：设置一个字符串作为关闭按钮的标题，而不是一个X。请注意，您需要自己对该值进行本地化。
closebuttoncolor：设置为有效的十六进制颜色字符串，例如：#00ff00，它将更改默认的关闭按钮颜色，而不管是文本还是默认的X。仅当用户的位置设置为“是”时才有效。
页脚：设置为“是”将在页脚中显示类似于iOS“完成”按钮的“关闭”按钮。“关闭”按钮的显示方式与标题相同，因此请使用CloseButtonCoption和closebuttoncolor设置其属性。
footercolor：设置为有效的十六进制颜色字符串，例如#00ff00或#CC00ff00（#aarrggbb），它将更改默认的页脚颜色。仅当用户将“页脚”设置为“是”时才有效。
hardwareback：设置为yes可使用hardware back按钮向后浏览InAppBrowser的历史记录。如果没有上一页，InAppBrowser将关闭。默认值是yes，因此如果希望“后退”按钮简单地关闭InAppBrowser，则必须将其设置为no。
hidenavigationbuttons：设置为yes隐藏位置工具栏上的导航按钮，仅当用户的位置设置为yes时才有效。默认值为“否”。
hideurlbar：设置为yes以隐藏位置工具栏上的url栏，仅当用户的位置设置为yes时才有效。默认值为“否”。
navigationbuttoncolor：设置为有效的十六进制颜色字符串，例如：#00ff00，它将更改两个导航按钮的默认颜色。仅当用户的位置设置为“是”，而未将hidenavigationbuttons设置为“是”时才有效。
toolbarcolor：设置为有效的十六进制颜色字符串，例如：#00ff00，它将更改工具栏的默认颜色。仅当用户的位置设置为“是”时才有效。
lefttoright：设置为yes可交换导航按钮和关闭按钮的位置。具体来说，导航按钮在右边，关闭按钮在左边。默认值为“否”。
缩放：设置为“是”可显示Android浏览器的缩放控件，设置为“否”可隐藏这些控件。默认值为“是”。
mediaplaybackrequiresseraction：设置为yes以防止HTML5音频或视频自动播放（默认为no）。
shouldPauseOnSuspend：设置为yes可使appbrowser WebView暂停/恢复应用程序以停止后台音频（这可能是为了避免像CB-11013中所述的Google Play问题）。
useWideViewPort：设置WebView是应该启用对“viewport”HTML元标记的支持，还是应该使用宽视口。当设置的值为“否”时，布局宽度始终设置为WebView控件的宽度（以设备独立（CSS）像素为单位）。当值为yes且页面包含viewport meta标记时，将使用标记中指定的宽度值。如果页面不包含标记或不提供宽度，则将使用宽视口(默认为“是”）。
全屏：设置InappBrowser Web视图是否全屏显示。在全屏模式下，状态栏是隐藏的。默认值为“是”。
iOS支持以下附加选项：
隐藏：设置为“是”以创建浏览器并加载页面，但不显示该页面。loadstop事件在加载完成时激发。省略或设置为“否”（默认）以使浏览器正常打开和加载。
beforeload：设置为启用beforeload事件以修改浏览器中实际加载的页面。接受的值是get to intercept only get requests、post to intercept on post requests或yes以拦截get和post请求。请注意，POST请求当前不受支持，将被忽略（如果设置beforeload=POST，则会引发错误）。
clearcache：设置为yes以在打开新窗口之前清除浏览器的cookie缓存
clearsessioncache：设置为“是”，以便在打开新窗口之前清除会话cookie缓存。对于WKWebView，需要在目标设备上安装iOS 11+。
cleardata：设置为yes，在打开新窗口之前清除浏览器的整个本地存储（cookies、HTML5本地存储、IndexedDB等）
closebuttoncolor：设置为有效的十六进制颜色字符串，例如：#00ff00，以更改默认“完成”按钮的颜色。仅在未禁用工具栏时适用。
CloseButtonCeption：设置一个字符串作为“完成”按钮的标题。请注意，您需要自己对该值进行本地化。
disallowoverscroll：设置为yes或no（默认为no）。打开/关闭WKWebView的UIScrollView的反弹。
hidenavigationbuttons：设置为yes或no可打开或关闭工具栏导航按钮（默认为no）。仅在未禁用工具栏时适用。
navigationbuttoncolor：设置为有效的十六进制颜色字符串，例如：#00ff00，以更改默认颜色。仅适用于导航按钮可见的情况。
工具栏：设置为“是”或“否”可打开或关闭InAppBrowser的工具栏（默认为“是”）
toolbarcolor：设置为有效的十六进制颜色字符串，例如：#00ff00，以更改工具栏的默认颜色。仅在未禁用工具栏时适用。
工具栏半透明：设置为“是”或“否”使工具栏半透明（半透明）（默认为“是”）。仅在未禁用工具栏时适用。
lefttoright：设置为yes可交换导航按钮和关闭按钮的位置。具体来说，关闭按钮在右边，导航按钮在左边。
enableViewportScale：设置为yes或no以防止通过元标记进行视口缩放（默认为no）。
mediaplaybackrequiresseraction：设置为yes以防止HTML5音频或视频自动播放（默认为no）。
allowInlineMediaPlayback：设置为yes或no以允许在线HTML5媒体播放，在浏览器窗口中显示，而不是在特定于设备的播放界面中显示。HTML的video元素还必须包含webkit playsinline属性（默认为no）。
presentationstyle：设置为pagesheet、formsheet或fullscreen可设置演示样式（默认为fullscreen）。
transitionstyle：设置为fliphorizontal、CrossBluse或coververtical可设置转换样式（默认为coververtical）。
toolbarposition：设置为top或bottom（默认为bottom）。使工具栏位于窗口的顶部或底部。
hidespinner：设置为yes或no以更改加载指示器的可见性（默认为no）。
ts文件中的代码
import { Component } from '@angular/core';
import { InAppBrowser , InAppBrowserOptions } from '@ionic-native/in-app-browser';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
options : InAppBrowserOptions = {
location : 'yes',//Or 'no'
hidden : 'no', //Or 'yes'
clearcache : 'yes',
clearsessioncache : 'yes',
zoom : 'yes',//Android only ,shows browser zoom controls
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(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);
}
}
html中的代码
<ion-content padding>
<button ion-button (click)="openWithSystemBrowser('https://www.demo.com')">在 System browser中打开</button>
<button ion-button (click)="openWithInAppBrowser('https://www.demo.com')">在InAppbrowser中打开</button>
<button ion-button (click)="openWithCordovaBrowser('https://www.demo.com')">在 Cordova browser中打开</button>
</ion-content>
