devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Web）中篇_鸿蒙artks的function怎么用

作者：Cpp五条 | 2024-03-23 00:14:23

赞

踩

鸿蒙artks的function怎么用

onBeforeUnload

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

刷新或关闭场景下，在即将离开当前页面时触发此回调。刷新或关闭当前页面应先通过点击等方式获取焦点，才会触发此回调。

参数：

参数名参数类型参数描述
urlstring当前显示弹窗所在网页的URL。
messagestring弹窗中显示的信息。
resultJsResult通知Web组件用户操作行为。

返回值：

类型说明
boolean当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，函数中绘制的自定义弹窗无效。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: $rawfile("index.html"), controller: this.controller })
  12.         .onBeforeUnload((event) => {
  13.           if (event) {
  14.             console.log("event.url:" + event.url)
  15.             console.log("event.message:" + event.message)
  16.             AlertDialog.show({
  17.               title: 'onBeforeUnload',
  18.               message: 'text',
  19.               primaryButton: {
  20.                 value: 'cancel',
  21.                 action: () => {
  22.                   event.result.handleCancel()
  23.                 }
  24.               },
  25.               secondaryButton: {
  26.                 value: 'ok',
  27.                 action: () => {
  28.                   event.result.handleConfirm()
  29.                 }
  30.               },
  31.               cancel: () => {
  32.                 event.result.handleCancel()
  33.               }
  34.             })
  35.           }
  36.           return true
  37.         })
  38.     }
  39.   }
  40. }

加载的html文件。

  1. <!--index.html-->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
  6. </head>
  7. <body onbeforeunload="return myFunction()">
  8.   <h1>WebView onBeforeUnload Demo</h1>
  9.   <a href="https://www.example.com">Click here</a>
  10.   <script>
  11.     function myFunction() {
  12.       return "onBeforeUnload Event";
  13.     }
  14.   </script>
  15. </body>
  16. </html>

onConfirm

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

网页调用confirm()告警时触发此回调。

参数：

参数名参数类型参数描述
urlstring当前显示弹窗所在网页的URL。
messagestring弹窗中显示的信息。
resultJsResult通知Web组件用户操作行为。

返回值：

类型说明
boolean当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回false时，函数中绘制的自定义弹窗无效。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: $rawfile("index.html"), controller: this.controller })
  12.         .onConfirm((event) => {
  13.           if (event) {
  14.             console.log("event.url:" + event.url)
  15.             console.log("event.message:" + event.message)
  16.             AlertDialog.show({
  17.               title: 'onConfirm',
  18.               message: 'text',
  19.               primaryButton: {
  20.                 value: 'cancel',
  21.                 action: () => {
  22.                   event.result.handleCancel()
  23.                 }
  24.               },
  25.               secondaryButton: {
  26.                 value: 'ok',
  27.                 action: () => {
  28.                   event.result.handleConfirm()
  29.                 }
  30.               },
  31.               cancel: () => {
  32.                 event.result.handleCancel()
  33.               }
  34.             })
  35.           }
  36.           return true
  37.         })
  38.     }
  39.   }
  40. }

加载的html文件。

  1. <!--index.html-->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
  6. </head>
  7.  
  8. <body>
  9.   <h1>WebView onConfirm Demo</h1>
  10.   <button onclick="myFunction()">Click here</button>
  11.   <p id="demo"></p>
  12.   <script>
  13.     function myFunction() {
  14.       let x;
  15.       let r = confirm("click button!");
  16.       if (r == true) {
  17.         x = "ok";
  18.       } else {
  19.         x = "cancel";
  20.       }
  21.       document.getElementById("demo").innerHTML = x;
  22.     }
  23.   </script>
  24. </body>
  25. </html>

onPrompt9+

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

网页调用prompt()告警时触发此回调。

参数：

参数名参数类型参数描述
urlstring当前显示弹窗所在网页的URL。
messagestring弹窗中显示的信息。
resultJsResult通知Web组件用户操作行为。

返回值：

类型说明
boolean当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回false时，函数中绘制的自定义弹窗无效。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: $rawfile("index.html"), controller: this.controller })
  12.         .onPrompt((event) => {
  13.           if (event) {
  14.             console.log("url:" + event.url)
  15.             console.log("message:" + event.message)
  16.             console.log("value:" + event.value)
  17.             AlertDialog.show({
  18.               title: 'onPrompt',
  19.               message: 'text',
  20.               primaryButton: {
  21.                 value: 'cancel',
  22.                 action: () => {
  23.                   event.result.handleCancel()
  24.                 }
  25.               },
  26.               secondaryButton: {
  27.                 value: 'ok',
  28.                 action: () => {
  29.                   event.result.handlePromptConfirm(event.value)
  30.                 }
  31.               },
  32.               cancel: () => {
  33.                 event.result.handleCancel()
  34.               }
  35.             })
  36.           }
  37.           return true
  38.         })
  39.     }
  40.   }
  41. }

加载的html文件。

  1. <!--index.html-->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
  6. </head>
  7.  
  8. <body>
  9.   <h1>WebView onPrompt Demo</h1>
  10.   <button onclick="myFunction()">Click here</button>
  11.   <p id="demo"></p>
  12.   <script>
  13.     function myFunction() {
  14.       let message = prompt("Message info", "Hello World");
  15.       if (message != null && message != "") {
  16.         document.getElementById("demo").innerHTML = message;
  17.       }
  18.     }
  19.   </script>
  20. </body>
  21. </html>

onConsole

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

通知宿主应用JavaScript console消息。

参数：

参数名参数类型参数描述
messageConsoleMessage触发的控制台信息。

返回值：

类型说明
boolean当返回true时，该条消息将不会再打印至控制台，反之仍会打印至控制台。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onConsole((event) => {
  13.           if (event) {
  14.             console.log('getMessage:' + event.message.getMessage())
  15.             console.log('getSourceId:' + event.message.getSourceId())
  16.             console.log('getLineNumber:' + event.message.getLineNumber())
  17.             console.log('getMessageLevel:' + event.message.getMessageLevel())
  18.           }
  19.           return false
  20.         })
  21.     }
  22.   }
  23. }

