前言

Web组件提供显示网页的能力，能够显示html资源，也可访问在线网页。

开发环境

IDE: DevEco Studio 3.0 Release（build：3.0.0.993）

SDK: Api Version9

开发模型：Stage

权限列表

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

接口

Web组件创建

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

• 参数

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

• WebController

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

创建WebController对象

webController: WebController = new WebController()

基本用法

示例中，设备连接网络后，加载百度首页。

示例

@Entry @Component struct Index {    url : string = "https://www.baidu.com/";    // 定义Web组件的控制器controller    controller: WebController = new WebController();    build() {      Column() {        Web({ src: this.url, controller: this.controller })      }    } }

Web组件访问在线网页时需添加网络权限：ohos.permission.INTERNET，该权限为系统权限，无需人工授权。

"requestPermissions": [      {           "name" : "ohos.permission.INTERNET"      }    ]

示例图

 

属性

名称	参数类型	默认值	描述
domStorageAccess	boolean	false	设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。
fileAccess	boolean	false	设置是否开启通过$rawfile(filepath/filename)访问应用中rawfile路径的文件， 默认启用。
fileFromUrlAccess	boolean	true	设置是否允许通过网页中的JavaScript脚本访问$rawfile(filepath/filename)的内容，默认未启用。
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	设置是否支持手势进行缩放，默认允许执行缩放。
overviewModeAccess	boolean	true	设置是否使用概览模式加载网页，默认使用该方式。
databaseAccess	boolean	false	设置是否开启数据库存储API权限，默认不开启。
cacheMode	CacheMode	CacheMode.Default	设置缓存模式。
textZoomAtio	number	100	设置页面的文本缩放百分比，默认为100%。
userAgent	string	-	设置用户代理。

说明：

通用属性仅支持width、height、padding、margin、border。

基本用法

在ets中创建web组件，加载index.html，并注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。

示例

@Entry @Component struct Index {    @State text : number = 0;    // 定义Web组件的控制器controller    controller: WebController = new WebController(); ​    //js回调ets层定义的方法    contentCall = {     callbackOne : () =>{       this.text+=1;       console.log('callbackOne success')    },     callbackTwo : () =>{       this.text-=1;       console.log('callbackTwo success')    }    } ​    build() {      Column() {       Text('js修改ets属性text:'+this.text.toString()).fontSize(25)       Text('ets调用js方法改变text值+1').fontSize(25)      .onClick(()=>{         //调用js方法         this.controller.runJavaScript({ script: "change_text_add()" })      })       Text('ets调用js方法改变text值-1').fontSize(25)      .onClick(()=>{         //调用js方法         this.controller.runJavaScript({ script: "change_text_reduce()" })      })       Text('ets调用js方法改变web显示').fontSize(25)      .onClick(()=>{    this.controller.runJavaScript({script:"change_html_context('"+this.text+"')"})      })        Web({ src: $rawfile('index.html'), controller: this.controller })        .fileAccess(true)        .javaScriptAccess(true)        .zoomAccess(true)        .imageAccess(true)        .height(500)        .padding(20)         //注入JavaScript对象到window对象中，并在window对象中调用该对象的方法        .javaScriptProxy({           object : this.contentCall,           name : "callBackToApp",           methodList : ["callbackOne","callbackTwo"],           controller : this.controller        })      }    } }

示例中用到WebController对象的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。

index.html

<!DOCTYPE html> <html> <meta charset="utf-8"> <body> Hello world! <div id="indexjs" contenteditable="true"></div> <script type="text/javascript" src="index.js"></script> </body> </html>

index.js

var INDEX = {}; ​ INDEX.editor = document.getElementById('indexjs'); //获取html中元素 ​ INDEX.setHtml = function(contents) {     INDEX.editor.innerHTML = contents; //给id=“indexjs”的div元素赋值 } ​ function change_html_context(contents) {     console.info('test strat');     INDEX.setHtml(contents);     console.info('test end'); } ​ //ets调用js方法，间接回调ets的方法 function change_text_add() {     console.log('change_text_add start');     var str = callBackToApp.callbackOne(); //js调用ets方法，实现ets访问     console.log('change_text_add end'); } ​ //ets调用js方法，间接回调ets的方法 function change_text_reduce() {     console.log('change_text_reduce start');     var str = callBackToApp.callbackTwo(); //js调用ets方法，实现ets访问     console.log('change_text_reduce end'); }

index.html和index.js放在rawfile目录下。

示例设置相关属性，通过javaScriptProxy属性注册contentCall对象值window，声明对象名称callBackToApp，声明方法callbackOne、callbackTwo。

通过WebController对象的runJavaScript方法调用index.js中的方法，js方法中调用callBackToApp对象方法，间接访问ets方法callbackOne或callbackTwo，实现ets与js互相访问。

示例图

 

操作步骤

• 点击"ets调用js方法改变text值+1"，将text设置为1

• 点击"ets调用js方法改变web显示"，text的值会显示在web组件中

• 点击"ets调用js方法改变text值-1"，将text设置为-1

• 再次点击"ets调用js方法改变web显示"，text的值会显示在web组件中

事件

名称	功能描述
onAlert(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)	网页触发alert()告警弹窗时触发回调。当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（只有确认场景），并且根据用户的确认操作调用JsResult通知Web组件。url：当前显示弹窗所在网页的URL。message：弹窗中显示的信息。result：通知Web组件用户操作行为。
onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)	网页调用confirm()告警时触发此回调。当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。url：当前显示弹窗所在网页的URL。message：弹窗中显示的信息。result：通知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标题内容。
onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void)	加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。url：访问的url。isRefreshed：true表示该页面是被重新加载的，false表示该页面是新加载的。
onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void)	应用渲染进程异常退出时触发该回调。renderExitReason：渲染进程进程异常退出的具体原因。
onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => void)	调用此函数以处理具有“文件”输入类型的HTML表单，以响应用户按下的“选择文件”按钮。result：用于通知Web组件文件选择的结果。fileSelector：文件选择器的相关信息。
onUrlLoadIntercept(callback: (event?: { data:string / WebResourceRequest }) => boolean)	当Web组件加载url之前触发该回调，用于是否阻止此次访问。callback返回true表示阻止此次加载，否则允许此次加载。data：url的相关信息。
onInterceptRequest9+(callback: (event?: { request: WebResourceRequest}) => WebResourceResponse)	当Web组件加载url之前触发该回调，用于拦截url并返回响应数据。callback返回响应数据为空表示按原来方式加载，否则加载响应数据。request：url请求的相关信息。

