提供具有网页显示能力的Web组件,webview.WebviewController提供web控制能力。

说明

Web暂不支持混合页面场景。

需要权限

访问在线网页时需添加网络权限:ohos.permission.INTERNET,具体申请方式请参考权限申请声明。

子组件

构造函数

init(String, WebviewController)

public init(src!: String, controller!: WebviewController = WebviewController())

参数名

参数类型

必填

默认值

描述

src

String

-

网页资源地址。如果访问本地资源文件,请使用$rawfile或者resource协议。如果加载应用包外沙箱路径的本地资源文件,请使用file://沙箱文件路径。

controller

WebviewController

WebviewController()

设置Web控制器。

init(CJResource, WebviewController)

public init(src!: CJResource, controller!: WebviewController = WebviewController())

参数名

参数类型

必填

默认值

描述

src

CJResource

-

网页资源地址。如果访问本地资源文件,请使用$rawfile或者resource协议。如果加载应用包外沙箱路径的本地资源文件,请使用file://沙箱文件路径。

controller

WebviewController

-

设置Web控制器。

函数

domStorageAccess(Bool)

public func domStorageAccess(enabled: Bool): This

设置是否开启文档对象模型存储接口(DOM Storage API)权限。

参数名

参数类型

必填

默认值

描述

enabled

Bool

false

是否开启文档对象模型存储接口(DOM Storage API)权限。

fileAccess(Bool)

public func fileAccess(enabled: Bool): This

设置是否开启应用中文件系统的访问,默认启用。rawfile路径的文件不受该属性影响而限制访问。

参数名

参数类型

必填

默认值

描述

enabled

Bool

true

是否开启应用中文件系统的访问,默认启用。

imageAccess(Bool)

public func imageAccess(enabled: Bool): This

设置是否允许自动加载图片资源,默认允许。

参数名

参数类型

必填

默认值

描述

enabled

Bool

true

是否允许自动加载图片资源。

mixedMode(Bool)

public func mixedMode(mixMode: MixMode): This

设置是否允许加载超文本传输协议(HTTP)和超文本传输安全协议(HTTPS)混合内容,默认不允许加载HTTP和HTTPS混合内容。

参数名

参数类型

必填

默认值

描述

mixMode

MixMode

MixMode.None

设混合内容。

onlineImageAccess(Bool)

public func onlineImageAccess(enabled: Bool): This

设置是否允许从网络加载图片资源(通过HTTP和HTTPS访问的资源),默认允许访问。

参数名

参数类型

必填

默认值

描述

enabled

Bool

true

是否允许从网络加载图片资源。

zoomAccess(Bool)

public func zoomAccess(enabled: Bool): This

设置是否支持手势进行缩放,默认允许执行缩放。

参数名

参数类型

必填

默认值

描述

enabled

Bool

true

设置是否支持手势进行缩放。

geolocationAccess(Bool)

public func zoomAccess(enabled: Bool): This

设置是否开启获取地理位置权限,默认开启。

参数名

参数类型

必填

默认值

描述

enabled

Bool

true

设置是否开启获取地理位置权限。

verticalScrollBarAccess(Bool)

public func verticalScrollBarAccess(enabled: Bool): This

设置是否显示纵向滚动条,包括系统默认滚动条和用户自定义滚动条。默认显示。

参数名

参数类型

必填

默认值

描述

enabled

Bool

true

设置是否显示纵向滚动条。

nestedScroll(NestedScrollMode, NestedScrollMode)

public func nestedScroll(
        scrollForward !: NestedScrollMode = NestedScrollMode.SELF_FIRST,
        scrollBackward !: NestedScrollMode = NestedScrollMode.SELF_FIRST
    ): This

设置是否显示纵向滚动条,包括系统默认滚动条和用户自定义滚动条。默认显示。

参数名

参数类型

必填

默认值

描述

scrollForward

NestedScrollMode

NestedScrollMode.SELF_FIRST

可滚动组件往末尾端滚动时的嵌套滚动选项。

scrollBackward

NestedScrollMode

NestedScrollMode.SELF_FIRST

可滚动组件往起始端滚动时的嵌套滚动选项。

darkMode(WebDarkMode)

public func darkMode(mode: WebDarkMode): This

设置Web深色模式,默认关闭。当深色模式开启时,Web将启用媒体查询prefers-color-scheme中网页所定义的深色样式,若网页未定义深色样式,则保持原状。如需开启强制深色模式,建议配合forceDarkAccess使用。

参数名

参数类型

必填

默认值

描述

mode

WebDarkMode

WebDarkMode.Off

设置Web的深色模式为关闭、开启或跟随系统。

forceDarkAccess(Bool)

public func forceDarkAccess(access: Bool): This

设置网页是否开启强制深色模式。默认关闭。该属性仅在darkMode开启深色模式时生效。

参数名

参数类型

必填

默认值

描述

access

Bool

false

设置网页是否开启强制深色模式。true:开启,false:关闭。

枚举说明

MixMode

枚举值

描述

All

允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。

Compatible

混合内容兼容性模式,部分不安全的内容可能被加载。

None

