Web


Web

icon-note.gif 说明: 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

提供具有网页显示能力的Web组件。

权限列表

访问在线网页时需添加网络权限:ohos.permission.INTERNET

子组件

接口

  • Web(options: { src: string, controller?: WebController })

    表1 options参数说明

    参数名 参数类型 必填 默认值 参数描述
    src string - 网页资源地址。
    controller WebController - 控制器。

icon-note.gif说明:

  • 不支持转场动画;
  • 不支持多实例;
  • 仅支持本地音视频播放。

属性

名称 参数类型 默认值 描述
domStorageAccess boolean false 设置是否开启文档对象模型存储接口(DOM Storage API)权限,默认未开启。
fileAccess boolean true 设置是否开启通过$rawfile(filepath/filename)访问应用中rawfile路径的文件, 默认启用。
imageAccess boolean true 设置是否允许自动加载图片资源,默认允许。
javaScriptProxy {
object: object,
name: string,
methodList: Array<string>,
controller: WebController
}
- 注入JavaScript对象到window对象中,并在window对象中调用该对象的方法。所有参数不支持更新。
object: 参与注册的对象。只能声明方法,不能声明属性 。其中方法的参数和返回类型只能为string,number,boolean。
name: 注册对象的名称,与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。
methodList: 参与注册的应用侧JavaScript对象的方法。
controller: 控制器。
javaScriptAccess boolean true 设置是否允许执行JavaScript脚本,默认允许执行。
mixedMode MixedMode MixedMode.None 设置是否允许加载超文本传输协议(HTTP)和超文本传输安全协议(HTTPS)混合内容,默认不允许加载HTTP和HTTPS混合内容。
onlineImageAccess boolean true 设置是否允许从网络加载图片资源(通过HTTP和HTTPS访问的资源),默认允许访问。
zoomAccess boolean true 设置是否支持手势进行缩放,默认允许执行缩放。

icon-note.gif 说明:

通用属性仅支持widthheightpaddingmarginborder

  • MixedMode枚举说明

    名称 描述
    All 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。
    Compatible 混合内容兼容性模式,部分不安全的内容可能被加载。
    None 不允许加载HTTP和HTTPS混合内容。

事件

不支持通用事件。

名称 功能描述
onAlert(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)

网页触发alert()告警弹窗时触发回调。
当回调返回false时,触发默认弹窗。当回调返回true时,系统应用可以调用系统弹窗能力(只有确认场景),并且根据用户的确认操作调用JsResult通知Web组件。
url:当前显示弹窗所在网页的URL。
message:弹窗中显示的信息。
JsResult:通知Web组件用户操作行为。

onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)

刷新或关闭场景下,在即将离开当前页面时触发此回调。
当回调返回false时,触发默认弹窗。当回调返回true时,系统应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。
url:当前显示弹窗所在网页的URL。
message:弹窗中显示的信息。
JsResult:通知Web组件用户操作行为。

onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)

网页调用confirm()告警时触发此回调。
当回调返回false时,触发默认弹窗。当回调返回true时,系统应用可以调用系统弹窗能力(包括确认和取消),并且需要根据用户的确认或取消操作调用JsResult通知Web组件。
url:当前显示弹窗所在网页的URL。
message:弹窗中显示的信息。
JsResult:通知Web组件用户操作行为。

onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)

通知宿主应用JavaScript console消息。
message:触发的控制台信息。

onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void)

网页的下载任务开始时触发该回调。
url:文件下载的URL。
userAgent:下载的用户代理(UA)名称。
contentDisposition:服务器返回的 Content-Disposition响应头,可能为空。
mimetype:服务器返回内容媒体类型(MIME)信息。
contentLength:服务器返回文件的长度。

onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResourceError }) => void)

网页加载遇到错误时触发该回调。
出于性能考虑,建议此回调中尽量执行简单逻辑。
request:网页请求的封装信息。
error:网页加载资源错误的封装信息 。

onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: WebResourceResponse }) => void)

网页加载资源遇到的HTTP错误(响应码>=400)时触发该回调。
request:网页请求的封装信息。
response:网页响应的封装信息

onPageBegin(callback: (event?: { url: string }) => void)

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

onPageEnd(callback: (event?: { url: string }) => void)

网页加载完成时触发该回调,且只在主frame触发。
url:页面的URL地址。

onProgressChange(callback: (event?: { newProgress: number }) => void)

网页加载进度变化时触发该回调。
newProgress:新的加载进度,取值范围为0到100的整数。

onTitleReceive(callback: (event?: { title: string }) => void)

网页document标题更改时触发该回调。
title:document标题内容。

ConsoleMessage对象说明

  • 接口

    接口名称 功能描述
    getLineNumber(): number 获取ConsoleMessage的行数。
    getMessage(): string 获取ConsoleMessage的日志信息。
    getMessageLevel(): MessageLevel 获取ConsoleMessage的信息级别。
    getSourceId(): string 获取网页源文件路径和名字。
  • MessageLevel枚举说明

    名称 描述
    Debug 调试级别。
    Error 错误级别。
    Info 消息级别。
    Log 日志级别。
    Warn 警告级别。

JsResult对象说明

Web组件返回的弹窗确认或弹窗取消功能对象。

  • 接口

    接口名称 功能描述
    handleCancel(): void

    通知Web组件用户取消弹窗操作。

    handleConfirm(): void

    通知Web组件用户确认弹窗操作。

WebResourceError对象说明

  • 接口

    接口名称 功能描述
    getErrorCode(): number 获取加载资源的错误码。
    getErrorInfo(): string 获取加载资源的错误信息。

WebResourceRequest对象说明

  • 接口

    接口名称 功能描述
    getRequestHeader(): Array<Header> 获取资源请求头信息。
    getRequestUrl(): string 获取资源请求的URL信息。
    isMainFrame(): boolean 判断资源请求是否为主frame。
    isRedirect(): boolean 判断资源请求是否被服务端重定向。
    isRequestGesture(): boolean 获取资源请求是否与手势(如点击)相关联。

Header对象说明

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

  • 参数

    参数名称 参数类型 参数描述
    headerKey string 请求/响应头的key。
    headerValue string 请求/响应头的value。

WebResourceResponse对象说明

  • 接口

    接口名称 功能描述
    getReasonMessage(): string 获取资源响应的状态码描述。
    getResponseCode(): number 获取资源响应的状态码。
    getResponseData(): string 获取资源响应数据。
    getResponseEncoding(): string 获取资源响应的编码。
    getResponseHeader(): Array<Header> 获取资源响应头。
    getResponseMimeType(): string 获取资源响应的媒体(MIME)类型。

WebController

通过WebController可以控制Web组件各种行为。一个WebController对象只能控制一个Web组件,且必须在Web组件和WebController绑定后,才能调用WebController上的方法。

创建对象

webController: WebController = new WebController()
1

accessBackward

accessBackward(): boolean

当前页面是否可后退,即当前页面是否有返回历史记录。

accessForward

accessForward(): boolean

当前页面是否可前进,即当前页面是否有前进历史记录。

accessStep

accessStep(step: number): boolean

当前页面是否可前进或者后退给定的step步。

  • 参数

    参数名 参数类型 必填 默认值 参数描述
    step number - 要跳转的步数,正数代表前进,负数代表后退。
  • 返回值

    参数类型 说明
    boolean 页面是否前进或后退

backward

backward(): void

按照历史栈,后退一个页面。一般结合accessBackward一起使用。

deleteJavaScriptRegister

deleteJavaScriptRegister(name: string): void

删除通过registerJavaScriptProxy注册到window上的指定name的应用侧JavaScript对象。

  • 参数

    参数名 参数类型 必填 默认值 参数描述
    name string - 注册对象的名称,可在网页侧JavaScript中通过此名称调用应用侧JavaScript对象。

