> 文档中心 > HarmonyOS应用开发:Web组件

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