跳到主要内容
版本：v6

@capacitor/inappbrowser

InAppBrowser 插件提供一个 Web 浏览器视图，允许您从外部加载任何网页。它的行为类似于标准 Web 浏览器，对于加载不受信任的内容而不危及应用安全非常有用。它提供了三种不同的 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
});

在 WebView 中打开​

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

关闭（WebView 或系统浏览器）​

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

添加监听器​

import { InAppBrowser } from '@capacitor/inappbrowser';
await InAppBrowser.addListener('browserClosed', () => {
    console.log("browser was closed.");
});

await InAppBrowser.addListener('browserPageLoaded', () => {
    console.log("browser was loaded.");
});

移除所有监听器​

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

API​

openInWebView(...)​

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

在您的移动应用中使用自定义 WebView 打开给定 URL 的 Web 内容。

参数类型描述
model
OpenInWebViewParameterModel
在 WebView 中打开 URL 的参数

openInSystemBrowser(...)​

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

在您的移动应用中使用系统浏览器打开给定 URL 的 Web 内容，在 iOS 上使用 SafariViewController，在 Android 上使用 Custom Tabs。

参数类型描述
model
OpenInSystemBrowserParameterModel
在系统浏览器中打开 URL 的参数

openInExternalBrowser(...)​

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

在移动应用外部的单独浏览器中打开给定 URL 的 Web 内容。

参数类型描述
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​

定义在 WebView 中打开 URL 的选项。

属性类型描述
options
WebViewOptions
包含要应用于 WebView 的一些配置的结构。

WebViewOptions​

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

AndroidWebViewOptions​

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

iOSWebViewOptions​

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

OpenInSystemBrowserParameterModel​

定义在系统浏览器中打开 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

编辑此页