@capgo/capacitor-inapp浏览器
Native in-app browser for Capacitor with managed WebViews, native UI layering, private sessions, proxying, downloads, popups, and app messaging.
概述
概述部分@capgo/capacitor-inappbrowser 为 Capacitor 应用提供了两个浏览器路径: open() 用于系统浏览器体验和 openWebView() 用于您的应用可以调整大小、隐藏、发送消息、脚本、代理和层化的管理本机 WebView。
使用它时,页面需要比简单的外部浏览器更复杂的功能:OAuth 和结帐流程,嵌入式支持门户,付款屏幕,视频通话,文档门户,交互式Web应用,或者任何流程,应用需要在实时Web内容周围拥有本地控制。
包名已更改。常见用例
常见用例- 在Ionic或Capacitor UI上呈现一个实时浏览器页面
toBack,sendToBack(),bringToFront(),transparentBackground, 和dispatchInputEvent(). - 构建部分屏幕浏览器,底部弹出窗口和画中画Web视图
width,height,x,y, 和updateDimensions(). - 让用户在Android和iOS上在自定义大小的浏览器框架外面点击Capacitor应用。
- 在不使用持久性网站存储的情况下,使用
persistWebViewData: false和clearAllBrowsingData(). - 使用
hidden,hide()和show()同时保持页面状态。 - 嵌入需要请求代理、文件上传、下载、弹出控制、Google Pay 支持、链接处理和应用到页面消息的高级 Web 应用。
_blank核心功能
open- 使用自定义工具栏、大小、原生导航、消息、脚本、代理、下载、弹出和数据控制的管理原生 WebView 打开 URL。SFSafariViewController- 将管理的浏览器放在或在__CAPGO_KEEP_0__主 WebView 之后的后台。openWebView- 将点击、触摸和滚动事件转发到后台的原生应用 UI 后的浏览器。sendToBack/bringToFront- Moves a managed browser behind or above the Capacitor host WebView.dispatchInputEvent- 将点击、触摸和滚动事件转发到原生应用 UI 后的浏览器。updateDimensions- 改变管理的 WebView 尺寸和位置,无需重新加载页面。hide/show- 保持管理的 WebView 加载,即使移除或恢复其本机呈现。postMessage/executeScript- 连接 Capacitor 应用程序与 JavaScript 运行在管理页面内。clearAllBrowsingData/persistWebViewData- 控制 cookie、缓存、存储、IndexedDB 和会话持久性。handleDownloads- 支持门户、上传流程、付款页面和嵌入式 Web 应用程序 - 代理规则和弹出事件。
- 公共 API
- 标题 "公共 API"| - 方法 | - 描述 |
|---|---|
goBack | - 如果可能,在 WebView 的历史记录中后退。 |
open | - 在 Android 上使用 Chrome 自定义标签页,在 iOS 上使用 SFSafariViewController 打开 URL 在全屏窗口。 |
clearCookies | - 清除 URL 的 Cookie 时 id 不填写,适用于所有打开的网页视图。 |
clearAllCookies | 清除所有Cookie 当 id 不填写,适用于所有打开的网页视图。 |
clearCache | 清除缓存 当 id 不填写,适用于所有打开的网页视图。 |
clearAllBrowsingData | 清除Cookie、缓存、本地存储、会话存储、IndexedDB和其他浏览数据从默认存储和管理的WebViews。 |
getCookies | 获取特定URL的Cookie。 |
close | 关闭网页视图。 当 id 不填写,关闭当前网页视图。 |
hide | 隐藏网页视图而不关闭它。使用show()来将其恢复。 当 id 不填写,目标当前网页视图。 |
show | 显示之前隐藏的网页视图。 当 id 是省略的,目标是激活的webview。 |
sendToBack | 将原生浏览器移到Capacitor主机WebView后面,使应用UI可以出现在它的上面。 |
bringToFront | 将一个在主机WebView后面的浏览器移到前面。 |
dispatchInputEvent | 将点击、触摸或滚动输入分发到管理的浏览器;坐标相对于浏览器视图。 |
openWebView | 在一个新的webview中打开url,带有工具栏和增强功能,如摄像头访问、文件访问、监听事件、注入javascript、双向通信等。 |
executeScript | 将javascriptcode注入InAppBrowser窗口。当 id 是省略的,执行所有打开的webview。 |
postMessage | 将事件发送到webview(内嵌浏览器)。在页面中使用 window.addEventListener('messageFromNative', listenerFunc)。事件 detail 的载荷必须是可序列化的JSON。当 id 是省略的,广播到所有打开的webview。 |
takeScreenshot | 捕获当前webview视图作为一个PNG截图。当 id 如果省略,目标是当前的webview。 |
setUrl | 设置webview的URL。 当 id 如果省略,目标是当前的webview。 |
addListener | 仅在openWebView时监听URL变化。 |
addListener | 仅在openWebView时监听 buttonNearDoneClick; payload包含webview id. |
addListener | 仅在openWebView时监听关闭点击。 |
addListener | 当用户点击确认按钮时触发,用于openWebView的shareDisclaimer和closeModal。 |
addListener | 当webview向app发送事件时触发。 使用 window.mobileApp.postMessage(...) 在页面中使用,并确保payload是JSON序列化的。 |
addListener | 在API插件、原生截图按钮或注入的JavaScript桥接时捕获截图时触发。 |
addListener | 当页面加载时触发。 |
addListener | 当页面加载错误时将触发。 |
addListener | 当本地保存文件时将触发本地下载处理。通过 handleDownloads: true 打开Web视图时启用。 |
addListener | 当本地下载处理失败时将触发。通过 handleDownloads: true 打开Web视图时启用。 |
addListener | 当页面打开弹出窗口/新窗口时将触发。使用返回的弹出窗口ID与 executeScript, postMessage, show, hide进行交互。 close. |
addListener | 监听由本地运行时代理的请求。优先 addProxyHandler() 而不是直接调用此方法。 |
addListener | 监听由管理页面发出的JavaScript控制台输出。通过 captureConsoleLogs: true 打开Web视图时启用。 |
handleProxyRequest | 本地方法由 addProxyHandler() 将代理决策发送回原生。将原始内容转发。 phase 回复手动时使用。 proxyRequest 监听器。 |
removeAllListeners | 移除此插件的所有监听器。 |
reload | 重新加载当前网页。 |
updateDimensions | 更新网视图的尺寸。允许在运行时更改网视图的大小和位置。当 id 设置网视图的启用安全顶部边距。允许在运行时更改网视图的安全顶部边距。当 |
setEnabledSafeTopMargin | 设置网视图的启用安全底部边距。允许在运行时更改网视图的安全底部边距。当 id 在 Web 上,这个方法是一个空操作,并且不会改变布局。 |
setEnabledSafeBottomMargin | 在 Web 上,这个方法是一个空操作,并且不会改变布局。 id 在 Web 上,这个方法是一个空操作,并且不会改变布局。 |
openSecureWindow | 打开一个安全的 OAuth2 窗口。 在 Web 上,返回重定向的 URL 通过一个 BroadcastChannel在移动设备上,注册一个自定义的重定向 URI 在您的应用配置中。查看入门指南以获取完整的 HTML、Info.plist 和 AndroidManifest 示例。 |
参考值
标题:参考值使用这些值与工具栏选项打开内嵌浏览器或 WebView。
工具栏类型
标题:工具栏类型| 值 | 用户将找到 |
|---|---|
activity | 带有关闭和分享控件的简单工具栏。 |
compact | 带有关闭控件的简单工具栏。 |
navigation | 带有后退和前进控件的全功能导航工具栏。 |
blank | 无工具栏。 |
真实来源
名为“真实来源”的部分此参考资料是从 src/definitions.ts 在 capacitor-inappbrowser.
继续阅读capgo/capacitor-inappbrowser
名为“继续阅读capgo/capacitor-inappbrowser”的部分如果您正在使用 capgo/capacitor-inappbrowser 来规划原生插件工作,连接它到 使用capgo/capacitor-inappbrowser 来使用在使用capgo/capacitor-inappbrowser中的原生能力 Capgo 插件目录 为产品工作流程在 Capgo 插件目录中 Capacitor 插件由 Capgo 为实现细节在 Capacitor 插件由 Capgo 中 添加或更新插件 为实现细节在添加或更新插件,并 Ionic 企业插件替代方案 为产品工作流程在 Ionic 企业插件替代方案中