onDownloadStart

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

通知主应用开始下载一个文件。

参数：

参数名参数类型参数描述
urlstring文件下载的URL。
userAgentstring用于下载的用户代理。
contentDispositionstring服务器返回的 Content-Disposition响应头，可能为空。
mimetypestring服务器返回内容媒体类型（MIME）信息。
contentLengthnumber服务器返回文件的长度。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onDownloadStart((event) => {
  13.           if (event) {
  14.             console.log('url:' + event.url)
  15.             console.log('userAgent:' + event.userAgent)
  16.             console.log('contentDisposition:' + event.contentDisposition)
  17.             console.log('contentLength:' + event.contentLength)
  18.             console.log('mimetype:' + event.mimetype)
  19.           }
  20.         })
  21.     }
  22.   }
  23. }

onErrorReceive

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

网页加载遇到错误时触发该回调。出于性能考虑，建议此回调中尽量执行简单逻辑。在无网络的情况下，触发此回调。

参数：

参数名参数类型参数描述
requestWebResourceRequest网页请求的封装信息。
errorWebResourceError网页加载资源错误的封装信息 。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onErrorReceive((event) => {
  13.           if (event) {
  14.             console.log('getErrorInfo:' + event.error.getErrorInfo())
  15.             console.log('getErrorCode:' + event.error.getErrorCode())
  16.             console.log('url:' + event.request.getRequestUrl())
  17.             console.log('isMainFrame:' + event.request.isMainFrame())
  18.             console.log('isRedirect:' + event.request.isRedirect())
  19.             console.log('isRequestGesture:' + event.request.isRequestGesture())
  20.             console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString())
  21.             let result = event.request.getRequestHeader()
  22.             console.log('The request header result size is ' + result.length)
  23.             for (let i of result) {
  24.               console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue)
  25.             }
  26.           }
  27.         })
  28.     }
  29.   }
  30. }

onHttpErrorReceive

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

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

参数：

参数名参数类型参数描述
requestWebResourceRequest网页请求的封装信息。
responseWebResourceResponse资源响应的封装信息。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onHttpErrorReceive((event) => {
  13.           if (event) {
  14.             console.log('url:' + event.request.getRequestUrl())
  15.             console.log('isMainFrame:' + event.request.isMainFrame())
  16.             console.log('isRedirect:' + event.request.isRedirect())
  17.             console.log('isRequestGesture:' + event.request.isRequestGesture())
  18.             console.log('getResponseData:' + event.response.getResponseData())
  19.             console.log('getResponseEncoding:' + event.response.getResponseEncoding())
  20.             console.log('getResponseMimeType:' + event.response.getResponseMimeType())
  21.             console.log('getResponseCode:' + event.response.getResponseCode())
  22.             console.log('getReasonMessage:' + event.response.getReasonMessage())
  23.             let result = event.request.getRequestHeader()
  24.             console.log('The request header result size is ' + result.length)
  25.             for (let i of result) {
  26.               console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
  27.             }
  28.             let resph = event.response.getResponseHeader()
  29.             console.log('The response header result size is ' + resph.length)
  30.             for (let i of resph) {
  31.               console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
  32.             }
  33.           }
  34.         })
  35.     }
  36.   }
  37. }

onPageBegin

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

网页开始加载时触发该回调，且只在主frame触发，iframe或者frameset的内容加载时不会触发此回调。

参数：

参数名参数类型参数描述
urlstring页面的URL地址。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onPageBegin((event) => {
  13.           if (event) {
  14.             console.log('url:' + event.url)
  15.           }
  16.         })
  17.     }
  18.   }
  19. }

onPageEnd

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

网页加载完成时触发该回调，且只在主frame触发。

参数：

参数名参数类型参数描述
urlstring页面的URL地址。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onPageEnd((event) => {
  13.           if (event) {
  14.             console.log('url:' + event.url)
  15.           }
  16.         })
  17.     }
  18.   }
  19. }

onProgressChange

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

网页加载进度变化时触发该回调。

参数：

参数名参数类型参数描述
newProgressnumber新的加载进度，取值范围为0到100的整数。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onProgressChange((event) => {
  13.           if (event) {
  14.             console.log('newProgress:' + event.newProgress)
  15.           }
  16.         })
  17.     }
  18.   }
  19. }

onTitleReceive

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

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

参数：

参数名参数类型参数描述
titlestringdocument标题内容。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onTitleReceive((event) => {
  13.           if (event) {
  14.             console.log('title:' + event.title)
  15.           }
  16.         })
  17.     }
  18.   }
  19. }

onRefreshAccessedHistory

onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void)

加载网页页面完成时触发该回调，用于应用更新其访问的历史链接。

参数：

参数名参数类型参数描述
urlstring访问的url。
isRefreshedbooleantrue表示该页面是被重新加载的（调用refresh9+接口），false表示该页面是新加载的。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onRefreshAccessedHistory((event) => {
  13.           if (event) {
  14.             console.log('url:' + event.url + ' isReload:' + event.isRefreshed)
  15.           }
  16.         })
  17.     }
  18.   }
  19. }

onSslErrorReceive(deprecated)

onSslErrorReceive(callback: (event?: { handler: Function, error: object }) => void)

通知用户加载资源时发生SSL错误。

说明：

从API version 8开始支持，从API version 9开始废弃。建议使用onSslErrorEventReceive9+替代。

onFileSelectorShow(deprecated)

onFileSelectorShow(callback: (event?: { callback: Function, fileSelector: object }) => void)

调用此函数以处理具有“文件”输入类型的HTML表单，以响应用户按下的“选择文件”按钮。

说明：

从API version 8开始支持，从API version 9开始废弃。建议使用onShowFileSelector9+替代。

onRenderExited9+

onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void)

