跳到主要内容
版本：v6

@capacitor/inappbrowser

InAppBrowser 插件提供了一个网页浏览器视图，允许你在外部加载任意网页。它的行为类似于标准网页浏览器，可用于加载不受信任的内容而不会危及应用程序的安全。它提供了三种不同的方式来打开 URL：在 WebView 中、在应用内系统浏览器中（Android 的 Custom Tabs 和 iOS 的 SFSafariViewController），以及在设备的默认浏览器中。

安装​

npm install @capacitor/inappbrowser
npx cap sync

支持的平台​

  • iOS
  • Android

Android​

InAppBrowser 插件要求最低 Android SDK 目标版本为 26。这比 Capacitor 应用程序默认的版本要高。你可以在 android/variables.gradle 文件中更新此值。

ext {
    minSdkVersion = 26
}

使用示例​

在外部浏览器中打开​

import { InAppBrowser } from '@capacitor/inappbrowser';
await InAppBrowser.openInExternalBrowser({
    url: "https://www.google.com"
});

在系统浏览器中打开（Android 使用 Custom Tabs，iOS 使用 SFSafariViewController）​

import { InAppBrowser, DefaultSystemBrowserOptions } from '@capacitor/inappbrowser';
await InAppBrowser.openInSystemBrowser({
    url: "https://www.google.com",
    options: DefaultSystemBrowserOptions
});

在 Web View 中打开​

import { InAppBrowser, DefaultWebViewOptions } from '@capacitor/inappbrowser';
await InAppBrowser.openInWebView({
    url: "https://www.google.com",
    options: DefaultWebViewOptions
});

关闭（Web View 或系统浏览器）​

import { InAppBrowser } from '@capacitor/inappbrowser';
await InAppBrowser.close();

添加监听器​

import { InAppBrowser } from '@capacitor/inappbrowser';
await InAppBrowser.addListener('browserClosed', () => {
    console.log("浏览器已关闭。");
});

await InAppBrowser.addListener('browserPageLoaded', () => {
    console.log("浏览器页面已加载。");
});

移除所有监听器​

import { InAppBrowser } from '@capacitor/inappbrowser';
InAppBrowser.removeAllListeners();

API​

openInWebView(...)​

openInWebView(model: OpenInWebViewParameterModel) => Promise<void>

在你的移动应用中，使用应用程序内的自定义 Web 视图打开给定 URL 的网页内容。

参数类型说明
model
OpenInWebViewParameterModel
用于在 Web 视图中打开 URL 的参数

openInSystemBrowser(...)​

openInSystemBrowser(model: OpenInSystemBrowserParameterModel) => Promise<void>

在你的移动应用中，使用 iOS 的 SafariViewController 和 Android 的 Custom Tabs 打开给定 URL 的网页内容。

参数类型说明
model
OpenInSystemBrowserParameterModel
用于在系统浏览器中打开 URL 的参数

openInExternalBrowser(...)​

openInExternalBrowser(model: OpenInDefaultParameterModel) => Promise<void>

在你的移动应用之外，在一个独立的浏览器中打开给定 URL 的网页内容。

参数类型说明
model
OpenInDefaultParameterModel
用于在外部浏览器中打开 URL 的参数

close()​

close() => Promise<void>

关闭当前活动的浏览器。可用于关闭通过 openInSystemBrowser 或 openInWebView 操作启动的浏览器。

addListener('browserClosed' | 'browserPageLoaded', ...)​

addListener(eventName: 'browserClosed' | 'browserPageLoaded', listenerFunc: () => void) => Promise<PluginListenerHandle>

为指定的浏览器事件添加监听器。

参数类型说明
eventName'browserClosed' | 'browserPageLoaded'要监听的浏览器事件名称：'browserClosed' 或 'browserPageLoaded'。
listenerFunc() => void事件发生时调用的函数。

返回值: 

Promise<PluginListenerHandle>

removeAllListeners()​

removeAllListeners() => void

移除所有浏览器事件的监听器。

接口​

OpenInWebViewParameterModel​

定义在网页视图中打开 URL 的选项。

属性类型描述
options
WebViewOptions
一个包含要应用于 Web View 的某些配置信息的结构体。

WebViewOptions​

