方法一:iframe
iframe 元素會創建包含另外一個文檔的內聯框架(即行內框架)。
常用的屬性:
舉個例子說明:
<iframe src="assets/chaxun/index.html" width="100%" height="100%" scrolling="yes"></iframe>
這個index.html是一個h5頁面。
缺點是:與ionic自身框架有很多地方衝突
第二種方法:Themeable Browser【不僅可以打開,還是設計樣式】
1.安裝
ionic cordova plugin add cordova-plugin-themeablebrowser
npm install --save @ionic-native/themeable-browser
2.在app.module中引入
import { ThemeableBrowser} from '@ionic-native/themeable-browser';
providers: [
StatusBar,
SplashScreen,
ThemeableBrowser,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
3.使用
//引入
import { ThemeableBrowser} from '@ionic-native/themeable-browser';
//設置選項和路徑
private options = {
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
};
url: string = 'http://www.baidu.com';
constructor(public navCtrl: NavController,private themeableBrowser: ThemeableBrowser) {
}
//Creates a browser instance
let browser = this.themeableBrowser.create(this.url, '_self', this.options);