应用渲染进程异常退出时触发该回调。

参数：

参数名参数类型参数描述
renderExitReasonRenderExitReason渲染进程异常退出的具体原因。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'chrome://crash/', controller: this.controller })
  12.         .onRenderExited((event) => {
  13.           if (event) {
  14.             console.log('reason:' + event.renderExitReason)
  15.           }
  16.         })
  17.     }
  18.   }
  19. }

onShowFileSelector9+

onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => boolean)

调用此函数以处理具有“文件”输入类型的HTML表单，以响应用户按下的“选择文件”按钮。

参数：

参数名参数类型参数描述
resultFileSelectorResult用于通知Web组件文件选择的结果。
fileSelectorFileSelectorParam文件选择器的相关信息。

返回值：

类型说明
boolean当返回值为true时，用户可以调用系统提供的弹窗能力。当回调返回false时，函数中绘制的自定义弹窗无效。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  3. import picker from '@ohos.file.picker';
  4. import { BusinessError } from '@ohos.base';
  5.  
  6. @Entry
  7. @Component
  8. struct WebComponent {
  9.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  10.  
  11.   build() {
  12.     Column() {
  13.       Web({ src: $rawfile('index.html'), controller: this.controller })
  14.         .onShowFileSelector((event) => {
  15.           console.log('MyFileUploader onShowFileSelector invoked')
  16.           const documentSelectOptions = new picker.DocumentSelectOptions();
  17.           let uri: string | null = null;
  18.           const documentViewPicker = new picker.DocumentViewPicker();
  19.           documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
  20.             uri = documentSelectResult[0];
  21.             console.info('documentViewPicker.select to file succeed and uri is:' + uri);
  22.             if (event) {
  23.               event.result.handleFileList([uri]);
  24.             }
  25.           }).catch((err: BusinessError) => {
  26.             console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
  27.           })
  28.           return true
  29.         })
  30.     }
  31.   }
  32. }

加载的html文件。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
  5. </head>
  6. <body>
  7.   <form id="upload-form" enctype="multipart/form-data">
  8.     <input type="file" id="upload" name="upload"/>
  9.     </form>
  10. </body>
  11. </html>

onResourceLoad9+

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

通知Web组件所加载的资源文件url信息。

参数：

参数名参数类型参数描述
urlstring所加载的资源文件url信息。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onResourceLoad((event) => {
  13.           console.log('onResourceLoad: ' + event.url)
  14.         })
  15.     }
  16.   }
  17. }

onScaleChange9+

onScaleChange(callback: (event: {oldScale: number, newScale: number}) => void)

当前页面显示比例的变化时触发该回调。

参数：

参数名参数类型参数描述
oldScalenumber变化前的显示比例百分比。
newScalenumber变化后的显示比例百分比。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onScaleChange((event) => {
  13.           console.log('onScaleChange changed from ' + event.oldScale + ' to ' + event.newScale)
  14.         })
  15.     }
  16.   }
  17. }

onUrlLoadIntercept(deprecated)

onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean)

当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。 从API version 10开始不再维护，建议使用onLoadIntercept10+代替。

参数：

参数名参数类型参数描述
datastring | WebResourceRequesturl的相关信息。

返回值：

类型说明
boolean返回true表示阻止此次加载，否则允许此次加载。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onUrlLoadIntercept((event) => {
  13.           if (event) {
  14.             console.log('onUrlLoadIntercept ' + event.data.toString())
  15.           }
  16.           return true
  17.         })
  18.     }
  19.   }
  20. }

onInterceptRequest9+

onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebResourceResponse)

当Web组件加载url之前触发该回调，用于拦截url并返回响应数据。

参数：

参数名参数类型参数描述
requestWebResourceRequesturl请求的相关信息。

返回值：

类型说明
WebResourceResponse返回响应数据则按照响应数据加载，无响应数据则返回null表示按照原来的方式加载。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.   responseweb: WebResourceResponse = new WebResourceResponse()
  9.   heads:Header[] = new Array()
  10.   @State webdata: string = "<!DOCTYPE html>\n" +
  11.   "<html>\n"+
  12.   "<head>\n"+
  13.   "<title>intercept test</title>\n"+
  14.   "</head>\n"+
  15.   "<body>\n"+
  16.   "<h1>intercept test</h1>\n"+
  17.   "</body>\n"+
  18.   "</html>"
  19.   build() {
  20.     Column() {
  21.       Web({ src: 'www.example.com', controller: this.controller })
  22.         .onInterceptRequest((event) => {
  23.           if (event) {
  24.             console.log('url:' + event.request.getRequestUrl())
  25.           }
  26.           let head1:Header = {
  27.             headerKey:"Connection",
  28.             headerValue:"keep-alive"
  29.           }
  30.           let head2:Header = {
  31.             headerKey:"Cache-Control",
  32.             headerValue:"no-cache"
  33.           }
  34.           let length = this.heads.push(head1)
  35.           length = this.heads.push(head2)
  36.           this.responseweb.setResponseHeader(this.heads)
  37.           this.responseweb.setResponseData(this.webdata)
  38.           this.responseweb.setResponseEncoding('utf-8')
  39.           this.responseweb.setResponseMimeType('text/html')
  40.           this.responseweb.setResponseCode(200)
  41.           this.responseweb.setReasonMessage('OK')
  42.           return this.responseweb
  43.         })
  44.     }
  45.   }
  46. }

onHttpAuthRequest9+

onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, realm: string}) => boolean)

通知收到http auth认证请求。

参数：

参数名参数类型参数描述
handlerHttpAuthHandler通知Web组件用户操作行为。
hoststringHTTP身份验证凭据应用的主机。
realmstringHTTP身份验证凭据应用的域。

返回值：