对象说明

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组件用户确认弹窗操作。
handlePromptConfirm9+(result: string): 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）类型。
setResponseData9+(data: string)	设置资源响应数据。
setResponseEncoding9+(encoding: string)	设置资源响应的编码。
setResponseMimeType9+(mimeType: string)	设置资源响应的媒体（MIME）类型。
setReasonMessage9+(reason: string)	设置资源响应的状态码描述。
setResponseHeader9+(header: Array<Header>)	设置资源响应头。
setResponseCode9+(code: number)	设置资源响应的状态码。

RenderExitReason枚举说明

onRenderExited接口返回的渲染进程退出的具体原因。

名称	描述
ProcessAbnormalTermination	渲染进程异常退出。
ProcessWasKilled	收到SIGKILL，或被手动终止。
ProcessCrashed	渲染进程崩溃退出，如段错误。
ProcessOom	程序内存不足。
ProcessExitUnknown	其他原因。

MixedMode枚举说明

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

CacheMode枚举说明

名称	描述
Default	使用未过期的cache加载资源，如果cache中无该资源则从网络中获取。
None	加载资源使用cache，如果cache中无该资源则从网络中获取。
Online	加载资源不使用cache，全部从网络中获取。
Only	只从cache中加载资源。

FileSelectorResult对象说明

通知Web组件的文件选择结果。

接口名称	功能描述
handleFileList(fileList: Array<string>): void	通知Web组件进行文件选择操作。fileList: 需要进行操作的文件列表。

FileSelectorParam对象说明

接口名称	功能描述
getTitle(): string	获取文件选择器标题。
getMode(): FileSelectorMode	获取文件选择器的模式。
getAcceptType(): Array<string>	获取文件过滤类型。
isCapture(): boolean	获取是否调用多媒体能力。

FileSelectorMode枚举说明

名称	描述
FileOpenMode	打开上传单个文件。
FileOpenMultipleMode	打开上传多个文件。
FileOpenFolderMode	打开上传文件夹模式。
FileSaveMode	文件保存模式。

