{"_id":"@cordova-ohos/cordova-plugin-inappbrowser","_rev":"5-06c25d2a3bc75e0cb752dc354196e9b0","name":"@cordova-ohos/cordova-plugin-inappbrowser","dist-tags":{"latest":"6.0.1"},"versions":{"6.0.0":{"name":"@cordova-ohos/cordova-plugin-inappbrowser","version":"6.0.0","keywords":["cordova","inappbrowser","ecosystem:cordova","cordova-openharmony"],"author":{"name":"Huawei Device, Inc. Ltd. and","email":"马弓手"},"license":"Apache-2.0","_id":"@cordova-ohos/cordova-plugin-inappbrowser@6.0.0","maintainers":[{"name":"luqi_tan","email":"295099422@qq.com"}],"bugs":{"url":"https://gitcode.com/OpenHarmony-Cordova/cordova-plugin-inappbrowser/issues"},"dist":{"shasum":"e953896ac21eb676167a0543535dfbdfb4ec1a95","tarball":"https://registry.npmjs.org/@cordova-ohos/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-6.0.0.tgz","fileCount":9,"integrity":"sha512-Eggu2NnrOljPp+Q9s2E5+EUhFfFUEm+mMS0YB9+zJAMHlx8y78F65f5lW28qoxe1tRlfaGeLZ5P9WJLORG9rqw==","signatures":[{"sig":"MEUCIFvYizevsk7cmJpCcocVxm+ypoaQiRbLA9VKil99ZIe3AiEAyjogtfWZSMyTrJFJW2vzf9J98XHcNmCMjr1fY8Qm2sQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84748},"cordova":{"id":"cordova-plugin-inappbrowser","platforms":["ohos"]},"engines":{"cordovaDependencies":{"6.0.0":{"hcordova":">=1.0.0","@cordova-ohos/ohos":">=2.0.0"}}},"gitHead":"551d098d39293b9e3ef9006f9b82ec741109a63e","_npmUser":{"name":"luqi_tan","email":"295099422@qq.com"},"repository":{"url":"gitcode:OpenHarmony-Cordova/cordova-plugin-inappbrowser","type":"git"},"_npmVersion":"10.5.1","description":"Cordova Inappbrowser Plugin","directories":{},"_nodeVersion":"22.0.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/cordova-plugin-inappbrowser_6.0.0_1773827194095_0.19943493958510383","host":"s3://npm-registry-packages-npm-production"}},"6.0.1":{"name":"@cordova-ohos/cordova-plugin-inappbrowser","version":"6.0.1","description":"Cordova InAppBrowser Plugin","cordova":{"id":"cordova-plugin-inappbrowser","platforms":["ohos"]},"repository":{"type":"git","url":"gitcode:CPF-Cordova/cordova-plugin-inappbrowser"},"bugs":{"url":"https://gitcode.com/CPF-Cordova/cordova-plugin-inappbrowser/issues"},"keywords":["cordova","inappbrowser","ecosystem:cordova","cordova-openharmony"],"engines":{"cordovaDependencies":{"6.0.1":{"@cordova-ohos/ohos":">=2.0.0","hcordova":">=1.0.0"}}},"author":{"name":"Huawei Device, Inc. Ltd. and","email":"马弓手"},"license":"Apache-2.0","_id":"@cordova-ohos/cordova-plugin-inappbrowser@6.0.1","gitHead":"2db248b79c1df3b818ed1d5c195476613c5b67a0","_nodeVersion":"22.0.0","_npmVersion":"10.5.1","dist":{"integrity":"sha512-xUTZq22wsraNW/P1B/3QfH4wnKdfCehDSloroLk6PrTwPrnqJ08LRqe1Puv/QZ2sgaw4SWU4aPCu1xpyiJMH2A==","shasum":"bbef03b1f1d2fa0b1dbd7e1937c3ed170dea6ddc","tarball":"https://registry.npmjs.org/@cordova-ohos/cordova-plugin-inappbrowser/-/cordova-plugin-inappbrowser-6.0.1.tgz","fileCount":10,"unpackedSize":125698,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICbKlTK2xsm5RhXDle9Q1pvQWNIB1CiAWspQqqp3Flt/AiBhZA3Km1HB2nF9TR7v6wUAMOYOGdZssg+EUMftOwCalQ=="}]},"_npmUser":{"name":"luqi_tan","email":"295099422@qq.com"},"directories":{},"maintainers":[{"name":"luqi_tan","email":"295099422@qq.com"},{"name":"wanpengsz","email":"wanpengsz@163.com"},{"name":"xkh111","email":"xukaihui11@163.com"},{"name":"hcordova","email":"chenlihuiabc@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cordova-plugin-inappbrowser_6.0.1_1785142848771_0.3957434976074843"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-18T09:46:33.980Z","modified":"2026-07-27T09:00:49.090Z","6.0.0":"2026-03-18T09:46:34.233Z","6.0.1":"2026-07-27T09:00:48.911Z"},"bugs":{"url":"https://gitcode.com/CPF-Cordova/cordova-plugin-inappbrowser/issues"},"author":{"name":"Huawei Device, Inc. Ltd. and","email":"马弓手"},"license":"Apache-2.0","keywords":["cordova","inappbrowser","ecosystem:cordova","cordova-openharmony"],"repository":{"type":"git","url":"gitcode:CPF-Cordova/cordova-plugin-inappbrowser"},"description":"Cordova InAppBrowser Plugin","maintainers":[{"name":"luqi_tan","email":"295099422@qq.com"},{"name":"wanpengsz","email":"wanpengsz@163.com"},{"name":"xkh111","email":"xukaihui11@163.com"},{"name":"hcordova","email":"chenlihuiabc@163.com"}],"readme":"#
cordova-plugin-inappbrowser
\r\n\r\n[![zh-CN](https://img.shields.io/badge/lang-中文-blue.svg)](README.md)\r\n[![en](https://img.shields.io/badge/lang-English-blue.svg)](README.en.md)\r\n\r\n本项目基于 [cordova-plugin-inappbrowser@6.0.0](https://www.npmjs.com/package/cordova-plugin-inappbrowser/v/6.0.0) 开发，本文档重点阐述其在 OpenHarmony（OHOS）系统中的具体应用。\r\n\r\n- [cordova-plugin-inappbrowser](#cordova-plugin-inappbrowser)\r\n - [简介](#简介)\r\n - [支持平台](#支持平台)\r\n - [下载安装](#下载安装)\r\n - [前提条件](#前提条件)\r\n - [从 npm 安装（推荐）](#从-npm-安装推荐)\r\n - [指定平台安装 ohos](#指定平台安装-ohos)\r\n - [安装指定版本](#安装指定版本)\r\n - [从 GitCode 仓库安装](#从-gitcode-仓库安装)\r\n - [离线安装（本地包）](#离线安装本地包)\r\n - [安装后验证](#安装后验证)\r\n - [卸载](#卸载)\r\n - [约束与限制](#约束与限制)\r\n - [兼容性](#兼容性)\r\n - [使用示例](#使用示例)\r\n - [使用说明](#使用说明)\r\n - [配置参数（options）](#配置参数options)\r\n - [全局配置（config.xml）](#全局配置configxml)\r\n - [使用注意事项](#使用注意事项)\r\n - [常见问题](#常见问题)\r\n - [核心 API](#核心-api)\r\n - [1. 创建浏览器实例（open）](#1-创建浏览器实例open)\r\n - [方法说明](#方法说明)\r\n - [参数说明](#参数说明)\r\n - [2. 浏览器实例方法（InAppBrowserObject）](#2-浏览器实例方法inappbrowserobject)\r\n - [示例代码](#示例代码)\r\n - [3. 事件监听](#3-事件监听)\r\n - [支持的事件类型](#支持的事件类型)\r\n - [示例：事件监听与 URL 拦截](#示例事件监听与-url-拦截)\r\n - [目录结构](#目录结构)\r\n - [贡献代码](#贡献代码)\r\n - [许可证](#许可证)\r\n - [官方资源](#官方资源)\r\n\r\n## 简介\r\n\r\n`cordova-plugin-inappbrowser` 是 Apache Cordova 生态中用于在应用内打开外部网页或本地 HTML 文件的核心插件，它提供了一个独立于主应用 WebView 的浏览器组件，支持自定义窗口样式、控制导航行为、监听页面加载状态等功能。该插件解决了 Cordova 主应用 WebView 无法灵活控制外部页面访问的问题，同时避免了跳转系统浏览器导致用户离开应用的体验损耗，广泛应用于展示帮助文档、支付页面、第三方内容等场景。本文档主要说明该插件在 OHOS 系统中的应用。\r\n\r\n- **多场景页面加载**：支持加载远程 URL（如 `https://example.com`）、本地 HTML 文件（如 `/pages/about.html`）；\r\n\r\n- **灵活窗口控制**：可配置窗口是否显示地址栏、工具栏、关闭按钮，支持设置窗口大小、位置及是否全屏，适配不同 UI 设计需求；\r\n\r\n- **完整导航功能**：提供前进、后退、刷新、关闭等导航控制 API，支持拦截 URL 跳转，实现自定义路由逻辑（如拦截支付回调链接）；\r\n\r\n- **丰富事件监听**：支持监听页面加载开始、加载完成、加载失败、URL 变化、窗口关闭等事件，便于开发者处理页面状态变化；\r\n\r\n- **跨平台兼容性**：适配 Android、iOS、OHOS 等主流移动平台统一 API 调用方式，降低跨平台开发成本。\r\n\r\n## 支持平台\r\n\r\n- **Android**：API 级别 21 及以上（覆盖 Android 5.0 及更高版本），支持主流品牌手机（如华为、小米、OPPO、三星等），适配 AndroidX 架构；\r\n\r\n- **iOS**：iOS 11.0 及以上，支持 iPhone、iPad 全系列设备，适配 notch 屏（刘海屏）、动态岛及分屏模式；\r\n\r\n- **OHOS**: 5.0 及以上版本；\r\n\r\n- **Windows**：Windows 10 及以上，支持 UWP（通用 Windows 平台）应用，适配桌面端与平板端窗口布局；\r\n\r\n- **Browser**：主流桌面及移动浏览器（Chrome 70+、Firefox 65+、Edge 79+、Safari 13+），模拟独立浏览器窗口（通过弹窗或 iframe 实现）；\r\n\r\n- **Electron**：Electron 12.0 及以上，支持桌面端应用（Windows、macOS、Linux），适配桌面窗口管理逻辑。\r\n\r\n## 下载安装\r\n\r\n通过 hcordova CLI 即可快速安装插件，支持从 npm 仓库或 GitCode 仓库获取，安装前需满足相应前提条件。\r\n\r\n### 前提条件\r\n\r\n在安装插件前，需确保开发环境满足以下要求：\r\n\r\n1. 已安装 Node.js（v14.0.0 及以上）和 npm（v6.0.0 及以上），可通过 `node -v` 和 `npm -v` 命令验证版本；\r\n\r\n2. 已全局安装 HCordova CLI（v1.0.0 及以上），若未安装，执行以下命令：\r\n\r\n```bash\r\nnpm install -g hcordova\r\n```\r\n\r\n1. 已创建 Cordova 项目（若未创建，执行 `hcordova create InAppBrowserApp com.example.inappbrowser 应用内浏览器示例` 快速创建）；\r\n\r\n### 从 npm 安装（推荐）\r\n\r\n```bash\r\n# 使用 hcordova CLI 安装\r\n\r\n# 安装 hcordova 命令化工具\r\nnpm install -g hcordova\r\n\r\n# 全平台安装插件\r\nhcordova plugin add cordova-plugin-inappbrowser\r\n```\r\n\r\n### 指定平台安装 ohos\r\n\r\n仅为 OHOS 平台安装插件：\r\n\r\n```bash\r\n# 仅安装到 OHOS 平台\r\nhcordova plugin add cordova-plugin-inappbrowser --platform ohos\r\n```\r\n\r\n### 安装指定版本\r\n\r\n若项目需兼容特定版本，可指定版本号安装（例如安装 1.0.0 版本）：\r\n\r\n```bash\r\nhcordova plugin add cordova-plugin-inappbrowser@1.0.0 --platform ohos\r\n```\r\n\r\n### 从 GitCode 仓库安装\r\n\r\n仅为 OHOS 平台安装插件：\r\n\r\n```bash\r\n# 仅安装到 OHOS 平台\r\nhcordova plugin add https://gitcode.com/CPF-Cordova/cordova-plugin-inappbrowser.git --platform ohos\r\n\r\n# 指定标签/分支安装\r\nhcordova plugin add https://gitcode.com/CPF-Cordova/cordova-plugin-inappbrowser.git@develop --platform ohos\r\n```\r\n\r\n### 离线安装（本地包）\r\n\r\n适用于无网络环境，先下载插件包到本地，再执行离线安装：\r\n\r\n```bash\r\n# 下载插件包到本地（示例路径：../Downloads/cordova-plugin-inappbrowser）\r\n# 执行离线安装\r\nhcordova plugin add ../Downloads/cordova-plugin-inappbrowser --platform ohos\r\n```\r\n\r\n\r\n### 安装后验证\r\n\r\n安装完成后，可通过以下命令验证插件是否成功添加到项目中：\r\n\r\n```bash\r\n# 查看已安装的插件列表，若包含本插件 ID 则表示插件已成功安装\r\nhcordova plugin list\r\n```\r\n\r\n### 卸载\r\n\r\n**卸载插件**：\r\n\r\n```bash\r\n# Cordova CLI 全平台卸载\r\nhcordova plugin remove cordova-plugin-inappbrowser \r\n\r\n# 指定平台卸载\r\nhcordova plugin remove cordova-plugin-inappbrowser --platform ohos\r\n```\r\n\r\n\r\n若输出结果包含 `cordova-plugin-inappbrowser`，则表示插件已成功安装。\r\n\r\n## 约束与限制\r\n### 兼容性\r\n\r\n支持：\r\n\r\n| 项目 | 版本/信息 |\r\n|-----|--------|\r\n| SDK | API12+ |\r\n| IDE | DevEco Studio: 5.0+ |\r\n| ROM | 5.1+ |\r\n| Emulator | OpenHarmony 6.0+ |\r\n\r\n在以下版本中已测试通过：\r\n\r\n| 项目 | 版本/信息 |\r\n|-----|--------|\r\n| @cordova-ohos/ohos | 14.0.1-ohos-14.0.1 |\r\n| SDK | 5.0.0(12) |\r\n| IDE | DevEco Studio: 6.0.13.200 |\r\n| ROM | 5.1.0.120 SP3 |\r\n| Emulator | OpenHarmony 6.0.1(21) |\r\n\r\n## 使用示例\r\n\r\n以下示例基于 OHOS 平台，展示插件核心功能的完整使用流程，包含浏览器实例创建、事件监听、导航控制及消息交互，可直接复制到项目中使用（需确保页面存在 id 为 loading 的加载提示容器）。\r\n\r\n```javascript\r\n// 页面加载完成后执行，确保 Cordova 环境及插件初始化完成\r\ndocument.addEventListener('deviceready', function() {\r\n // 创建应用内浏览器实例，加载在线网页，配置窗口样式\r\n const inAppBrowserRef = cordova.InAppBrowser.open(\r\n 'https://example.com',\r\n '_blank',\r\n 'location=yes,closebuttoncolor=#ff0000,fullscreen=no,title=应用内浏览器'\r\n );\r\n\r\n // 1. 监听页面加载开始事件\r\n inAppBrowserRef.addEventListener('loadstart', function(event) {\r\n console.log('开始加载：', event.url);\r\n // 显示加载中提示\r\n document.getElementById('loading').style.display = 'block';\r\n });\r\n\r\n // 2. 监听页面加载完成事件\r\n inAppBrowserRef.addEventListener('loadstop', function(event) {\r\n console.log('加载完成：', event.url);\r\n // 隐藏加载中提示\r\n document.getElementById('loading').style.display = 'none';\r\n\r\n // 注入 JS 脚本，实现页面与应用的消息交互\r\n inAppBrowserRef.executeScript({\r\n code: `\r\n // 监听应用发送的消息\r\n window.addEventListener('message', function(event) {\r\n if (event.data.type === 'FROM_APP') {\r\n console.log('收到应用消息：', event.data.data);\r\n // 向应用发送回复消息\r\n window.opener.postMessage({ type: 'FROM_PAGE', data: '已收到应用消息' }, '*');\r\n }\r\n });\r\n `\r\n });\r\n\r\n // 注入 CSS 样式，修改页面外观\r\n inAppBrowserRef.insertCSS({\r\n code: \"body { background-color: #f5f5f5; font-size: 16px; }\"\r\n });\r\n });\r\n\r\n // 3. 监听页面加载失败事件\r\n inAppBrowserRef.addEventListener('loaderror', function(event) {\r\n console.error('加载失败：', event.url, '错误码：', event.code, '描述：', event.message);\r\n // 显示错误提示并提供重试选项\r\n if (confirm(`页面加载失败：${event.message}\\n是否重试？`)) {\r\n inAppBrowserRef.reload(); // 重试加载\r\n } else {\r\n inAppBrowserRef.close(); // 关闭浏览器窗口\r\n }\r\n });\r\n\r\n // 4. 监听页面发送的消息\r\n inAppBrowserRef.addEventListener('message', function(event) {\r\n console.log('收到页面消息：', event.data);\r\n if (event.data.type === 'FROM_PAGE') {\r\n alert(`页面回复：${event.data.data}`);\r\n }\r\n });\r\n\r\n // 5. 监听浏览器窗口关闭事件\r\n inAppBrowserRef.addEventListener('exit', function() {\r\n console.log('浏览器窗口已关闭');\r\n // 清理事件监听，释放资源\r\n inAppBrowserRef.removeEventListener('loadstart');\r\n inAppBrowserRef.removeEventListener('loadstop');\r\n inAppBrowserRef.removeEventListener('loaderror');\r\n inAppBrowserRef.removeEventListener('message');\r\n inAppBrowserRef.removeEventListener('exit');\r\n });\r\n\r\n // 绑定导航控制按钮事件（示例：后退、前进、刷新、关闭）\r\n document.getElementById('goBack').addEventListener('click', function() {\r\n inAppBrowserRef.goBack(); // 后退\r\n });\r\n document.getElementById('goForward').addEventListener('click', function() {\r\n inAppBrowserRef.goForward(); // 前进\r\n });\r\n document.getElementById('reload').addEventListener('click', function() {\r\n inAppBrowserRef.reload(); // 刷新\r\n });\r\n document.getElementById('closeBrowser').addEventListener('click', function() {\r\n inAppBrowserRef.close(); // 关闭\r\n });\r\n\r\n}, false);\r\n\r\n```\r\n\r\n示例说明：\r\n\r\n- 需先监听 `deviceready` 事件，确保 Cordova 环境及插件初始化完成后再调用插件 API；\r\n\r\n- 页面需添加加载提示容器（id 为 loading）和导航控制按钮（id 分别为 goBack、goForward、reload、closeBrowser）；\r\n\r\n- 示例中实现了加载状态提示、消息交互、导航控制及错误处理，可根据实际业务需求扩展功能。\r\n\r\n## 使用说明\r\n\r\n本插件适配多平台，核心用于在应用内打开网页或本地 HTML 文件，使用前需了解以下配置参数、注意事项及常见问题，确保功能正常运行。\r\n\r\n### 配置参数（options）\r\n\r\n调用 `cordova.InAppBrowser.open` 方法时，第三个参数 `options` 用于配置浏览器窗口样式及行为，所有参数均为可选，具体说明如下：\r\n\r\n| 参数名 | 类型 | 默认值 | 说明 |\r\n|---|---|---|---|\r\n| location | String | yes | 设置 yes 或 no，控制是否显示导航工具栏 |\r\n| hidden | String | no | 设置 yes 或 no，控制是否隐藏内置浏览器窗口 |\r\n| beforeload | String | 无 | 当 URL 将要加载到当前 Web 中时，让宿主应用程序有机会获得控制权，加载非 HTTP(s) 协议的跳转可以触发 |\r\n| clearcache | String | no | 设置 yes 或 no，控制是否清除缓存 |\r\n| clearsessioncache | String | no | 设置 yes 或 no，控制是否清除 session cookie |\r\n| closebuttoncaption | String | 空字符串 | 设置一个字符串，代替 X 的关闭图标 |\r\n| closebuttoncolor | String | 空字符串 | 设置关闭图标或字符串的颜色（返回按钮和标题颜色也受此参数控制），例如 closebuttoncolor=#ff0000 |\r\n| fullscreen | String | no | 设置 yes 或 no，控制是否全屏显示 |\r\n| title | String | 无 | 自定义浏览器窗口标题 |\r\n| navbarheight | Number | 系统默认高度 | 导航条高度，若要保持和 Android 或 iOS 一致，可自定义设定高度 |\r\n| appendUserAgent | String | 无 | 在浏览器 User-Agent 中增加自定义内容 |\r\n### 全局配置（config.xml）\r\n\r\n插件的全局行为、平台特定参数需在项目根目录的 `config.xml` 文件中配置，确保应用内浏览器功能符合业务需求。以下是完整配置示例及参数说明：\r\n\r\n```xml\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n### 使用注意事项\r\n\r\n- API 调用时机：所有插件 API 需在 `deviceready` 事件触发后调用，否则会导致接口调用失败；\r\n\r\n- URL 适配：加载本地 HTML 文件时，需注意路径格式，支持沙箱路径、file 协议路径及项目内相对路径，示例见核心 API 部分；\r\n\r\n- 事件监听：使用 `addEventListener` 注册事件后，在窗口关闭时需通过 `removeEventListener` 移除回调，避免内存泄漏；\r\n\r\n- 跨域问题：注入外部 JS/CSS 时，需确保资源支持跨域访问，否则会导致注入失败；\r\n\r\n- OHOS 特性：OHOS 平台中，`target` 参数设为 `__self` 时仍会打开新页面，不会在主应用中打开；\r\n\r\n- 下载功能：监听 `download` 事件可实现文件下载，需结合 `FileTransfer` 插件使用，确保相关权限已配置。\r\n\r\n### 常见问题\r\n\r\n1. 问题：调用 `cordova.InAppBrowser.open` 无响应？\r\n解决：确认已监听 `deviceready` 事件，插件已成功安装，且参数格式正确（如 URL 格式合法、`target` 参数取值正确）；\r\n\r\n2. 问题：本地 HTML 文件无法加载？\r\n解决：检查文件路径是否正确，OHOS 平台需使用沙箱路径或正确的相对路径，避免路径错误导致加载失败；\r\n\r\n3. 问题：注入 JS/CSS 无效果？\r\n解决：检查资源是否支持跨域访问，内联代码是否存在语法错误，可通过 `console.log` 打印日志排查；\r\n\r\n4. 问题：浏览器窗口关闭后仍有事件回调？\r\n解决：在 `exit` 事件回调中，移除所有已注册的事件监听，释放资源；\r\n\r\n5. 问题：`beforeload` 事件未触发？\r\n解决：该事件仅在加载非 HTTP(s) 协议的跳转时触发，HTTP(s) 协议页面加载不会触发此事件。\r\n\r\n## 核心 API\r\n\r\n插件通过全局对象 `cordova.InAppBrowser.open` 创建应用内浏览器实例，并通过实例暴露导航控制、事件监听等 API。所有 API 需在 `deviceready` 事件触发后调用（确保 Cordova 环境就绪）。\r\n\r\n### 1. 创建浏览器实例（open）\r\n\r\n`cordova.InAppBrowser.open` 是创建应用内浏览器的核心方法，支持配置窗口样式、加载目标地址等参数，返回浏览器实例对象（`InAppBrowserObject`）。\r\n\r\n#### 方法说明\r\n\r\n```javascript\r\nconst inAppBrowserRef = cordova.InAppBrowser.open(\r\n url, // 加载的 URL 或本地文件路径\r\n target, // 窗口目标（决定打开方式）\r\n options // 窗口样式配置（可选）\r\n);\r\n```\r\n\r\n#### 参数说明\r\n\r\n**Url** 参数说明：支持在线网页、本地路径等，举例如下：\r\n\r\n```javascript\r\n// 加载 rawfile/local-url.html\r\nvar ref = cordova.InAppBrowser.open('/local-url.html');\r\n// 加载沙箱路径文件 /data/storage/el2/base/files/local-url.html\r\ncordova.InAppBrowser.open('/data/storage/el2/base/files/index.html', '_blank');\r\n// 使用 file 协议加载沙箱路径文件 /data/storage/el2/base/files/local-url.html\r\ncordova.InAppBrowser.open('file:///data/storage/el2/base/files/index.html', '_blank');\r\n// 加载在线网页\r\nvar ref = cordova.InAppBrowser.open('https://developer.huawei.com', '_blank');\r\n```\r\n\r\n**target** 参数说明:\r\n\r\n```javascript\r\n__blank：打开新页面\r\n__system：系统浏览器打开\r\n__self：OHOS 中仍打开新页面，不在主应用打开\r\n```\r\n\r\n**options** 参数说明：详见“配置参数（options）”部分。\r\n\r\n### 2. 浏览器实例方法（InAppBrowserObject）\r\n\r\n通过 `cordova.InAppBrowser.open` 返回的 `InAppBrowserObject` 实例，可调用以下方法控制浏览器行为：\r\n\r\n| 方法名 | 功能说明 | 示例代码 |\r\n|---|---|---|\r\n| show() | 显示隐藏的浏览器窗口（需先通过 `hidden=yes` 隐藏） | `inAppBrowserRef.show();` |\r\n| hide() | 隐藏浏览器窗口（不关闭，可通过 `show()` 重新显示） | `inAppBrowserRef.hide();` |\r\n| close() | 关闭浏览器窗口，释放资源 | `inAppBrowserRef.close();` |\r\n| executeScript(options) | 在浏览器页面中执行 JavaScript 代码，支持注入脚本文件或内联代码 | `javascript // 注入内联代码（修改页面标题） inAppBrowserRef.executeScript({ code: \"document.title = '修改后的标题';\" }); // 注入外部脚本文件 inAppBrowserRef.executeScript({ file: \"https://example.com/scripts/custom.js\" });` |\r\n| insertCSS(options) | 向浏览器页面中插入 CSS 样式，支持注入样式文件或内联样式 | `javascript // 注入内联样式（修改 body 背景色） inAppBrowserRef.insertCSS({ code: \"body { background-color: #f5f5f5; }\" }); // 注入外部样式文件 inAppBrowserRef.insertCSS({ file: \"https://example.com/styles/custom.css\" });` |\r\n| goBack() | 导航到上一页（若存在历史记录），无返回值 | `inAppBrowserRef.goBack();` |\r\n| goForward() | 导航到下一页（若存在历史记录），无返回值 | `inAppBrowserRef.goForward();` |\r\n| reload() | 刷新当前页面，无返回值 | `inAppBrowserRef.reload();` |\r\n| reloadIgnoringCache() | 刷新当前页面，忽略缓存（强制加载最新内容） | `inAppBrowserRef.reloadIgnoringCache();` |\r\n| stopLoading() | 停止当前页面加载（如用户点击“取消加载”） | `inAppBrowserRef.stopLoading();` |\r\n#### 示例代码\r\n\r\n```javascript\r\nvar ref = window.open(\"https://www.chuzhitong.com\", \r\n '_blank', \r\n 'location=yes,hidden=no,closebuttoncolor=#ff0000,fullscreen=yes');\r\n// 加载非 HTTP(s) 协议的跳转可以触发\r\nref.addEventListener(\"beforeload\", function(url){\r\n alert(\"beforeload function:\"+url);\r\n});\r\nref.addEventListener(\"loadstart\", function(){\r\n console.log(\"loadstart function\");\r\n});\r\nref.addEventListener(\"loadstop\", function(){\r\n // 执行 js 返回 arrayBuffer 数据\r\n ref.executeScript({code:\"function test(){console.log('execute function');\r\n let buffer = new ArrayBuffer(1);\r\n let view = new Uint8Array(buffer);\r\n view[0] = 255; return buffer;} test();\"},function(message){\r\n // message js 执行结果的返回值支持 string/number/bool/array/arrayBuffer\r\n function stringToUint8Array(str){\r\n var arr = [];\r\n for (var i = 0, j = str.length; i < j; ++i) {\r\n arr.push(str.charCodeAt(i));\r\n }\r\n var tmpUint8Array = new Uint8Array(arr);\r\n return tmpUint8Array\r\n }\r\n var temp = stringToUint8Array(atob(message));\r\n console.log(\"execute callback:\"+temp[0]);\r\n });\r\n // 执行 js 并调用 postMessage 通知主浏览器\r\n // 消息函数例如 cordova_iab.postMessage(\"\")\r\n ref.executeScript({ code: \"\r\n var message = 'this is the message';\r\n var messageObj = {my_message: message};\r\n var stringifiedMessageObj = JSON.stringify(messageObj);\r\n cordova_iab.postMessage(stringifiedMessageObj);\"\r\n });\r\n // 加载 rawfile/www/js/test.js，www.example.com：默认加载的 rawfile 的域名\r\n ref.executeScript({ file: \"https://www.example.com/www/js/test.js\" }, function(){\r\n ref.executeScript({code:\"test();\"});// 加载成功后，执行 test.js 文件里面的函数\r\n console.log(\"execute callback:\");\r\n });\r\n // 加载在线 js，支持跨域加载\r\n ref.executeScript({ file: \"https://www.*****.com/js/test.js\" });\r\n // 加载 rawfile/www/js/test.css，www.example.com：默认加载的 rawfile 的域名\r\n ref.insertCSS({ file: \"https://www.example.com/css/test.css\" });\r\n // 加载在线 css\r\n ref.insertCSS({ file: \"https://www.****.com/css/test.css\" }, function(){\r\n console.log(\"css execute callback\");\r\n });\r\n // 插入 css 代码，无回调函数\r\n ref.insertCSS({ code: \"body{font-size:200px;}\" });\r\n // 插入 css 代码，有回调函数\r\n ref.insertCSS({ code: \"body{font-size:200px;}\" }, function(){\r\n console.log(\"css execute callback\");\r\n });\r\n console.log(\"loadstop function\");\r\n});\r\nref.addEventListener(\"message\", function(message){\r\n console.log(\"message function:\"+message);\r\n});\r\nref.addEventListener(\"exit\", function(){\r\n console.log(\"exit function\");\r\n});\r\nref.addEventListener(\"download\", function(paras){\r\n // 应用可以根据下载的 url，设定保存的文件名\r\n console.log(\"download:\"+JSON.stringify(paras));\r\n function downloadInAppBrowser(uri, fileName) {\r\n function onErrorReadFile(error) {\r\n }\r\n function successFun(fileEntry) {\r\n }\r\n function failFun(error) {\r\n console.log(\"An error has occurred: Code = \" + error.code);\r\n console.log(\"upload error source \" + error.source);\r\n console.log(\"upload error target \" + error.target);\r\n }\r\n function progressFun(progressEvent) {\r\n var progress = progressEvent.loaded / progressEvent.total * 100;\r\n console.log(\"download:\"+progress);\r\n }\r\n window.resolveLocalFileSystemURL(cordova.file.externalDataDirectory, \r\n function(dirEntry) {\r\n var targetPath = dirEntry.toURL() + fileName;\r\n var fileTransfer = new FileTransfer();\r\n fileTransfer.onprogress = progressFun;\r\n fileTransfer.download(\r\n uri,\r\n targetPath,\r\n successFun,\r\n failFun,\r\n false,\r\n {}\r\n );\r\n });\r\n }\r\n downloadInAppBrowser(paras.url, \"ceshi.apk\");\r\n});\r\nref.addEventListener(\"customscheme\", function(para){\r\n console.log(\"customscheme function:\"+JSON.stringify(para));\r\n});\r\n```\r\n\r\n### 3. 事件监听\r\n\r\n`InAppBrowserObject` 支持监听页面加载、URL 变化、窗口关闭等事件，通过 `addEventListener` 注册事件回调，`removeEventListener` 移除回调（避免内存泄漏）。\r\n\r\n#### 支持的事件类型\r\n\r\n| 事件名 | 触发时机 | 事件参数（event 对象属性） |\r\n|---|---|---|\r\n| loadstart | 页面开始加载时（包括初始加载和导航到新页面） | `url`：当前加载的 URL；`code`：状态码（仅部分平台支持）；`message`：状态信息（仅部分平台支持） |\r\n| loadstop | 页面加载完成时（DOM 渲染完成，资源可能仍在加载） | 同 `loadstart` |\r\n| loaderror | 页面加载失败时（如网络错误、404、500 等） | `url`：加载失败的 URL；`code`：错误码（如 -1：网络错误，404：未找到）；`message`：错误描述（如“网络连接超时”） |\r\n| exit | 浏览器窗口被关闭时（用户点击关闭按钮或调用 `close()` 方法） | 无额外参数 |\r\n| beforeload | 页面即将加载新 URL 前（可拦截 URL，实现自定义路由） | `url`：即将加载的 URL；`navigationType`：导航类型（如 `click`：用户点击，`reload`：刷新） |\r\n| message | 浏览器页面向应用发送消息时（通过 `window.opener.postMessage` 发送） | `data`：消息内容；`origin`：消息来源 URL；`source`：消息发送源（仅部分平台支持） |\r\n#### 示例：事件监听与 URL 拦截\r\n\r\n```javascript\r\ndocument.addEventListener('deviceready', function() {\r\n const inAppBrowserRef = cordova.InAppBrowser.open(\r\n 'https://example.com',\r\n '_blank',\r\n 'location=yes'\r\n );\r\n\r\n // 1. 监听页面加载状态\r\n inAppBrowserRef.addEventListener('loadstart', function(event) {\r\n console.log('开始加载：', event.url);\r\n // 显示加载中提示（如在主应用中显示进度条）\r\n document.getElementById('loading').style.display = 'block';\r\n });\r\n\r\n inAppBrowserRef.addEventListener('loadstop', function(event) {\r\n console.log('加载完成：', event.url);\r\n \r\n // 隐藏加载中提示\r\n document.getElementById('loading').style.display = 'none';\r\n\r\n // 加载完成后注入 JS（监听页面消息）\r\n inAppBrowserRef.executeScript({\r\n code: `\r\n // 监听应用发送的消息\r\n window.addEventListener('message', function(event) {\r\n if (event.data.type === 'FROM_APP') {\r\n console.log('收到应用消息：', event.data.data);\r\n // 页面向应用发送消息\r\n window.opener.postMessage({ type: 'FROM_PAGE', data: '已收到消息' });\r\n }\r\n });\r\n `\r\n });\r\n });\r\n\r\n inAppBrowserRef.addEventListener('loaderror', function(event) {\r\n console.error('加载失败：', event.url, '错误码：', event.code, '描述：', event.message);\r\n // 显示错误提示，提供重试按钮\r\n alert(`页面加载失败：${event.message}\\n是否重试？`);\r\n // 重试加载\r\n inAppBrowserRef.reload();\r\n });\r\n\r\n\r\n // 3. 监听页面发送的消息\r\n inAppBrowserRef.addEventListener('message', function(event) {\r\n console.log('收到页面消息：', event.data);\r\n if (event.data.type === 'FROM_PAGE') {\r\n alert(`页面回复：${event.data.data}`);\r\n }\r\n });\r\n\r\n // 4. 监听窗口关闭事件\r\n inAppBrowserRef.addEventListener('exit', function() {\r\n console.log('浏览器窗口已关闭');\r\n // 释放资源，清理事件监听\r\n inAppBrowserRef.removeEventListener('loadstart');\r\n inAppBrowserRef.removeEventListener('loadstop');\r\n inAppBrowserRef.removeEventListener('loaderror');\r\n inAppBrowserRef.removeEventListener('beforeload');\r\n inAppBrowserRef.removeEventListener('message');\r\n inAppBrowserRef.removeEventListener('exit');\r\n });\r\n\r\n}, false);\r\n```\r\n\r\n## 目录结构\r\n\r\n```\r\ncordova-plugin-inappbrowser/\r\n├── src/ # 源代码目录\r\n│ └── main/ # 主要源代码\r\n│ ├── cpp/ # C++ 原生代码\r\n│ │ └── inappbrowser/ # 应用内浏览器模块\r\n│ │ ├── InAppBrowser.cpp # 应用内浏览器功能的 C++ 实现\r\n│ │ └── InAppBrowser.h # 应用内浏览器功能的头文件\r\n│ └── ets/ # ArkTS 代码（OpenHarmony API）\r\n│ └── components/ # 组件目录\r\n│ └── InAppBrowser/ # 应用内浏览器组件\r\n│ └── BrowserAction.ets # 浏览器动作的 ArkTS 实现\r\n├── www/ # Web 资源目录\r\n│ └── inappbrowser.js # JavaScript 应用内浏览器接口（Cordova 桥接层）\r\n├── .gitignore # Git 忽略文件配置\r\n├── LICENSE # 项目开源许可证\r\n├── OAT.xml # OpenHarmony 审核配置文件\r\n├── package.json # Node.js 包配置\r\n├── plugin.xml # Cordova 插件描述文件（核心配置）\r\n└── README.md # 项目说明文档\r\n```\r\n\r\n## 贡献代码\r\n\r\n使用过程中发现任何问题都可以提 [Issue](https://gitcode.com/CPF-Cordova/cordova-plugin-inappbrowser/issues) ，当然也非常欢迎发 [PR](https://gitcode.com/CPF-Cordova/cordova-plugin-inappbrowser/pulls) 共建。\r\n\r\n## 许可证\r\n\r\n本插件基于 **Apache License 2.0** 开源，详见 [LICENSE](LICENSE) 文件。\r\n\r\n## 官方资源\r\n\r\n1. **Apache Cordova**：访问 [Apache Cordova 官方仓库](https://github.com/apache/cordova-plugin-inappbrowser)\r\n\r\n2. **OHOS cordova**：访问 [https://gitcode.com/CPF-Cordova/cordova-plugin-inappbrowser](https://gitcode.com/CPF-Cordova/cordova-plugin-inappbrowser)\r\n","readmeFilename":"README.md"}