类型说明
boolean返回false表示此次认证失败，否则成功。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  7.   httpAuth: boolean = false
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onHttpAuthRequest((event) => {
  13.           if (event) {
  14.             AlertDialog.show({
  15.               title: 'onHttpAuthRequest',
  16.               message: 'text',
  17.               primaryButton: {
  18.                 value: 'cancel',
  19.                 action: () => {
  20.                   event.handler.cancel()
  21.                 }
  22.               },
  23.               secondaryButton: {
  24.                 value: 'ok',
  25.                 action: () => {
  26.                   this.httpAuth = event.handler.isHttpAuthInfoSaved()
  27.                   if (this.httpAuth == false) {
  28.                     web_webview.WebDataBase.saveHttpAuthCredentials(
  29.                       event.host,
  30.                       event.realm,
  31.                       "2222",
  32.                       "2222"
  33.                     )
  34.                     event.handler.cancel()
  35.                   }
  36.                 }
  37.               },
  38.               cancel: () => {
  39.                 event.handler.cancel()
  40.               }
  41.             })
  42.           }
  43.           return true
  44.         })
  45.     }
  46.   }
  47. }

onSslErrorEventReceive9+

onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslError }) => void)

通知用户加载资源时发生SSL错误。

参数：

参数名参数类型参数描述
handlerSslErrorHandler通知Web组件用户操作行为。
errorSslError错误码。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  7.   httpAuth: boolean = false
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onHttpAuthRequest((event) => {
  13.           if (event) {
  14.             AlertDialog.show({
  15.               title: 'onHttpAuthRequest',
  16.               message: 'text',
  17.               primaryButton: {
  18.                 value: 'cancel',
  19.                 action: () => {
  20.                   event.handler.cancel()
  21.                 }
  22.               },
  23.               secondaryButton: {
  24.                 value: 'ok',
  25.                 action: () => {
  26.                   this.httpAuth = event.handler.isHttpAuthInfoSaved()
  27.                   if (this.httpAuth == false) {
  28.                     web_webview.WebDataBase.saveHttpAuthCredentials(
  29.                       event.host,
  30.                       event.realm,
  31.                       "2222",
  32.                       "2222"
  33.                     )
  34.                     event.handler.cancel()
  35.                   }
  36.                 }
  37.               },
  38.               cancel: () => {
  39.                 event.handler.cancel()
  40.               }
  41.             })
  42.           }
  43.           return true
  44.         })
  45.     }
  46.   }
  47. }

onClientAuthenticationRequest9+

onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationHandler, host : string, port : number, keyTypes : Array<string>, issuers : Array<string>}) => void)

通知用户收到SSL客户端证书请求事件。

参数：

参数名参数类型参数描述
handlerClientAuthenticationHandler通知Web组件用户操作行为。
hoststring请求证书服务器的主机名。
portnumber请求证书服务器的端口号。
keyTypesArray<string>可接受的非对称秘钥类型。
issuersArray<string>与私钥匹配的证书可接受颁发者。

示例：

未对接证书管理的双向认证。

  1. // xxx.ets API9
  2. import web_webview from '@ohos.web.webview'
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  7.  
  8.   build() {
  9.     Column() {
  10.       Web({ src: 'www.example.com', controller: this.controller })
  11.         .onClientAuthenticationRequest((event) => {
  12.           AlertDialog.show({
  13.             title: 'onClientAuthenticationRequest',
  14.             message: 'text',
  15.             primaryButton: {
  16.               value: 'confirm',
  17.               action: () => {
  18.                 event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem")
  19.               }
  20.             },
  21.             secondaryButton: {
  22.               value: 'cancel',
  23.               action: () => {
  24.                 event.handler.cancel()
  25.               }
  26.             },
  27.             cancel: () => {
  28.               event.handler.ignore()
  29.             }
  30.           })
  31.         })
  32.     }
  33.   }
  34. }