onAlert事件、onConfirm事件、onConsole事件

• onAlert事件：网页触发alert()告警弹窗时触发回调。

• onConfirm事件：网页调用confirm()告警时触发此回调。

• onConsole事件：通知宿主应用JavaScript console消息。

针对onAlert事件、onConfirm事件：当事件返回false时，触发默认弹窗；当事件返回true时，需根据用户的确认操作调用JsResult通知Web组件关闭默认弹窗。

onConsole事件主要功能为打印Web组件关联的JavaScript的console消息，在示例中，onConsole可以打印index.js中的console信息。

示例

@Entry @Component struct Index {    // 定义Web组件的控制器controller    controller: WebController = new WebController(); ​    build() {      Column() {        Web({ src: $rawfile('index.html'), controller: this.controller }).fileAccess(true)        .javaScriptAccess(true)        .zoomAccess(true)        .imageAccess(true)        .height(500)        .padding(20)        .onAlert(e =>{           console.info('onAlert url: ', e.url);           console.info('onAlert message: ', e.message);           AlertDialog.show({             title: `系统弹窗`,             message: `这是一个系统弹窗，是否确认？`,             confirm: {               value: `确定`,               action: () => {                 console.log('onAlert Button-clicking callback')                 e.result.handleConfirm()              }            },             cancel: () => {               console.log('onAlert Closed callbacks')               e.result.handleCancel()            }          })           return true        })        .onConfirm(e =>{            console.log('onConfirm url: '+e.url)            console.log('onConfirm message: '+e.message)            AlertDialog.show({              title: `系统弹窗`,              message: `这是一个系统弹窗，是否确认？`,              confirm: {                value: `确定`,                action: () => {                  console.log('onConfirm Button-clicking callback')                  e.result.handleConfirm()                }              },              cancel: () => {                console.log('onConfirm Closed callbacks')                e.result.handleCancel()              }            })            return true        }) .onConsole(e =>{            console.log('onConsole ConsoleMessage: '+e.message.getMessage())            return true        })      }    } }

index.html

<!DOCTYPE html> <html> <meta charset="utf-8"> <body> Hello world! <div id="onAlertJs" onclick="alterStr()">触发alter弹窗</div> <div id="onConfirmJs" onclick="confirmStr()">触发confirm弹窗</div> <div id="indexjs" contenteditable="true"></div> <script type="text/javascript" src="index.js"></script> </body> </html>

index.js

//触发alter弹窗 function alterStr(){ console.log('alterStr start'); alert(); console.log('alterStr end'); } //触发confirm弹窗 function confirmStr(){ console.log('confirmStr start'); confirm(); console.log('confirmStr end'); }

index.html和index.js放在rawfile目录下。

onAlert、onConfirm返回false时，js内部的alert()、confirm()可自行执行结束。

onAlert、onConfirm返回true时，必须执行result.handleConfirm()或者result.handleCancel()后，js内部的alert()、confirm()才能执行结束,并打印alterStr end、confirmStr end

示例图

 

图中，点击"触发alter弹窗"，随机触发web组件的onAlert事件。

onProgressChange事件

网页加载进度变化，取值范围为0到100的整数。

示例

@Entry @Component struct Index { url : string = "https://www.baidu.com/"; @State progress: number = 0; @State hideProgress: boolean = true; // 定义Web组件的控制器controller controller: WebController = new WebController(); Progress({value: this.progress, total: 100}) .color('#0000ff') .visibility(this.hideProgress ? Visibility.None : Visibility.Visible) build() { Column() { Web({ src: this.url, controller: this.controller }).fileAccess(true) .javaScriptAccess(true) .zoomAccess(true) .imageAccess(true) .height(500) .padding(20) .onProgressChange(e => { this.progress = e.newProgress; if (this.progress === 100) { this.hideProgress = true; } else { this.hideProgress = false; } }) } } }

onDownloadStart事件

网页的下载任务开始时触发该回调。

示例

@Entry @Component struct Index { url : string = "https://www.baidu.com/"; // 定义Web组件的控制器controller controller: WebController = new WebController(); build() { Column() { Web({ src: this.url, controller: this.controller }).fileAccess(true) .javaScriptAccess(true) .zoomAccess(true) .imageAccess(true) .height(500) .padding(20) .onDownloadStart((event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => { let message = `onDownloadStart URL:${event.url}\n媒体资源类型:${event.mimetype}\n文件长度:${event.contentLength}` AlertDialog.show( { title: `userAgent:${event.userAgent}`, message: message, confirm: { value: `确认下载？`, action: () => { console.log('onDownloadStart Button-clicking callback') } }, cancel: () => { console.log('onDownloadStart Closed callbacks') } } ) }) } } }

网页加载百度成功，搜索任意软件下载页面，点击下载，弹出示例中“确认下载？”弹框。

onPageBegin事件

网页开始加载时触发该回调

示例

@Entry @Component struct Index { url : string = "https://www.baidu.com/"; // 定义Web组件的控制器controller controller: WebController = new WebController(); build() { Column() { Web({ src: this.url, controller: this.controller }).fileAccess(true) .javaScriptAccess(true) .zoomAccess(true) .imageAccess(true) .height(500) .padding(20) .onPageBegin(e =>{ console.log('onPageBegin url: '+e.url) }) } } }

onPageEnd事件

网页加载完成时触发该回调

结合WebController控制器的registerJavaScriptProxy方法进行展示，在网页加载完成时，注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。注册后，须调用refresh接口生效。同时可以通过WebController控制器的deleteJavaScriptRegister方法删除通过registerJavaScriptProxy注册到window上的指定name的应用侧JavaScript对象。

WebController控制器部分方法：

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对象的方法。

deleteJavaScriptRegister说明

deleteJavaScriptRegister(name: string): void

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

• 参数

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

refresh说明

refresh(): void

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

示例

@Entry @Component struct Index { @State text : number = 0; // 定义Web组件的控制器controller controller: WebController = new WebController(); @State contentFlag : boolean = false; //控制是否设置registerJavaScriptProxy //js回调ets层定义的方法 contentCall = { callbackOne : () =>{ this.text+=1; console.log('callbackOne success') }, callbackTwo : () =>{ this.text-=1; console.log('callbackTwo success') } } build() { Column() { Text('js修改ets属性text:'+this.text.toString()).fontSize(25) Text('ets调用js方法改变text值+1').fontSize(25) .onClick(()=>{ //调用js方法 this.controller.runJavaScript({ script: "change_text_add()" }) }) Text('ets调用js方法改变text值-1').fontSize(25) .onClick(()=>{ //调用js方法 this.controller.runJavaScript({ script: "change_text_reduce()" }) }) Text('ets调用js方法改变web显示').fontSize(25) .onClick(()=>{ this.controller.runJavaScript({script:"change_html_context('"+this.text+"')"}) }) Text('删除registerJavaScriptProxy注册').fontSize(25).onClick(()=>{ this.controller.deleteJavaScriptRegister("callBackToApp") this.contentFlag = false; }) Web({ src: $rawfile('index.html'), controller: this.controller }) .fileAccess(true) .javaScriptAccess(true) .zoomAccess(true) .imageAccess(true) .height(500) .padding(20) .onPageEnd(e => { if(this.contentFlag == false){ this.controller.registerJavaScriptProxy({ object : this.contentCall, name : "callBackToApp", // html--> name.method methodList : ["callbackOne","callbackTwo"], }) console.log('finish registerJavaScriptProxy'); this.controller.refresh() //注册代理之后需要刷新web this.contentFlag = true } // test()在index.html中定义 this.controller.runJavaScript({ script: 'test()' }); console.info('onPageEnd url: ', e.url); }) } } }

index.html

<!DOCTYPE html> <html> <meta charset="utf-8"> <body> Hello world! <div id="indexjs" contenteditable="true"></div> <script type="text/javascript" src="index.js"></script> </body> </html>

index.js

var INDEX = {}; INDEX.editor = document.getElementById('indexjs'); //获取html中元素 INDEX.setHtml = function(contents) { INDEX.editor.innerHTML = contents; //给id=“indexjs”的div元素赋值 } function change_html_context(contents) { console.info('test strat'); INDEX.setHtml(contents); console.info('test end'); } //ets调用js方法，间接回调ets的方法 function change_text_add() { console.log('change_text_add start'); var str = callBackToApp.callbackOne(); //js调用ets方法，实现ets访问 console.log('change_text_add end'); } //ets调用js方法，间接回调ets的方法 function change_text_reduce() { console.log('change_text_reduce start'); var str = callBackToApp.callbackTwo(); //js调用ets方法，实现ets访问 console.log('change_text_reduce end'); } function test() { console.info('Ark Web Component'); }

index.html和index.js放在rawfile目录下。

示例图

 

操作步骤：

• 点击"ets调用js方法改变text值+1"，将text设置为1

• 点击"ets调用js方法改变web显示"，text的值会显示在web组件中

• 点击"ets调用js方法改变text值-1"，将text设置为-1

• 再次点击"ets调用js方法改变web显示"，text的值会显示在web组件中

• 点击"删除registerJavaScriptProxy注册",ets无法再调用js方法

onErrorReceive事件、onHttpErrorReceive事件

• onErrorReceive事件：网页加载遇到错误时触发该回调。

• onHttpErrorReceive事件：网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调

示例

@Entry @Component struct Index { url : string = "https://www.baidu.com/"; // 定义Web组件的控制器controller controller: WebController = new WebController(); build() { Column() { Web({ src: this.url, controller: this.controller }).fileAccess(true) .javaScriptAccess(true) .zoomAccess(true) .imageAccess(true) .height(500) .padding(20) //网页加载资源遇到的HTTP错误（响应码>=400)时触发该回调 .onHttpErrorReceive((event?: { request: WebResourceRequest, response: WebResourceResponse }) => { console.log('onHttpErrorReceive response.getReasonMessage: '+event.response.getReasonMessage()) console.log('onHttpErrorReceive response.getResponseCode: '+event.response.getResponseCode()) console.log('onHttpErrorReceive response.getResponseEncoding: '+event.response.getResponseEncoding()) console.log('onHttpErrorReceive response.getResponseData: '+event.response.getResponseData()) console.log('onHttpErrorReceive response.getResponseHeader: '+JSON.stringify(event.response.getResponseHeader())) console.log('onHttpErrorReceive response.getResponseMimeType: '+event.response.getResponseMimeType()) }) //网页加载遇到错误时触发该回调 .onErrorReceive((event?: { request: WebResourceRequest, error: WebResourceError }) => { console.log('onErrorReceive error.getErrorCode: '+event.error.getErrorCode()) console.log('onErrorReceive error.getErrorInfo: '+event.error.getErrorInfo()) }) } } }

onTitleReceive事件

网页document标题更改时触发该回调。

示例

@Entry @Component struct Index { url : string = "https://www.baidu.com/"; // 定义Web组件的控制器controller controller: WebController = new WebController(); build() { Column() { Web({ src: this.url, controller: this.controller }).fileAccess(true) .javaScriptAccess(true) .zoomAccess(true) .imageAccess(true) .height(500) .padding(20) .onTitleReceive(e =>{ console.log('onTitleReceive title: '+JSON.stringify(e.title)) }) } } }

示例中，在网页中跳转不同页面，title信息会改变。

WebController控制器

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

accessBackward

accessBackward(): boolean

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

示例

@Entry @Component struct webControllerDemo{ url : string = "https://www.baidu.com/"; // 定义Web组件的控制器controller controller: WebController = new WebController(); build(){ Column() { Text('accessBackward').onClick(()=>{ this.controller.accessBackward() console.log('accessBackward retrun: '+JSON.stringify(this.controller.accessBackward())) }) Web({ src: this.url, controller: this.controller }) .fileAccess(true) .javaScriptAccess(true) .zoomAccess(true) .imageAccess(true) .height(500) .padding(20) } } }

示例中页面停留百度首页，和通过百度首页跳至任意页面，accessBackward分别返回0和1，说明页面在百度首页时，不可后退，其他页面均可后退。

accessForward

accessForward(): boolean

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

示例

@Entry @Component struct webControllerDemo{ url : string = "https://www.baidu.com/"; // 定义Web组件的控制器controller controller: WebController = new WebController(); build(){ Column() { Text('accessForward').onClick(()=>{ //this.controller.accessForward() console.log('accessForward retrun: '+JSON.stringify(this.controller.accessForward())) }) Web({ src: this.url, controller: this.controller }) .fileAccess(true) .javaScriptAccess(true) .zoomAccess(true) .imageAccess(true) .height(500) .padding(20) } } }

示例中通过百度首页顺序跳转第二网页和第三网页，页面在百度首页和第三网页，accessForward返回0，在第二网页，accessForward返回1。

accessStep

accessStep(step: number): boolean

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

• 参数

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

• 返回值

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

@Entry @Component struct webControllerDemo{ url : string = "https://www.baidu.com/"; // 定义Web组件的控制器controller controller: WebController = new WebController(); build(){ Column() { Text('accessStep').fontSize(25).onClick(()=>{ this.controller.accessStep(-2) console.log('accessStep retrun: '+JSON.stringify(this.controller.accessStep(-2))) }) Web({ src: this.url, controller: this.controller }) .fileAccess(true) .javaScriptAccess(true) .zoomAccess(true) .imageAccess(true) .height(500) .padding(20) } } }

示例中accessStep参数是-2，代表能否后退2步，通过百度首页顺序跳转第二网页和第三网页，页面在百度首页或者第二页时，accessStep返回0，页面在第三页时accessStep返回1。

backward

backward(): void

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

@Entry @Component struct webControllerDemo{ url : string = "https://www.baidu.com/"; // 定义Web组件的控制器controller controller: WebController = new WebController(); build(){ Column() { Text('backward').fontSize(25).onClick(()=>{ if(this.controller.accessBackward()){ this.controller.backward() console.log('backward success') }else{ console.log('backward fail') } }) Web({ src: this.url, controller: this.controller }) .fileAccess(true) .javaScriptAccess(true) .zoomAccess(true) .imageAccess(true) .height(500) .padding(20) } } }

示例中，当this.controller.accessBackward()返回true时， this.controller.backward()执行成功，页面返回上一页。

forward

forward(): void

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

@Entry @Component struct webControllerDemo{ url : string = "https://www.baidu.com/"; // 定义Web组件的控制器controller controller: WebController = new WebController(); build(){ Column() { Text('forward').fontSize(25).onClick(()=>{ if(this.controller.accessForward()){ this.controller.forward() console.log('forward success') }else{ console.log('forward fail') } }) Web({ src: this.url, controller: this.controller }) .fileAccess(true) .javaScriptAccess(true) .zoomAccess(true) .imageAccess(true) .height(500) .padding(20) } } }

示例中，this.controller.accessForward()返回true时，this.controller.forward()执行成功，页面前进至下一页。

getHitTest

getHitTest(): HitTestType

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

• HitTestType枚举说明

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

@Entry @Component struct webControllerDemo{ url : string = "https://www.baidu.com/"; // 定义Web组件的控制器controller controller: WebController = new WebController(); build(){ Column() { Text('getHitTest').fontSize(25).onClick(()=>{ console.log('getHitTest: '+JSON.stringify(this.controller.getHitTest())） }) Web({ src: this.url, controller: this.controller }) .fileAccess(true) .javaScriptAccess(true) .zoomAccess(true) .imageAccess(true) .height(500) .padding(20) } } }

示例中，通过百度首页分别点击一个新闻文字链接和图片链接，getHitTest返回2和3，分别表示HttpAnchor和HttpAnchorImg。

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请求头

@Entry @Component struct webControllerDemo{ url : string = "https://www.baidu.com/"; // 定义Web组件的控制器controller controller: WebController = new WebController(); build(){ Column() { Text('loadUrl').fontSize(25).onClick(()=>{ this.controller.loadUrl({url:"https://www.huawei.com/cn/"}) console.log('loadUrl') }) Web({ src: this.url, controller: this.controller }) .fileAccess(true) .javaScriptAccess(true) .zoomAccess(true) .imageAccess(true) .height(500) .padding(20) } } }

示例中，点击loadUrl会跳转至指向的网址-华为官网。

stop

stop(): void

停止页面加载。

@Entry @Component struct webControllerDemo{ url : string = "https://www.baidu.com/"; // 定义Web组件的控制器controller controller: WebController = new WebController(); build(){ Column() { Text('stop').fontSize(25).onClick(()=>{ this.controller.stop() console.log('stop') }) Web({ src: this.url, controller: this.controller }) .fileAccess(true) .javaScriptAccess(true) .zoomAccess(true) .imageAccess(true) .height(500) .padding(20) } } }

示例中，当点击任意页面后，立即点击stop，正在加载的网页，会停止加载。

参考文献

[1] OpenHarmony开发者文档Web组件介绍. https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md