HarmonyOS应用开发:Web组件
需要权限:
ohos.permission.INTERNET
子组件
无
接口
Web(options: { src: ResourceStr, controller: WebController })
说明:
不支持转场动画。
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
src | ResourceStr | 是 | 网页资源地址。 |
controller | WebController | 否 | 控制器。 |
示例:
// xxx.ets@Entry@Componentstruct WebComponent { controller: WebController = new WebController(); build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) } }}
属性及用法
是否开启文档对象模型存储接口(DOM Storage API)权限,默认未开启
domStorageAccess(domStorageAccess: boolean)
是否开启应用中文件系统的访问,默认启用
fileAccess(fileAccess: boolean)
是否允许通过网页中的JavaScript脚本访问应用文件系统中的内容,默认未启用
fileFromUrlAccess(fileFromUrlAccess: boolean)
是否允许自动加载图片资源,默认允许
imageAccess(imageAccess: boolean)
注入JavaScript对象到window对象中,并在window对象中调用该对象的方法
javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array, controller: WebController })
参数:
参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
---|---|---|---|---|
object | object | 是 | - | 参与注册的对象。只能声明方法,不能声明属性。 |
name | string | 是 | - | 注册对象的名称,与window中调用的对象名一致。 |
methodList | Array | 是 | - | 参与注册的应用侧JavaScript对象的方法。 |
controller | WebController | 否 | - | 控制器。 |
示例:
// xxx.ets@Entry@Componentstruct WebComponent { controller: WebController = new WebController(); testObj = { test: (data1, data2, data3) => { console.log("data1:" + data1); console.log("data2:" + data2); console.log("data3:" + data3); return "AceString"; }, toString: () => { console.log('toString' + "interface instead."); } } build() { Column() { Web({ src: 'www.example.com', controller: this.controller }) .javaScriptAccess(true) .javaScriptProxy({ object: this.testObj, name: "objName", methodList: ["test", "toString"], controller: this.controller, }) } }}
是否允许执行JavaScript脚本,默认允许执行
javaScriptAccess(javaScriptAccess: boolean)
是否允许加载超文本传输协议(HTTP)和超文本传输安全协议(HTTPS)混合内容,默认不允许加载HTTP和HTTPS混合内容
mixedMode(mixedMode: MixedMode)
是否允许从网络加载图片资源(通过HTTP和HTTPS访问的资源),默认允许访问
onlineImageAccess(onlineImageAccess: boolean)
是否支持手势进行缩放,默认允许执行缩放
zoomAccess(zoomAccess: boolean)
是否使用概览模式加载网页,默认使用该方式
overviewModeAccess(overviewModeAccess: boolean)
是否开启数据库存储API权限,默认不开启
databaseAccess(databaseAccess: boolean)
是否开启获取地理位置权限,默认开启
geolocationAccess(geolocationAccess: boolean)
视频播放是否需要用户手动点击,默认true
mediaPlayGestureAccess(access: boolean)
设置缓存模式
cacheMode(cacheMode: CacheMode)
设置页面的文本缩放百分比,默认为100%
textZoomRatio(textZoomRatio: number)
设置用户代理
userAgent(userAgent: string)
//可以设置为以下内容更好用:Mozilla/5.0 (Linux; Android 12; HarmonyOS; OCE-AN10; HMSCore 6.8.0.332) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.88 HuaweiBrowser/13.0.0.303 Mobile Safari/537.36
设置是否启用网页调试功能,默认false
webDebuggingAccess(webDebuggingAccess: boolean)
事件
不支持通用事件
onAlert
onAlert(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
网页触发alert()告警弹窗时触发回调
参数:
参数名 | 参数类型 | 参数描述 |
---|---|---|
url | string | 当前显示弹窗所在网页的URL。 |
message | string | 弹窗中显示的信息。 |
result | JsResult | 通知Web组件用户操作行为。 |
返回值:
类型 | 说明 |
---|---|
boolean | 当回调返回false时,触发默认弹窗。当回调返回true时,系统应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。 |
onBeforeUnload
onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
刷新或关闭场景下,在即将离开当前页面时触发此回调。刷新当前页面应先通过点击等方式获取焦点,才会触发此回调。
参数:
参数名 | 参数类型 | 参数描述 |
---|---|---|
url | string | 当前显示弹窗所在网页的URL。 |
message | string | 弹窗中显示的信息。 |
result | JsResult | 通知Web组件用户操作行为。 |
返回值:
类型 | 说明 |
---|---|
boolean | 当回调返回false时,触发默认弹窗。当回调返回true时,系统应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。 |
..........还有很多
OpenAtom OpenHarmony