cordova-plugin-themeablebrowser

插件简介

cordova-plugin-themeablebrowser 是一款功能强大的 Cordova 自定义主题浏览器插件，基于原生 cordova-plugin-inappbrowser 插件，提供高度可定制的 UI 样式、页面交互控制、功能扩展等核心能力。支持自定义导航栏、工具栏、颜色、图标、动画效果，可嵌入应用内作为内置浏览器，也可作为独立窗口打开外部链接，适用于应用内帮助中心、新闻资讯、支付页面、第三方内容展示等场景，为混合应用提供一致且个性化的网页浏览体验。

特别说明：内置浏览器插件已集成到OHOS Cordova框架中，在html页面中通过 <a href="https://**.***.com" target="_blank">打开新窗口</a>就可以自动激活内置浏览器，打开在线网页、本地页面等。内置浏览器已经提供了导航栏、文字、图标等自定义配置，因此该插件在OHOS系统中并不是必须的，您可以直接通过框架的config.xml修改内置浏览器样式。点击查看OHOS Cordov框架

核心优势

• 全量 UI 定制：支持导航栏、工具栏、关闭按钮、进度条等所有 UI 元素的样式自定义（颜色、大小、图标、位置）

• 灵活交互控制：支持页面前进 / 后退、刷新、关闭、分享，可自定义按钮点击事件，支持手势关闭（iOS 侧滑）

• 功能扩展丰富：支持文件下载、Cookie 共享、JS 桥接（应用与网页通信）、页面加载进度监听

• 跨平台一致性：统一 Android/iOS/OHOS 浏览器样式与交互，支持平台专属配置

• 轻量高效：基于原生 WebView 优化，页面加载速度接近系统浏览器，无冗余依赖（体积＜80KB）

• 安全可靠：支持 HTTPS 加密传输、JS 注入限制，提供完善的错误回调机制

安装与卸载

安装步骤

1. 基础安装（推荐）

#安装hcordova
npm install -g hcordova

# 安装插件（推荐稳定版）

hcordova plugin add cordova-plugin-themeablebrowser

# 从 GitCode 安装

hcordova plugin add https://gitcode.com/OpenHarmony-Cordova/cordova-plugin-themeablebrowser.git --platform ohos

# 安装指定版本

hcordova plugin add [email protected] --platform ohos

卸载步骤

# 全平台卸载
hcordova plugin remove cordova-plugin-themeablebrowser

# 指定OHOS平台卸载
hcordova plugin remove cordova-plugin-themeablebrowser  --platform ohos

调用API如下

//目前鸿蒙支持以下新增的属性和监听事件，其他事件参考cordova-plugin-inappbrowser插件介绍
cordova.ThemeableBrowser.open(
    'https://developer.huawei.com', 
    '_blank', 
    {
        statusbar: {
            color: '#ffffffff'
        },
        toolbar: {
            height: 44,
            color: '#f0f0f0ff'
        },
        title: {
            color: '#000000',
            showPageTitle: true
        },
        backButton: {
            event: 'backPressed'
        },
        closeButton: {
            event: 'closePressed'
        },
        backButtonCanClose: true
    }).addEventListener('backPressed', function(e) {
        alert('back pressed');
    }).addEventListener('closePressed', function(e) {
        alert('closePressed');
    });

许可证

本插件基于 Apache 许可证 2.0 版 开源。详见 LICENSE 文件。

参考资料

1. 内置浏览器 Apache Cordova：访问 Apache Cordova 官方仓库

2. OHOS cordova-plugin-themeablebrowser:访问https://gitcode.com/OpenHarmony-Cordova/cordova-plugin-themeablebrowser

3. cordova-plugin-inappbrowser插件:访问https://gitcode.com/OpenHarmony-Cordova/cordova-plugin-inappbrowser