属性类型描述
showURLboolean在 Web View 上显示 URL。
showToolbarboolean在 Web View 上显示工具栏。
clearCacheboolean在打开新窗口前清除 Web View 的 cookie 缓存。
clearSessionCacheboolean在打开新窗口前清除会话 cookie 缓存。
mediaPlaybackRequiresUserActionboolean防止 HTML5 音频或视频自动播放。
closeButtonTextstring设置 Web View 上关闭按钮显示的文本。
toolbarPosition
ToolbarPosition
设置在 Web View 上显示工具栏的位置。
showNavigationButtonsboolean显示导航按钮。
leftToRightboolean交换导航按钮和关闭按钮的位置。
customWebViewUserAgentstring | null设置用于打开 Web View 的自定义用户代理。如果为空或未设置，该参数将被忽略。
android
AndroidWebViewOptions
Android 平台特定的 Web View 选项。
iOS
iOSWebViewOptions
iOS 平台特定的 Web View 选项。

AndroidWebViewOptions​

属性类型描述
allowZoomboolean显示 Android 浏览器的缩放控件。
hardwareBackboolean使用硬件返回按钮在 Web View 的历史记录中向后导航。如果没有上一页，Web View 将关闭。
pauseMediaboolean使 Web View 随应用暂停/恢复，以停止后台音频播放。

iOSWebViewOptions​

属性类型描述
allowOverScrollboolean开启 Web View 的弹性滚动属性。
enableViewportScaleboolean防止通过 meta 标签进行视口缩放。
allowInLineMediaPlaybackboolean允许 HTML5 媒体内联播放，即在浏览器窗口内播放，而不是使用设备特定的播放界面。注意：HTML 的 video 元素也必须包含 webkit-playsinline 属性。
surpressIncrementalRenderingboolean等待接收到所有新的视图内容后再进行渲染。
viewStyle
iOSViewStyle
设置 Web View 的呈现样式。
animationEffect
iOSAnimation
设置 Web View 的过渡动画样式。

定义在系统浏览器中打开 URL 的选项。

属性类型说明
options
SystemBrowserOptions
包含应用于系统浏览器的一些配置项的结构体。

SystemBrowserOptions​

属性类型说明
android
AndroidSystemBrowserOptions
Android 系统浏览器的特定选项。
iOS
iOSSystemBrowserOptions
iOS 系统浏览器的特定选项。

AndroidSystemBrowserOptions​

属性类型说明
showTitleboolean启用标题显示。
hideToolbarOnScrollboolean滚动时隐藏工具栏。
viewStyle
AndroidViewStyle
设置 CustomTabs 的呈现样式。
bottomSheetOptions
AndroidBottomSheet
当此样式被选为 viewStyle 时，设置底部工作表的选项。如果 viewStyle 是 FULL_SCREEN，此项将被忽略。
startAnimation
AndroidAnimation
设置浏览器出现时的开始动画。
exitAnimation
AndroidAnimation
设置浏览器消失时的退出动画。

AndroidBottomSheet​

属性类型说明
heightnumber设置底部工作表的高度。最小值为屏幕高度的 50%。如果未传递值，将默认使用最小值。
isFixedboolean设置底部工作表是否为固定模式。

iOSSystemBrowserOptions​

属性类型说明
closeButtonText
DismissStyle
设置用作关闭按钮标题的文本。
viewStyle
iOSViewStyle
设置 SafariViewController 的呈现样式。
animationEffect
iOSAnimation
设置 SafariViewController 的过渡样式。
enableBarsCollapsingboolean启用向下滚动时工具栏折叠。
enableReadersModeboolean启用阅读器模式。

OpenInDefaultParameterModel​

定义在外部浏览器中打开 URL 的选项，也被其他参数模型使用。

属性类型说明
urlstring要打开的 URL。必须以 'http' 或 'https' 作为协议前缀。

PluginListenerHandle​

属性类型
remove() => Promise<void>

枚举​

ToolbarPosition​

成员
TOP
BOTTOM

iOSViewStyle​

成员
PAGE_SHEET
FORM_SHEET
FULL_SCREEN

iOSAnimation​

成员
FLIP_HORIZONTAL
CROSS_DISSOLVE
COVER_VERTICAL

AndroidViewStyle​

成员
BOTTOM_SHEET
FULL_SCREEN

AndroidAnimation​

成员
FADE_IN
FADE_OUT
SLIDE_IN_LEFT
SLIDE_OUT_RIGHT

DismissStyle​

成员
CLOSE
CANCEL
DONE

Contents

编辑此页