对接证书管理的双向认证。

  1. 构造单例对象GlobalContext。

    1. // GlobalContext.ts
    2. export class GlobalContext {
    3.   private constructor() {}
    4.   private static instance: GlobalContext;
    5.   private _objects = new Map<string, Object>();
    6.  
    7.   public static getContext(): GlobalContext {
    8.     if (!GlobalContext.instance) {
    9.       GlobalContext.instance = new GlobalContext();
    10.     }
    11.     return GlobalContext.instance;
    12.   }
    13.  
    14.   getObject(value: string): Object | undefined {
    15.     return this._objects.get(value);
    16.   }
    17.  
    18.   setObject(key: string, objectClass: Object): void {
    19.     this._objects.set(key, objectClass);
    20.   }
    21. }

  2. 实现双向认证。

    1. // xxx.ets API10
    2. import common from '@ohos.app.ability.common';
    3. import Want from '@ohos.app.ability.Want';
    4. import web_webview from '@ohos.web.webview'
    5. import { BusinessError } from '@ohos.base';
    6. import bundleManager from '@ohos.bundle.bundleManager'
    7. import { GlobalContext } from '../GlobalContext'
    8.  
    9.  let uri = "";
    10.  
    11.  export default class CertManagerService {
    12.    private static sInstance: CertManagerService;
    13.    private authUri = "";
    14.    private appUid = "";
    15.  
    16.    public static getInstance(): CertManagerService {
    17.      if (CertManagerService.sInstance == null) {
    18.        CertManagerService.sInstance = new CertManagerService();
    19.      }
    20.      return CertManagerService.sInstance;
    21.    }
    22.  
    23.    async grantAppPm(callback: (message: string) => void) {
    24.      let message = '';
    25.      let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT | bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION;
    26.      //注：com.example.myapplication需要写实际应用名称
    27.      try {
    28.        bundleManager.getBundleInfoForSelf(bundleFlags).then((data) => {
    29.          console.info('getBundleInfoForSelf successfully. Data: %{public}s', JSON.stringify(data));
    30.          this.appUid = data.appInfo.uid.toString();
    31.        }).catch((err: BusinessError) => {
    32.          console.error('getBundleInfoForSelf failed. Cause: %{public}s', err.message);
    33.        });
    34.      } catch (err) {
    35.        let message = (err as BusinessError).message;
    36.        console.error('getBundleInfoForSelf failed: %{public}s', message);
    37.      }
    38.  
    39.      //注：需要在MainAbility.ts文件的onCreate函数里添加GlobalContext.getContext().setObject("AbilityContext", this.context)
    40.      let abilityContext = GlobalContext.getContext().getObject("AbilityContext") as common.UIAbilityContext
    41.      await abilityContext.startAbilityForResult(
    42.        {
    43.          bundleName: "com.ohos.certmanager",
    44.          abilityName: "MainAbility",
    45.          uri: "requestAuthorize",
    46.          parameters: {
    47.            appUid: this.appUid, //传入申请应用的appUid
    48.          }
    49.        } as Want)
    50.        .then((data: common.AbilityResult) => {
    51.          if (!data.resultCode && data.want) {
    52.            if (data.want.parameters) {
    53.              this.authUri = data.want.parameters.authUri as string; //授权成功后获取返回的authUri
    54.            }
    55.          }
    56.        })
    57.      message += "after grantAppPm authUri: " + this.authUri;
    58.      uri = this.authUri;
    59.      callback(message)
    60.    }
    61.  }
    62.  
    63.  @Entry
    64.  @Component
    65.  struct WebComponent {
    66.    controller: web_webview.WebviewController = new web_webview.WebviewController();
    67.    @State message: string = 'Hello World' //message主要是调试观察使用
    68.    certManager = CertManagerService.getInstance();
    69.  
    70.    build() {
    71.      Row() {
    72.        Column() {
    73.          Row() {
    74.            //第一步：需要先进行授权，获取到uri
    75.            Button('GrantApp')
    76.              .onClick(() => {
    77.                this.certManager.grantAppPm((data) => {
    78.                  this.message = data;
    79.                });
    80.              })
    81.            //第二步：授权后，双向认证会通过onClientAuthenticationRequest回调将uri传给web进行认证
    82.            Button("ClientCertAuth")
    83.              .onClick(() => {
    84.                this.controller.loadUrl('https://www.example2.com'); //支持双向认证的服务器网站
    85.              })
    86.          }
    87.  
    88.          Web({ src: 'https://www.example1.com', controller: this.controller })
    89.            .fileAccess(true)
    90.            .javaScriptAccess(true)
    91.            .domStorageAccess(true)
    92.            .onlineImageAccess(true)
    93.  
    94.          .onClientAuthenticationRequest((event) => {
    95.            AlertDialog.show({
    96.              title: 'ClientAuth',
    97.              message: 'Text',
    98.              confirm: {
    99.                value: 'Confirm',
    100.                action: () => {
    101.                  event.handler.confirm(uri);
    102.                }
    103.              },
    104.              cancel: () => {
    105.                event.handler.cancel();
    106.              }
    107.            })
    108.          })
    109.        }
    110.      }
    111.      .width('100%')
    112.      .height('100%')
    113.    }
    114.  }

onPermissionRequest9+

onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)

通知收到获取权限请求。

参数：

参数名参数类型参数描述
requestPermissionRequest通知Web组件用户操作行为。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.   build() {
  9.     Column() {
  10.       Web({ src: $rawfile('index.html'), controller: this.controller })
  11.         .onPermissionRequest((event) => {
  12.           if (event) {
  13.             AlertDialog.show({
  14.               title: 'title',
  15.               message: 'text',
  16.               primaryButton: {
  17.                 value: 'deny',
  18.                 action: () => {
  19.                   event.request.deny()
  20.                 }
  21.               },
  22.               secondaryButton: {
  23.                 value: 'onConfirm',
  24.                 action: () => {
  25.                   event.request.grant(event.request.getAccessibleResource())
  26.                 }
  27.               },
  28.               cancel: () => {
  29.                 event.request.deny()
  30.               }
  31.             })
  32.           }
  33.         })
  34.     }
  35.   }
  36. }

加载的html文件。

  1.  <!-- index.html -->
  2.  <!DOCTYPE html>
  3.  <html>
  4.  <head>
  5.    <meta charset="UTF-8">
  6.  </head>
  7.  <body>
  8.  <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
  9.  <canvas id="canvas" width="500px" height="500px"></canvas>
  10.  <br>
  11.  <input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()"/>
  12.  <script>
  13.    function getMedia()
  14.    {
  15.      let constraints = {
  16.        video: {width: 500, height: 500},
  17.        audio: true
  18.      };
  19.      //获取video摄像头区域
  20.      let video = document.getElementByld("video");
  21.      //返回的Promise对象
  22.      let promise = navigator.mediaDevices.getUserMedia(constraints);
  23.      //then()异步，调用MediaStream对象作为参数
  24.      promise.then(function (MediaStream) {
  25.        video.srcObject = MediaStream;
  26.        video.play();
  27.      });
  28.    }
  29.  </script>
  30.  </body>
  31.  </html>

onContextMenuShow9+

onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebContextMenuResult }) => boolean)

长按特定元素（例如图片，链接）或鼠标右键，跳出菜单。

参数：

参数名参数类型参数描述
paramWebContextMenuParam菜单相关参数。
resultWebContextMenuResult菜单相应事件传入内核。

返回值：