不允许加载HTTP和HTTPS混合内容。

NestedScrollMode

枚举值

描述

SELF_ONLY

只自身滚动,不与父组件联动。

SELF_FIRST

自身先滚动,自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后,如果父组件有边缘效果,则父组件触发边缘效果,否则子组件触发边缘效果。

PARENT_FIRST

父组件先滚动,父组件滚动到边缘以后自身滚动。自身滚动到边缘后,如果有边缘效果,会触发自身的边缘效果,否则触发父组件的边缘效果。

PARALLEL

自身和父组件同时滚动,自身和父组件都到达边缘以后,如果自身有边缘效果,则自身触发边缘效果,否则父组件触发边缘效果。

WebDarkMode

枚举值

描述

Off

Web深色模式关闭。

On

Web深色模式开启。

Auto

Web深色模式跟随系统。

自定义类型说明

WebResourceRequest

web组件获取资源请求对象。

getRequestHeader()

func getRequestHeader(): ArrayList<Header>

获取资源请求头信息。

返回值:

类型

说明

ArrayList<Header>

返回资源请求头信息。

getRequestUrl()

public func getRequestUrl(): String

获取资源请求的 URL 信息。

返回值:

类型

说明

String

返回资源请求的URL信息。

isMainFrame()

public func isMainFrame(): Bool

判断资源请求是否为主frame。

返回值:

类型

说明

Bool

返回资源请求是否为主frame。

isRedirect()

public func isRedirect(): Bool

判断资源请求是否被服务端重定向。

返回值:

类型

说明

Bool

返回资源请求是否被服务端重定向。

isRequestGesture()

public func isRequestGesture(): Bool

获取资源请求是否与手势(如点击)相关联。

返回值:

类型

说明

Bool

返回资源请求是否与手势(如点击)相关联。


getRequestMethod()

func getRequestMethod(): String

获取请求方法。

返回值:

类型

说明

String

返回请求方法。

Header

Web组件返回的请求/响应头对象。

成员变量

变量名称

类型

描述

headerKey

String

请求/响应头的key。

headerValue

String

请求/响应头的Value。

OnPageEvent

网页加载回调信息。

变量名称

类型

描述

url

String

页面的URL地址。

事件

onPageBegin((OnPageEvent) -> Unit)

public func onPageBegin(callback: (OnPageEvent) -> Unit): This

网页开始加载时触发该回调,且只在主frame触发,iframe或者frameset的内容加载时不会触发此回调。

事件名

参数类型

描述

callback

(OnPageEvent) -> Unit

网页开始加载时触发该回调。

onPageEnd((onPageEnd) -> Unit)

public func onPageEnd(callback: (OnPageEvent) -> Unit): This

网页加载完成时触发该回调,且只在主frame触发。

事件名

参数类型

描述

callback

(OnPageEvent) -> Unit

网页加载完成时触发该回调。

onLoadIntercept((WebResourceRequest) -> Bool)

public func onLoadIntercept(callback: (WebResourceRequest) -> Bool): This

当Web组件加载url之前触发该回调,用于判断是否阻止此次访问。默认允许加载。

事件名

参数类型

描述

callback

(WebResourceRequest) -> Bool

当Web组件加载url之前触发该回调。返回值Bool, 返回true表示阻止此次加载,否则允许此次加载。

通用属性/通用事件

通用属性:仅支持aspectRatio、backdropBlur、backgroundColor、bindContentCover、bindContextMenu、bindMenu 、bindSheet、blur、border、borderColor、borderRadius、borderStyle、borderWidth、clip、constraintSize、defaultFocus、focusable、tabIndex、groupDefaultFocus、focusOnTouch、displayPriority、draggable、enabled、flexBasis、flexGrow、flexShrink、layoutWeight、id、gridOffset、gridSpan、useSizeType、height、touchable、margin、markAnchor、mask、offset、width、zIndex、visibility、rotate、scale、transform、responseRegion、padding、size、stateStyles、opacity、shadow、gesture、sharedTransition、transition。

通用事件:仅支持onAppear、onDisAppear、onBlur、onFocus、onDragEnd、onDragEnter、onDragStart、onDragMove、onDragLeave、onDrop、onHover、onMouse、onKeyEvent、onTouch、onVisibleAreaChange。

示例代码

import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import ohos.webview.*


@Entry
@Component
class MyView {
    let webController = WebviewController()
    @State var url: String = "www.example.com"
    func build() {
        Column(10) {
            Button("refresh")
            .onClick {
                evt =>
                AppLog.info("refresh")
                webController.refresh()
            }.width(400.px).height(150.px)
            Button("loadUrl")
            .onClick {
                evt =>
                AppLog.info("loadUrl")
                webController.loadUrl(this.url)


            }.width(400.px).height(150.px)
            Web(src: "www.example.com", controller: webController)
            .onPageBegin({evt =>
                AppLog.info("page begin url: ${evt.url}")
            })
            .onPageEnd({evt =>
                AppLog.info("page end url: ${evt.url}")
            })
        }
    }
}


如对您有帮助,帮忙点个“在看 、关注” 让更多的人受益~!