Web
提供具有网页显示能力的Web组件,[@ohos.web.webview]提供web控制能力。
说明:
- 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
- 示例效果请以真机运行为准,当前IDE预览器不支持。
需要权限
ArkUI:
访问在线网页时需添加网络权限:ohos.permission.INTERNET。
Android:
访问在线网页时需添加网络权限:android.permission.INTERNET
<uses-permission android:name="android.permission.INTERNET" />
iOS:
无需设置,应用通过询问用户获取网络权限。
跨平台相关设置
无法访问Http的设置
Android
targetSdkVersion版本升级到28之后,默认拒绝应用程序使用明文流量的请求,如http协议不再支持访问。 需要在AndroidManifest.xml中开启明文网络流量解决此问题
android:usesCleartextTraffic=“true”
如需详细网络安全设置也可以通过配置android:networkSecurityConfig属性来进行详细设置。
iOS
App Transport Security (ATS) 不支持访问http服务。通过修改info.plist可以做到。
在源代码模式修改比较方便。 在Xcode中右击项目中的info.plist,选择Open As > Source Code,在plist标签中加入NSAppTransportSecurity。
示例如下:
<plist version="1.0">
<dict>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
</dict>
</plist>
子组件
无
接口
Web(options: { src: ResourceStr, controller: WebviewController})
说明:
不支持转场动画。 同一页面的多个web组件,必须绑定不同的WebviewController。
参数:
参数名参数类型必填参数描述src[ResourceStr]是网页资源地址。如果访问本地资源文件,请使用$rawfile。controller[WebviewController9+]是控制器。
示例:
加载在线网页
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
}
}
}
加载本地网页
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
// 通过$rawfile加载本地资源文件。
Web({ src: $rawfile("index.html"), controller: this.controller })
}
}
}
加载的index.html文件,位于resources目录下rawfile子目录中
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>
属性
javaScriptAccess
javaScriptAccess(javaScriptAccess: boolean)
设置是否允许执行JavaScript脚本,默认允许执行。
参数:
参数名参数类型必填默认值参数描述javaScriptAccessboolean是true是否允许执行JavaScript脚本。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.javaScriptAccess(true)
}
}
}
zoomAccess
zoomAccess(zoomAccess: boolean)
设置是否支持手势进行缩放,默认允许执行缩放。
参数:
参数名参数类型必填默认值参数描述zoomAccessboolean是true设置是否支持手势进行缩放。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.zoomAccess(true)
}
}
}
onPageBegin
onPageBegin(callback: (event?: { url: string }) => void)
网页开始加载时触发该回调,且只在主frame触发,iframe或者frameset的内容加载时不会触发此回调。
Android和iOS的触发时机与OpenHarmony不完全相同,以各平台行为为准。
参数:
参数名参数类型参数描述urlstring页面的URL地址。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.onPageBegin((event) => {
if (event) {
console.log('url:' + event.url)
}
})
}
}
}
onPageEnd
onPageEnd(callback: (event?: { url: string }) => void)
网页加载完成时触发该回调,且只在主frame触发。
参数:
参数名参数类型参数描述urlstring页面的URL地址。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.onPageEnd((event) => {
if (event) {
console.log('url:' + event.url)
}
})
}
}
}
onErrorReceive
onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResourceError }) => void)
网页加载遇到错误时触发该回调。出于性能考虑,建议此回调中尽量执行简单逻辑。
参数:
参数名参数类型参数描述request[WebResourceRequest]网页请求的封装信息。error[WebResourceError]网页加载资源错误的封装信息 。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.onErrorReceive((event) => {
if (event) {
console.log('getErrorInfo:' + event.error.getErrorInfo())
console.log('getErrorCode:' + event.error.getErrorCode())
console.log('url:' + event.request.getRequestUrl())
}
})
}
}
}
minFontSize9+
minFontSize(size: number)
设置网页字体大小最小值。
参数:
参数名参数类型必填默认值参数描述sizenumber是8设置网页字体大小最小值,单位px。输入值的范围为-231到231-1,实际渲染时超过72的值按照72进行渲染,低于1的值按照1进行渲染。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State fontSize: number = 30
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.minFontSize(this.fontSize)
}
}
}
horizontalScrollBarAccess9+
horizontalScrollBarAccess(horizontalScrollBar: boolean)
设置是否显示横向滚动条,包括系统默认滚动条和用户自定义滚动条。默认显示。
参数:
参数名参数类型必填默认值参数描述horizontalScrollBarboolean是true设置是否显示横向滚动条。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: $rawfile('index.html'), controller: this.controller })
.horizontalScrollBarAccess(true).height(150).width(200)
}
}
}
加载的html文件。
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
body {
width:3000px;
height:3000px;
padding-right:170px;
padding-left:170px;
border:5px solid blueviolet
}
</style>
</head>
<body>
Scroll Test
</body>
</html>
verticalScrollBarAccess9+
verticalScrollBarAccess(verticalScrollBar: boolean)
设置是否显示纵向滚动条,包括系统默认滚动条和用户自定义滚动条。默认显示。
参数:
参数名参数类型必填默认值参数描述verticalScrollBarAccessboolean是true设置是否显示纵向滚动条。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new w eb_webview.WebviewController()
build() {
Column() {
Web({ src: $rawfile('index.html'), controller: this.controller })
.verticalScrollBarAccess(true).height(150).width(200)
}
}
}
加载的html文件。
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
body {
width:3000px;
height:3000px;
padding-right:170px;
padding-left:170px;
border:5px solid blueviolet
}
</style>
</head>
<body>
Scroll Test
</body>
</html>
backgroundColor
backgroundColor(ResourceColor:Color | number | string)
设置web组件背景颜色
参数:
ResourceColor
类型说明[Color]颜色枚举值。numberHEX格式颜色,支持rgb。示例:0xffffff。stringrgb或者argb格式颜色。示例:‘#ffffff’, ‘#ff000000’, ‘rgb(255, 100, 255)’, ‘rgba(255, 100, 255, 0.5)’。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller1: web_webview.WebviewController = new web_webview.WebviewController();
controller2: web_webview.WebviewController = new web_webview.WebviewController();
controller3: web_webview.WebviewController = new web_webview.WebviewController();
controller4: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Text('设置backgroundColor为Color.Blue').height(50)
Web({ src: 'https://www.example.com', controller: this.controller1 })
.backgroundColor(Color.Blue).height(200)
Text('设置backgroundColor为0x00ffff').height(50)
Web({ src: 'https://www.example.com', controller: this.controller2 })
.backgroundColor(0x00ffff).height(200)
Text('设置backgroundColor为"#00FF00"').height(50)
Web({ src: 'https://www.example.com', controller: this.controller3 })
.backgroundColor('#00FF00').height(200)
Text('设置backgroundColor为"rgb(255, 100, 255)"').height(50)
Web({ src: 'https://www.example.com', controller: this.controller4 })
.backgroundColor('rgb(255, 100, 255)').height(200)
}
}
}
mediaPlayGestureAccess
mediaPlayGestureAccess(access: boolean)
设置有声视频播放是否需要用户手动点击,静音视频播放不受该接口管控,默认需要。 Android:该属性只对网页内嵌视频播放生效。 iOS:不支持。
参数:
参数名参数类型必填默认值参数描述accessboolean是true设置有声视频播放是否需要用户手动点击。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State access: boolean = true
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.mediaPlayGestureAccess(this.access)
}
}
}
onHttpErrorReceive
onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: WebResourceResponse }) => void)
网页加载资源遇到的HTTP错误(响应码>=400)时触发该回调。
参数:
参数名参数类型参数描述request[WebResourceRequest]网页请求的封装信息。response[WebResourceResponse]资源响应的封装信息。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.onHttpErrorReceive((event) => {
if (event) {
console.log('url:' + event.request.getRequestUrl())
console.log('getResponseEncoding:' + event.response.getResponseEncoding())
console.log('getResponseMimeType:' + event.response.getResponseMimeType())
console.log('getResponseCode:' + event.response.getResponseCode())
let result = event.request.getRequestHeader()
console.log('The request header result size is ' + result.length)
for (let i of result) {
console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
}
let resph = event.response.getResponseHeader()
console.log('The response header result size is ' + resph.length)
for (let i of resph) {
console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
}
}
})
}
}
}
onProgressChange
onProgressChange(callback: (event?: { newProgress: number }) => void)
网页加载进度变化时触发该回调。
参数:
参数名参数类型参数描述newProgressnumber新的加载进度,取值范围为0到100的整数。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.onProgressChange((event) => {
if (event) {
console.log('newProgress:' + event.newProgress)
}
})
}
}
}
onScroll9+
onScroll(callback: (event: {xOffset: number, yOffset: number}) => void)
通知网页滚动条滚动位置。
参数:
参数名参数类型参数描述xOffsetnumber以网页最左端为基准,水平滚动条滚动所在位置。yOffsetnumber以网页最上端为基准,竖直滚动条滚动所在位置。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.onScroll((event) => {
console.info("x = " + event.xOffset)
console.info("y = " + event.yOffset)
})
}
}
}
onTitleReceive
onTitleReceive(callback: (event?: { title: string }) => void)
网页document标题更改时触发该回调。 Android和iOS的返回值与OpenHarmony不完全相同,以各平台行为为准。
参数:
参数名参数类型参数描述titlestringdocument标题内容。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.onTitleReceive((event) => {
if (event) {
console.log('title:' + event.title)
}
})
}
}
}
onConsole
onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)
通知宿主应用JavaScript console消息。
参数:
参数名参数类型参数描述message[ConsoleMessage]触发的控制台信息。
返回值:
类型说明boolean当返回true时,该条消息将不会再打印至控制台,反之仍会打印至控制台。iOS不支持。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.onConsole((event) => {
if (event) {
console.log('getMessage:' + event.message.getMessage())
console.log('getMessageLevel:' + event.message.getMessageLevel())
}
return false
})
}
}
}
onScaleChange9+
onScaleChange(callback: (event: {oldScale: number, newScale: number}) => void)
当前页面显示比例的变化时触发该回调。 Android和iOS的页面显示比例与OpenHarmony不完全相同,以各平台行为为准。
参数:
参数名参数类型参数描述oldScalenumber变化前的显示比例百分比。newScalenumber变化后的显示比例百分比。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.onScaleChange((event) => {
console.log('onScaleChange changed from ' + event.oldScale + ' to ' + event.newScale)
})
}
}
}
onLoadIntercept10+
onLoadIntercept(callback: (event?: { data: WebResourceRequest }) => boolean)
当Web组件加载url之前触发该回调,用于判断是否阻止此次访问。默认允许加载。 在Android平台,此接口在重定向时触发。
参数:
参数名参数类型参数描述request[WebResourceRequest]url请求的相关信息。
返回值:
类型说明boolean返回true表示阻止此次加载,否则允许此次加载。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.onLoadIntercept((event) => {
console.log('url:' + event.data.getRequestUrl())
return true
})
}
}
}
onControllerAttached10+
onControllerAttached(callback: () => void)
当Controller成功绑定到Web组件时触发该回调,并且该Controller必须为WebviewController,因该回调调用时网页还未加载,无法在回调中使用有关操作网页的接口,可以使用[loadUrl]等操作网页不相关的接口。
示例:
在该回调中使用loadUrl加载网页
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: '', controller: this.controller })
.onControllerAttached(() => {
this.controller.loadUrl($rawfile("index.html"));
})
}
}
}
加载的html文件。
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>
onAlert
onAlert(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
网页触发alert()告警弹窗时触发回调。
参数:
参数名参数类型参数描述urlstring当前显示弹窗所在网页的URL。messagestring弹窗中显示的信息。result[JsResult]通知Web组件用户操作行为,iOS端时result.handleCancel行为和result.handleConfirm一致。
返回值:
类型说明boolean当回调返回true时,应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时,web组件暂不支持触发默认弹窗。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.onAlert((event) => {
if (event) {
console.log("event.url:" + event.url)
console.log("event.message:" + event.message)
AlertDialog.show({
title: 'onAlert',
message: 'text',
primaryButton: {
value: 'cancel',
action: () => {
event.result.handleCancel()
}
},
secondaryButton: {
value: 'ok',
action: () => {
event.result.handleConfirm()
}
},
cancel: () => {
event.result.handleCancel()
}
})
}
return true
})
}
}
}
onConfirm
onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
网页调用confirm()告警时触发此回调。
参数:
参数名参数类型参数描述urlstring当前显示弹窗所在网页的URL。messagestring弹窗中显示的信息。result[JsResult]通知Web组件用户操作行为。
返回值:
类型说明boolean当回调返回true时,应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回false时,web组件暂不支持触发默认弹窗,跨平台目前这个返回值没有作用。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.onConfirm((event) => {
if (event) {
console.log("event.url:" + event.url)
console.log("event.message:" + event.message)
AlertDialog.show({
title: 'onConfirm',
message: 'text',
primaryButton: {
value: 'cancel',
action: () => {
event.result.handleCancel()
}
},
secondaryButton: {
value: 'ok',
action: () => {
event.result.handleConfirm()
}
},
cancel: () => {
event.result.handleCancel()
}
})
}
return true
})
}
}
}
onPrompt9+
onPrompt(callback: (event?: { url: string; message: string; value: string; result: JsResult }) => boolean)
参数:
参数名参数类型参数描述urlstring当前显示弹窗所在网页的URL。messagestring弹窗中显示的信息。result[JsResult]通知Web组件用户操作行为。
返回值:
类型说明boolean当回调返回true时,应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回false时,web组件暂不支持触发默认弹窗,跨平台目前这个返回值没有作用。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.onPrompt((event) => {
if (event) {
console.log("url:" + event.url)
console.log("message:" + event.message)
console.log("value:" + event.value)
AlertDialog.show({
title: 'onPrompt',
message: 'text',
primaryButton: {
value: 'cancel',
action: () => {
event.result.handleCancel()
}
},
secondaryButton: {
value: 'ok',
action: () => {
event.result.handlePromptConfirm(event.value)
}
},
cancel: () => {
event.result.handleCancel()
}
})
}
return true
})
}
}
}
onHttpAuthRequest9+
onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, realm: string}) => boolean)
通知收到http auth认证请求。
Android加载页面不会直接触发该回调,iOS加载页面会直接触发该回调。
参数:
参数名参数类型参数描述handler[HttpAuthHandler]通知Web组件用户操作行为。hoststringHTTP身份验证凭据应用的主机。realmstringHTTP身份验证凭据应用的域。
返回值:
类型说明boolean返回false表示此次认证失败,否则成功,跨平台目前这个返回值没有作用。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
httpAuth: boolean = false
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.onHttpAuthRequest((event) => {
if (event) {
AlertDialog.show({
title: 'onHttpAuthRequest',
message: 'text',
primaryButton: {
value: 'cancel',
action: () => {
event.handler.cancel()
}
},
secondaryButton: {
value: 'ok',
action: () => {
event.handler.confirm("2222", "2222");
}
},
cancel: () => {
event.handler.cancel()
}
})
}
return true
})
}
}
}
onGeolocationShow
onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocation }) => void)
通知用户收到地理位置信息获取请求。
目前iOS不支持。
参数:
参数名参数类型参数描述originstring指定源的字符串索引。geolocation[JsGeolocation]通知Web组件用户操作行为。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src:'https://www.example.com', controller:this.controller })
.geolocationAccess(true)
.onGeolocationShow((event) => {
if (event) {
AlertDialog.show({
title: 'title',
message: 'text',
confirm: {
value: 'onConfirm',
action: () => {
event.geolocation.invoke(event.origin, true, true)
}
},
cancel: () => {
event.geolocation.invoke(event.origin, false, true)
}
})
}
})
}
}
}
onGeolocationHide
onGeolocationHide(callback: () => void)
通知用户先前被调用[onGeolocationShow]时收到地理位置信息获取请求已被取消。
目前iOS不支持。
参数:
参数名参数类型参数描述callback() => void地理位置信息获取请求已被取消的回调函数。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src:'https://www.example.com', controller:this.controller })
.geolocationAccess(true)
.onGeolocationHide(() => {
console.log("onGeolocationHide...")
})
}
}
}
onPermissionRequest9+
onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
通知收到获取权限请求。
iOS监听到webview权限申请的前提是要在plist设置app获取权限选项,并且在首次打开应用,系统弹出获取权限窗口时选择授予。
Android监听到webview权限申请的前提是要在Manifest中静态配置。
getOrigin返回值以各平台行为为准。
参数:
参数名参数类型参数描述request[PermissionRequest]通知Web组件用户操作行为。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.onPermissionRequest((event) => {
if (event) {
AlertDialog.show({
title: 'title',
message: 'text',
primaryButton: {
value: 'deny',
action: () => {
event.request.deny()
}
},
secondaryButton: {
value: 'onConfirm',
action: () => {
event.request.grant(event.request.getAccessibleResource())
}
},
cancel: () => {
event.request.deny()
}
})
}
})
}
}
}
onPageVisible9+
onPageVisible(callback: (event: {url: string}) => void)
设置新页面内容即将可见时触发的回调函数。
获取的url以各平台行为为准。
参数:
参数名参数类型参数描述urlstring新页面内容即将可见时新页面的url地址。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src:'https://www.example.com', controller: this.controller })
.onPageVisible((event) => {
console.log('onPageVisible url:' + event.url)
})
}
}
}
onDownloadStart
onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void)
通知主应用开始下载一个文件
返回信息以各平台行为为准,跨平台目前只支持获取url, userAgent, mimetype, contentLength。
参数:
参数名参数类型参数描述urlstring文件下载的URL。userAgentstring用于下载的用户代理。mimetypestring服务器返回内容媒体类型(MIME)信息。contentLengthcontentLength服务器返回文件的长度。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'https://www.example.com', controller: this.controller })
.onDownloadStart((event) => {
if (event) {
console.log('url:' + event.url)
console.log('userAgent:' + event.userAgent)
console.log('mimetype:' + event.mimetype)
console.log('contentLength:' + event.contentLength)
}
})
}
}
}
onShowFileSelector9+
onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => boolean)
调用此函数以处理具有“文件”输入类型的HTML表单,以响应用户按下的“选择文件”按钮。
目前iOS不支持。
参数:
参数名参数类型参数描述result[FileSelectorResult]用于通知Web组件文件选择的结果。fileSelector[FileSelectorParam]文件选择器的相关信息。
返回值:
类型说明boolean当返回值为true时,用户可以调用系统提供的弹窗能力。当回调返回false时,web组件暂不支持触发默认弹窗。
示例:
// xxx.ets
import web_webview from '@ohos.web.webview';
import picker from '@ohos.file.picker';
import { BusinessError } from '@ohos.base';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State uri: string = "file:///data/user/0/com.example.helloworld";
build() {
Column() {
Web({ src: $rawfile('index.html'), controller: this.controller })
.onShowFileSelector((event) => {
console.log('MyFileUploader onShowFileSelector invoked')
event.result.handleFileList([this.uri]);
return true
})
}
}
}
WebResourceError
web组件资源管理错误信息对象。
getErrorCode
getErrorCode(): number
获取加载资源的错误码。
错误码:
Android和iOS的错误码与OpenHarmony不完全相同,以各平台错误码为准。
返回值:
类型说明number返回加载资源的错误码。
getErrorInfo
getErrorInfo(): string
获取加载资源的错误信息。
Android和iOS的错误信息与OpenHarmony不完全相同,以各平台错误信息为准。
返回值:
类型说明string返回加载资源的错误信息。
WebResourceRequest
web组件获取资源请求对象。
getRequestUrl
getRequestUrl(): string
获取资源请求的URL信息。
返回值:
类型说明string返回资源请求的URL信息。
WebResourceResponse
web组件资源响应对象。
getResponseMimeType
getResponseMimeType(): string
获取资源响应的媒体(MIME)类型。
返回值:
类型说明string返回资源响应的媒体(MIME)类型。
getResponseEncoding
getResponseEncoding(): string
获取资源响应的编码。
返回值:
类型说明string返回资源响应的编码。
getResponseCode
getResponseCode(): number
获取资源响应的状态码。
返回值:
类型说明number返回资源响应的状态码。
ConsoleMessage
Web组件获取控制台信息对象。
getMessage
getMessage(): string
获取ConsoleMessage的日志信息。
返回值:
类型说明string返回ConsoleMessage的日志信息。
getMessageLevel
getMessageLevel(): MessageLevel
获取ConsoleMessage的信息级别。
返回值:
类型说明[MessageLevel]返回ConsoleMessage的信息级别。
MessageLevel枚举说明
名称描述Debug调试级别。Error错误级别。Info消息级别。Log日志级别。Warn警告级别。
JsResult
Web组件返回的弹窗确认或弹窗取消功能对象。
handleCancel
handleCancel(): void
通知Web组件用户取消弹窗操作。
handleConfirm
handleConfirm(): void
通知Web组件用户确认弹窗操作。
handlePromptConfirm9+
handlePromptConfirm(result: string): void
通知Web组件用户确认弹窗操作及对话框内容。
参数:
参数名参数类型必填默认值参数描述resultstring是-用户输入的对话框内容。
HttpAuthHandler9+
Web组件返回的http auth认证请求确认或取消和使用缓存密码认证功能对象。
cancel9+
cancel(): void
通知Web组件用户取消HTTP认证操作。
confirm9+
confirm(userName: string, pwd: string): boolean
使用用户名和密码进行HTTP认证操作。
参数:
参数名参数类型必填默认值参数描述userNamestring是-HTTP认证用户名。pwdstring是-HTTP认证密码。
返回值:
类型说明boolean认证成功返回true,失败返回false。跨平台Android和iOS底层不会有返回值,所以都返回true。
isHttpAuthInfoSaved9+
isHttpAuthInfoSaved(): boolean
通知Web组件用户使用服务器缓存的帐号密码认证。
返回值:
类型说明boolean存在密码认证成功返回true,其他返回false。iOS底层不会有返回值,所以暂时在获取不到服务器缓存帐号密码的时候返回false,如果能获取到就进行认证并返回true。
JsGeolocation
Web组件返回授权或拒绝权限功能的对象。
invoke
invoke(origin: string, allow: boolean, retain: boolean): void
设置网页地理位置权限状态。
参数:
参数名参数类型必填默认值参数描述originstring是-指定源的字符串索引。allowboolean是-设置的地理位置权限状态。retainboolean是-是否允许将地理位置权限状态保存到系统中。
PermissionRequest9+
Web组件返回授权或拒绝权限功能的对象。
deny9+
deny(): void
拒绝网页所请求的权限。
getOrigin9+
getOrigin(): string
获取网页来源。
返回值:
类型说明string当前请求权限网页的来源。
getAccessibleResource9+
getAccessibleResource(): Array
获取网页所请求的权限资源列表,跨平台资源列表支持的类型有RESOURCE_VIDEO_CAPTURE和RESOURCE_AUDIO_CAPTURE。
返回值:
类型说明Array网页所请求的权限资源列表。
grant9+
grant(resources: Array): void
对网页访问的给定权限进行授权,跨平台iOS不支持授予某一种类型的权限,只支持授予当前申请的权限,或拒绝当前申请的权限。
参数:
参数名参数类型必填默认值参数描述resourcesArray是-授予网页请求的权限的资源列表,跨平台iOS此参数没有作用。
FileSelectorResult9+
通知Web组件的文件选择结果。
handleFileList9+
handleFileList(fileList: Array): void
通知Web组件进行文件选择操作。
参数:
参数名参数类型必填默认值参数描述fileListArray是-需要进行操作的文件列表。
FileSelectorParam9+
web组件获取文件对象。
getTitle9+
getTitle(): string
获取文件选择器标题。
返回值:
类型说明string返回文件选择器标题。
getMode9+
getMode(): FileSelectorMode
获取文件选择器的模式。
返回值:
类型说明[FileSelectorMode]返回文件选择器的模式。
getAcceptType9+
getAcceptType(): Array
获取文件过滤类型。
返回值:
类型说明Array返回文件过滤类型。
isCapture9+
isCapture(): boolean
获取是否调用多媒体能力。
返回值:
类型说明boolean返回是否调用多媒体能力。
FileSelectorMode枚举说明
名称描述FileOpenMode打开上传单个文件。FileOpenMultipleMode打开上传多个文件。FileOpenFolderMode打开上传文件夹模式。FileSaveMode文件保存模式。
版权归原作者 鸿蒙系统小能手Mr.Li 所有, 如有侵权,请联系我们删除。