类型说明
boolean自定义菜单返回true，触发的自定义菜单无效返回false。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3. import pasteboard from '@ohos.pasteboard'
  4. const TAG = 'ContextMenu';
  5.  
  6. @Entry
  7. @Component
  8. struct WebComponent {
  9.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  10.   private result: WebContextMenuResult | undefined = undefined;
  11.   @State linkUrl: string = '';
  12.   @State offsetX: number = 0;
  13.   @State offsetY: number = 0;
  14.   @State showMenu: boolean = false;
  15.   @Builder
  16.   //构建自定义菜单及触发功能接口
  17.   MenuBuilder(){
  18.     //以垂直列表形式显示的菜单。
  19.     Menu(){
  20.       //展示菜单Menu中具体的item菜单项。
  21.       MenuItem({
  22.         content: '复制图片',
  23.       })
  24.       .width(100)
  25.       .height(50)
  26.       .onClick(() => {
  27.         this.result?.copyImage();
  28.         this.showMenu = false;
  29.       })
  30.       MenuItem({
  31.         content: '剪切',
  32.       })
  33.       .width(100)
  34.       .height(50)
  35.       .onClick(() => {
  36.         this.result?.cut();
  37.         this.showMenu = false;
  38.       })
  39.       MenuItem({
  40.         content: '复制',
  41.       })
  42.       .width(100)
  43.       .height(50)
  44.       .onClick(() => {
  45.         this.result?.copy();
  46.         this.showMenu = false;
  47.       })
  48.       MenuItem({
  49.         content: '粘贴',
  50.       })
  51.       .width(100)
  52.       .height(50)
  53.       .onClick(() => {
  54.         this.result?.paste();
  55.         this.showMenu = false;
  56.       })
  57.       MenuItem({
  58.         content: '复制链接',
  59.       })
  60.       .width(100)
  61.       .height(50)
  62.       .onClick(() => {
  63.         let pasteData = pasteboard.createData('text/plain', this.linkUrl);
  64.         pasteboard.getSystemPasteboard().setData(pasteData, (error)=>{
  65.           if(error){
  66.             return;
  67.           }
  68.         })
  69.         this.showMenu = false;
  70.       })
  71.       MenuItem({
  72.         content: '全选',
  73.       })
  74.       .width(100)
  75.       .height(50)
  76.       .onClick(() => {
  77.         this.result?.selectAll();
  78.         this.showMenu = false;
  79.       })
  80.     }
  81.     .width(150)
  82.     .height(300)
  83.   }
  84.  
  85.   build() {
  86.     Column() {
  87.       Web({ src: $rawfile("index.html"), controller: this.controller })
  88.         //触发自定义弹窗
  89.         .onContextMenuShow((event) => {
  90.           if (event) {
  91.             this.result = event.result
  92.             console.info("x coord = " + event.param.x())
  93.             console.info("link url = " + event.param.getLinkUrl())
  94.             this.linkUrl = event.param.getLinkUrl()
  95.           }
  96.           console.info(TAG, `x: ${this.offsetX}, y: ${this.offsetY}`);
  97.           this.showMenu = true;
  98.           this.offsetX = 250;
  99.           this.offsetY = Math.max(px2vp(event?.param.y() ?? 0) - 0, 0);
  100.           return true
  101.       })
  102.       .bindPopup(this.showMenu,
  103.       {
  104.         builder: this.MenuBuilder(),
  105.         enableArrow: false,
  106.         placement: Placement.LeftTop,
  107.         offset: { x: this.offsetX, y: this.offsetY},
  108.         mask: false,
  109.         onStateChange: (e) => {
  110.           if(!e.isVisible){
  111.             this.showMenu = false;
  112.             this.result!.closeContextMenu();
  113.           }
  114.         }
  115.       })
  116.     }
  117.   }
  118. }

加载的html文件。

  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <body>
  5.   <h1>onContextMenuShow</h1>
  6.   <a href="http://www.example.com" style="font-size:27px">链接www.example.com</a>
  7.   //rawfile下放任意一张图片命名为example.png
  8.   <div><img src="example.png"></div>
  9.   <p>选中文字鼠标右键弹出菜单</p>
  10. </body>
  11. </html>

onContextMenuHide11+

onContextMenuHide(callback: OnContextMenuHideCallback)

长按特定元素（例如图片，链接）或鼠标右键，隐藏菜单。

参数：

参数名参数类型参数描述
callbackOnContextMenuHideCallback菜单相关参数。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.   build() {
  9.     Column() {
  10.       Web({ src: 'www.example.com', controller: this.controller })
  11.         .onContextMenuHide(() => {
  12.           console.log("onContextMenuHide callback")
  13.       })
  14.     }
  15.   }
  16. }

onScroll9+

onScroll(callback: (event: {xOffset: number, yOffset: number}) => void)

通知网页滚动条滚动位置。

参数：

参数名参数类型参数描述
xOffsetnumber以网页最左端为基准，水平滚动条滚动所在位置。
yOffsetnumber以网页最上端为基准，竖直滚动条滚动所在位置。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.   build() {
  9.     Column() {
  10.       Web({ src: 'www.example.com', controller: this.controller })
  11.       .onScroll((event) => {
  12.           console.info("x = " + event.xOffset)
  13.           console.info("y = " + event.yOffset)
  14.       })
  15.     }
  16.   }
  17. }

onGeolocationShow

onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocation }) => void)

通知用户收到地理位置信息获取请求。

参数：

参数名参数类型参数描述
originstring指定源的字符串索引。
geolocationJsGeolocation通知Web组件用户操作行为。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.   build() {
  9.     Column() {
  10.       Web({ src:$rawfile('index.html'), controller:this.controller })
  11.       .geolocationAccess(true)
  12.       .onGeolocationShow((event) => {
  13.         if (event) {
  14.           AlertDialog.show({
  15.             title: 'title',
  16.             message: 'text',
  17.             confirm: {
  18.               value: 'onConfirm',
  19.               action: () => {
  20.                 event.geolocation.invoke(event.origin, true, true)
  21.               }
  22.             },
  23.             cancel: () => {
  24.               event.geolocation.invoke(event.origin, false, true)
  25.             }
  26.           })
  27.         }
  28.       })
  29.     }
  30.   }
  31. }

加载的html文件。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p id="locationInfo">位置信息</p>
  5. <button onclick="getLocation()">获取位置</button>
  6. <script>
  7. var locationInfo=document.getElementById("locationInfo");
  8. function getLocation(){
  9.   if (navigator.geolocation) {
  10.     <!-- 前端页面访问设备地理位置 -->
  11.     navigator.geolocation.getCurrentPosition(showPosition);
  12.   }
  13. }
  14. function showPosition(position){
  15.   locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
  16. }
  17. </script>
  18. </body>
  19. </html>

