Cordova WebView插件可以自定义导航颜色和按钮,比iframe好用n倍,比inappbrowser更实在
今天给大家介绍的这款插件cordova-plugin-themeablebrowser,可以说是org.apache.cordova.inappbrowser 这款插件的升级版本。为什么这样说呢?
因为官方是这样说的。
cordova-plugin-themeablebrowser基于 org.apache.cordova.inappbrowser插件,包含了inappbrowser里面几乎所有的功能,但是这个插件更高级的地方就是他可以自定义导航的样式,以及在导航上面加菜单。
我们网站地址:http://www.phonegap100.com/plugininfo_42.html
官方地址:https://github.com/initialxy/cordova-plugin-themeablebrowser
上图:下面的导航大家能看出和APP导航什么区别吗?
那就是自定义的导航,返回安妮 分享按钮,下拉按钮都可以自己定义,并且点击都可以执行js
使用方式:
项目安装好后运行:
cordova plugin add cordova-plugin-themeablebrowser
Js调用方式:
cordova.ThemeableBrowser.open('http://apache.org', '_blank', {
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
}).addEventListener('backPressed', function(e) {
alert('back pressed');
}).addEventListener('helloPressed', function(e) {
alert('hello pressed');
}).addEventListener('sharePressed', function(e) {
alert(e.url);
}).addEventListener(cordova.ThemeableBrowser.EVT_ERR, function(e) {
console.error(e.message);
}).addEventListener(cordova.ThemeableBrowser.EVT_WRN, function(e) {
console.log(e.message);
});