forward

forward(): void

按照历史栈,前进一个页面。一般结合accessForward一起使用。

getHitTest

getHitTest(): HitTestType

获取当前被点击区域的元素类型。

  • HitTestType枚举说明

    名称 描述
    EditText 可编辑的区域。
    Email 电子邮件地址。
    HttpAnchor 超链接。其src为http。
    HttpAnchorImg 带有超链接的图片,其中超链接的src为http。
    Img HTML::img标签。
    Map 地理地址。
    Phonenumber 电话号码。
    Unknown 未知内容。

loadData

loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string }): void

baseUrl为空时,通过”data“协议加载指定的一段字符串。

当baseUrl为”data“协议时,编码后的data字符串将被Web组件作为”data"协议加载。

当baseUrl为“http/https"协议时,编码后的data字符串将被Web组件以类似loadUrl的方式以非编码字符串处理。

  • options参数说明

    参数名 参数类型 必填 默认值 参数描述
    data string - 按照”Base64“或者”URL"编码后的一段字符串。
    mimeType string - 媒体类型(MIME)。
    encoding string - 编码类型,具体为“Base64"或者”URL编码。
    baseUrl string - 指定的一个URL路径(“http”/“https”/"data"协议),并由Web组件赋值给window.origin。
    historyUrl string - 历史记录URL。非空时,可被历史记录管理,实现前后后退功能。当baseUrl为空时,此属性无效。

loadUrl

loadUrl(options:{ url: string, headers?: Array<Header> }): void

使用指定的http头加载指定的URL。

通过loadUrl注入的对象只在当前document有效,即通过loadUrl导航到新的页面会无效。

而通过registerJavaScriptProxy注入的对象,在loadUrl导航到新的页面也会有效。

  • options参数说明

    参数名 参数类型 必填 默认值 参数描述
    url string - 需要加载的 URL。
    headers Array<Header> [] URL的附加HTTP请求头。

onActive

onActive(): void

调用此接口通知Web组件进入前台激活状态。

onInactive

onInactive(): void

调用此接口通知Web组件进入未激活状态。

refresh

refresh(): void

调用此接口通知Web组件刷新网页。

registerJavaScriptProxy

registerJavaScriptProxy(options: { object: object, name: string, methodList: Array<string> }): void

注入JavaScript对象到window对象中,并在window对象中调用该对象的方法。注册后,须调用refresh接口生效。

  • options 参数说明

    参数名 参数类型 必填 默认值 参数描述
    object object - 参与注册的应用侧JavaScript对象。只能声明方法,不能声明属性 。其中方法的参数和返回类型只能为string,number,boolean
    name string - 注册对象的名称,与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。
    methodList Array<string> - 参与注册的应用侧JavaScript对象的方法。

runJavaScript

runJavaScript(options: { script: string, callback?: (result: string) => void }): void

异步执行JavaScript脚本,并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后,比如onPageEnd中调用。

  • options参数说明

    参数名 参数类型 必填 默认值 参数描述
    script string - JavaScript脚本。
    callback (result: string) => void - 回调执行JavaScript脚本结果。JavaScript脚本若执行失败或无返回值时,返回null。

stop

stop(): void

停止页面加载。

示例

// webComponent.ets
@Entry
@Component
struct WebComponent {
  @State javaScriptAccess: boolean = true;
  @State fileAccess: boolean = true;
  controller: WebController = new WebController();
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
      .javaScriptAccess(this.javaScriptAccess)
      .fileAccess(this.fileAccess)
      .onPageEnd(e => {
        // test() 在 index.html 中已定义
        this.controller.runJavaScript({ script: 'test()' });
        console.log("url: ", e.url);
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
    Hello world!
</body>
<script type="text/javascript">
	function test() {
		console.log('Ark WebComponent');
	}
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13