onGeolocationHide

onGeolocationHide(callback: () => void)

通知用户先前被调用onGeolocationShow时收到地理位置信息获取请求已被取消。

参数：

参数名参数类型参数描述
callback() => void地理位置信息获取请求已被取消的回调函数。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.   build() {
  9.     Column() {
  10.       Web({ src:'www.example.com', controller:this.controller })
  11.       .geolocationAccess(true)
  12.       .onGeolocationHide(() => {
  13.         console.log("onGeolocationHide...")
  14.       })
  15.     }
  16.   }
  17. }

onFullScreenEnter9+

onFullScreenEnter(callback: (event: { handler: FullScreenExitHandler }) => void)

通知开发者web组件进入全屏模式。

参数：

参数名参数类型参数描述
handlerFullScreenExitHandler用于退出全屏模式的函数句柄。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.   handler: FullScreenExitHandler | null = null
  9.   build() {
  10.     Column() {
  11.       Web({ src:'www.example.com', controller:this.controller })
  12.       .onFullScreenEnter((event) => {
  13.         console.log("onFullScreenEnter...")
  14.         this.handler = event.handler
  15.       })
  16.     }
  17.   }
  18. }

onFullScreenExit9+

onFullScreenExit(callback: () => void)

通知开发者web组件退出全屏模式。

参数：

参数名参数类型参数描述
callback() => void退出全屏模式时的回调函数。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.   handler: FullScreenExitHandler | null = null
  9.   build() {
  10.     Column() {
  11.       Web({ src:'www.example.com', controller:this.controller })
  12.       .onFullScreenExit(() => {
  13.         console.log("onFullScreenExit...")
  14.         if (this.handler) {
  15.           this.handler.exitFullScreen()
  16.         }
  17.       })
  18.       .onFullScreenEnter((event) => {
  19.         this.handler = event.handler
  20.       })
  21.     }
  22.   }
  23. }

onWindowNew9+

onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetUrl: string, handler: ControllerHandler}) => void)

使能multiWindowAccess情况下，通知用户新建窗口请求。 若不调用event.handler.setWebController接口，会造成render进程阻塞。 如果不需要打开新窗口，在调用event.handler.setWebController接口时须设置成null。

参数：

参数名参数类型参数描述
isAlertbooleantrue代表请求创建对话框，false代表新标签页。
isUserTriggerbooleantrue代表用户触发，false代表非用户触发。
targetUrlstring目标url。
handlerControllerHandler用于设置新建窗口的WebviewController实例。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. //在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。
  5. @CustomDialog
  6. struct NewWebViewComp {
  7. controller?: CustomDialogController
  8. webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
  9. build() {
  10.     Column() {
  11.       Web({ src: "", controller: this.webviewController1 })
  12.         .javaScriptAccess(true)
  13.         .multiWindowAccess(false)
  14.         .onWindowExit(()=> {
  15.           console.info("NewWebViewComp onWindowExit")
  16.           if (this.controller) {
  17.             this.controller.close()
  18.           }
  19.         })
  20.       }
  21.   }
  22. }
  23.  
  24. @Entry
  25. @Component
  26. struct WebComponent {
  27.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  28.   dialogController: CustomDialogController | null = null
  29.   build() {
  30.     Column() {
  31.       Web({ src: 'www.example.com', controller: this.controller })
  32.         .javaScriptAccess(true)
  33.         //需要使能multiWindowAccess
  34.         .multiWindowAccess(true)
  35.         .allowWindowOpenMethod(true)
  36.         .onWindowNew((event) => {
  37.           if (this.dialogController) {
  38.             this.dialogController.close()
  39.           }
  40.           let popController:web_webview.WebviewController = new web_webview.WebviewController()
  41.           this.dialogController = new CustomDialogController({
  42.             builder: NewWebViewComp({webviewController1: popController})
  43.           })
  44.           this.dialogController.open()
  45.           //将新窗口对应WebviewController返回给Web内核。
  46.           //如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。
  47.           //若不调用event.handler.setWebController接口，会造成render进程阻塞。
  48.           event.handler.setWebController(popController)
  49.         })
  50.     }
  51.   }
  52. }

onWindowExit9+

onWindowExit(callback: () => void)

通知用户窗口关闭请求。

参数：

参数名参数类型参数描述
callback() => void窗口请求关闭的回调函数。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.   build() {
  9.     Column() {
  10.       Web({ src:'www.example.com', controller: this.controller })
  11.       .onWindowExit(() => {
  12.         console.log("onWindowExit...")
  13.       })
  14.     }
  15.   }
  16. }

onSearchResultReceive9+

onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMatches: number, isDoneCounting: boolean}) => void): WebAttribute

回调通知调用方网页页内查找的结果。

参数：

参数名参数类型参数描述
activeMatchOrdinalnumber当前匹配的查找项的序号（从0开始）。
numberOfMatchesnumber所有匹配到的关键词的个数。
isDoneCountingboolean当次页内查找操作是否结束。该方法可能会回调多次，直到isDoneCounting为true为止。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.    	  .onSearchResultReceive(ret => {
  13.    	    if (ret) {
  14.           console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
  15.             "[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting)
  16.    	    }
  17.    	  })
  18.     }
  19.   }
  20. }

onDataResubmitted9+

onDataResubmitted(callback: (event: {handler: DataResubmissionHandler}) => void)

设置网页表单可以重新提交时触发的回调函数。

参数：

参数名参数类型参数描述
handlerDataResubmissionHandler表单数据重新提交句柄。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3. import business_error from '@ohos.base';
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.   build() {
  9.     Column() {
  10.       //在网页中点击提交之后，点击refresh按钮可以重新提交时的触发函数。
  11.       Button('refresh')
  12.       .onClick(() => {
  13.         try {
  14.           this.controller.refresh();
  15.         } catch (error) {
  16.           let e: business_error.BusinessError = error as business_error.BusinessError;
  17.           console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
  18.         }
  19.       })
  20.       Web({ src:$rawfile('index.html'), controller: this.controller })
  21.        .onDataResubmitted((event) => {
  22.         console.log('onDataResubmitted')
  23.         event.handler.resend();
  24.       })
  25.     }
  26.   }
  27. }

