cordova-plugin-themeablebrowser插件使用整理

来源：互联网发布：定居中国的外国人知乎编辑：程序博客网时间：2024/04/29 18:53

一、ThemeableBrowser插件整理

Git源代码+Api地址：https://github.com/initialxy/cordova-plugin-themeablebrowser

命令：

cordova plugin add cordova-plugin-themeablebrowser

说明：

1.此插件可以实现独立窗口打开页面，但是全屏设置好像没有起作用

2.此插件可以配置标题栏、关闭按钮、分享按钮，菜单按钮等

3.此插件依赖InAppBrowser

二、VS中使用步骤

1. 添加插件

2.手动Copy对应平台的图片，以Android为例

三、使用实例

示例1：官方demo

$scope.show = function () {    //官方实例    cordova.ThemeableBrowser.open('http://www.gongjuji.net', '_blank', {        statusbar: {            color: '#00000000'        },        toolbar: {            height: 44,            color: '#f0f0f0ff'        },        title: {            color: '#ff000000',            showPageTitle: true,            staticText: '微工具集首页'        },        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);    });}

示例2：

//窗口2  修改地址栏和关闭按钮$scope.show2 = function () {    var ref = cordova.ThemeableBrowser.open('http://www.baidu.com', '_blank', {        title: {            color: '#000000',            showPageTitle: true,            staticText: '微工具集首页'        },        closeButton: {            image: 'back',            imagePressed: 'back_pressed',            align: 'left',            event: 'backPressed'        },        toolbar: {            height: 44,            color: '#387EF5'        }    });}

Ionic 中使用iframe嵌入外网页面整理

Cordova 配置WebView可以打开外部链接

cordova-plugin-inappbrowser插件使用整理

0 0