提供具有网页显示能力的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}")
})
}
}
}
如对您有帮助,帮忙点个“在看 、关注” 让更多的人受益~!