加载的html文件。

  1.  <!-- index.html -->
  2.  <!DOCTYPE html>
  3.  <html>
  4.  <head>
  5.    <meta charset="utf-8">
  6.  </head>
  7.  <body>
  8.    <form action="http://httpbin.org/post" method="post">
  9.      <input type="text" name="username">
  10.      <input type="submit" name="提交">
  11.    </form>
  12.  </body>
  13.  </html>

onPageVisible9+

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

设置旧页面不再呈现，新页面即将可见时触发的回调函数。

参数：

参数名参数类型参数描述
urlstring旧页面不再呈现，新页面即将可见时新页面的url地址。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  7.   build() {
  8.     Column() {
  9.       Web({ src:'www.example.com', controller: this.controller })
  10.        .onPageVisible((event) => {
  11.         console.log('onPageVisible url:' + event.url)
  12.       })
  13.     }
  14.   }
  15. }

onInterceptKeyEvent9+

onInterceptKeyEvent(callback: (event: KeyEvent) => boolean)

设置键盘事件的回调函数，该回调在被Webview使用前触发。

参数：

参数名参数类型参数描述
eventKeyEvent触发的KeyEvent事件。

返回值：

类型说明
boolean回调函数通过返回boolean类型值来决定是否继续将该KeyEvent传入Webview内核。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  7.   build() {
  8.     Column() {
  9.       Web({ src:'www.example.com', controller: this.controller })
  10.        .onInterceptKeyEvent((event) => {
  11.         if (event.keyCode == 2017 || event.keyCode == 2018) {
  12.           console.info(`onInterceptKeyEvent get event.keyCode ${event.keyCode}`)
  13.           return true;
  14.         }
  15.         return false;
  16.       })
  17.     }
  18.   }
  19. }

onTouchIconUrlReceived9+

onTouchIconUrlReceived(callback: (event: {url: string, precomposed: boolean}) => void)

设置接收到apple-touch-icon url地址时的回调函数。

参数：

参数名参数类型参数描述
urlstring接收到的apple-touch-icon url地址。
precomposedboolean对应apple-touch-icon是否为预合成。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  7.   build() {
  8.     Column() {
  9.       Web({ src:'www.baidu.com', controller: this.controller })
  10.        .onTouchIconUrlReceived((event) => {
  11.         console.log('onTouchIconUrlReceived:' + JSON.stringify(event))
  12.       })
  13.     }
  14.   }
  15. }

onFaviconReceived9+

onFaviconReceived(callback: (event: { favicon: PixelMap }) => void)

设置应用为当前页面接收到新的favicon时的回调函数。

参数：

参数名参数类型参数描述
faviconPixelMap接收到的favicon图标的PixelMap对象。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3. import image from "@ohos.multimedia.image"
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.   @State icon: image.PixelMap | undefined = undefined;
  9.   build() {
  10.     Column() {
  11.       Web({ src:'www.example.com', controller: this.controller })
  12.        .onFaviconReceived((event) => {
  13.         console.log('onFaviconReceived');
  14.         this.icon = event.favicon;
  15.       })
  16.     }
  17.   }
  18. }

onAudioStateChanged10+

onAudioStateChanged(callback: (event: { playing: boolean }) => void)

设置网页上的音频播放状态发生改变时的回调函数。

参数：

参数名参数类型参数描述
playingboolean当前页面的音频播放状态，true表示正在播放，false表示未播放。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  7.   @State playing: boolean = false
  8.   build() {
  9.     Column() {
  10.       Web({ src:'www.example.com', controller: this.controller })
  11.         .onAudioStateChanged(event => {
  12.           this.playing = event.playing
  13.           console.debug('onAudioStateChanged playing: ' + this.playing)
  14.         })
  15.     }
  16.   }
  17. }

onFirstContentfulPaint10+

onFirstContentfulPaint(callback: (event?: { navigationStartTick: number, firstContentfulPaintMs: number }) => void)

设置网页首次内容绘制回调函数。

参数：

参数名参数类型参数描述
navigationStartTicknumbernavigation开始的时间，单位以微秒表示。
firstContentfulPaintMsnumber从navigation开始第一次绘制内容的时间，单位是以毫秒表示。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3. @Entry
  4. @Component
  5. struct WebComponent {
  6.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  7.  
  8.   build() {
  9.     Column() {
  10.       Web({ src:'www.example.com', controller: this.controller })
  11.         .onFirstContentfulPaint(event => {
  12.           if (event) {
  13.             console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" +
  14.             event.navigationStartTick + ", [firstContentfulPaintMs]:" +
  15.             event.firstContentfulPaintMs)
  16.           }
  17.         })
  18.     }
  19.   }
  20. }

onLoadIntercept10+

onLoadIntercept(callback: (event: { data: WebResourceRequest }) => boolean)

当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。

参数：

参数名参数类型参数描述
dataWebResourceRequesturl请求的相关信息。

返回值：

类型说明
boolean返回true表示阻止此次加载，否则允许此次加载。

示例：

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3.  
  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController()
  8.  
  9.   build() {
  10.     Column() {
  11.       Web({ src: 'www.example.com', controller: this.controller })
  12.         .onLoadIntercept((event) => {
  13.           console.log('url:' + event.data.getRequestUrl())
  14.           console.log('isMainFrame:' + event.data.isMainFrame())
  15.           console.log('isRedirect:' + event.data.isRedirect())
  16.           console.log('isRequestGesture:' + event.data.isRequestGesture())
  17.           return true
  18.         })
  19.     }
  20.   }
  21. }

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/291866
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号