codecamp

web控制能力

@ohos.web.webview提供web控制能力,web组件提供具有网页显示能力。

说明
  • 本模块接口从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

  • 示例效果请以真机运行为准,当前IDE预览器不支持。

需要权限

访问在线网页时需添加网络权限:ohos.permission.INTERNET,具体申请方式请参考权限申请声明

导入模块

  1. import web_webview from '@ohos.web.webview';

once

once(type: string, callback: Callback<void>): void

订阅一次指定类型Web事件的回调。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

type

string

Web事件的类型,目前支持:"webInited"(Web初始化完成)。

callback

Callback<void>

所订阅的回调函数。

示例:

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

WebMessagePort

通过WebMessagePort可以进行消息的发送以及接收。

postMessageEvent

postMessageEvent(message: WebMessage): void

发送消息。完整示例代码参考postMessage

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

message

WebMessage

要发送的消息。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100010

Can not post message using this port.

示例:

  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. ports: web_webview.WebMessagePort[];
  8. build() {
  9. Column() {
  10. Button('postMessageEvent')
  11. .onClick(() => {
  12. try {
  13. this.ports = this.controller.createWebMessagePorts();
  14. this.controller.postMessage('__init_port__', [this.ports[0]], '*');
  15. this.ports[1].postMessageEvent("post message from ets to html5");
  16. } catch (error) {
  17. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  18. }
  19. })
  20. Web({ src: 'www.example.com', controller: this.controller })
  21. }
  22. }
  23. }

onMessageEvent

onMessageEvent(callback: (result: WebMessage) => void): void

注册回调函数,接收HTML5侧发送过来的消息。完整示例代码参考postMessage

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

result

WebMessage

接收到的消息。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100006

Can not register message event using this port.

示例:

  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. ports: web_webview.WebMessagePort[];
  8. build() {
  9. Column() {
  10. Button('onMessageEvent')
  11. .onClick(() => {
  12. try {
  13. this.ports = this.controller.createWebMessagePorts();
  14. this.ports[1].onMessageEvent((msg) => {
  15. if (typeof(msg) == "string") {
  16. console.log("received string message from html5, string is:" + msg);
  17. } else if (typeof(msg) == "object") {
  18. if (msg instanceof ArrayBuffer) {
  19. console.log("received arraybuffer from html5, length is:" + msg.byteLength);
  20. } else {
  21. console.log("not support");
  22. }
  23. } else {
  24. console.log("not support");
  25. }
  26. })
  27. } catch (error) {
  28. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  29. }
  30. })
  31. Web({ src: 'www.example.com', controller: this.controller })
  32. }
  33. }
  34. }

close

close(): void

关闭该消息端口。

系统能力: SystemCapability.Web.Webview.Core

示例:

  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. msgPort: web_webview.WebMessagePort[] = null;
  8. build() {
  9. Column() {
  10. Button('close')
  11. .onClick(() => {
  12. if (this.msgPort && this.msgPort.length == 2) {
  13. this.msgPort[1].close();
  14. } else {
  15. console.error("msgPort is null, Please initialize first");
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

WebviewController

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

initializeWebEngine

static initializeWebEngine(): void

在 Web 组件初始化之前,通过此接口加载 Web 引擎的动态库文件,以提高启动性能。

系统能力: SystemCapability.Web.Webview.Core

示例:

本示例以 MainAbility 为例,描述了在 Ability 创建阶段完成 Web 组件动态库加载的功能。

  1. // xxx.ts
  2. import UIAbility from '@ohos.app.ability.UIAbility';
  3. import web_webview from '@ohos.web.webview';
  4. export default class EntryAbility extends UIAbility {
  5. onCreate(want, launchParam) {
  6. console.log("EntryAbility onCreate")
  7. web_webview.WebviewController.initializeWebEngine()
  8. globalThis.abilityWant = want
  9. console.log("EntryAbility onCreate done")
  10. }
  11. }

setWebDebuggingAccess

static setWebDebuggingAccess(webDebuggingAccess: boolean): void

设置是否启用网页调试功能。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

webDebuggingAccess

boolean

设置是否启用网页调试功能。

  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. aboutToAppear():void {
  8. try {
  9. web_webview.WebviewController.setWebDebuggingAccess(true);
  10. } catch(error) {
  11. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  12. }
  13. }
  14. build() {
  15. Column() {
  16. Web({ src: 'www.example.com', controller: this.controller })
  17. }
  18. }
  19. }

loadUrl

loadUrl(url: string | Resource, headers?: Array<WebHeader>): void

加载指定的URL。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

url

string | Resource

需要加载的 URL。

headers

Array<WebHeader>

URL的附加HTTP请求头。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

17100002

Invalid url.

17100003

Invalid resource path or file type.

示例:

  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. Button('loadUrl')
  10. .onClick(() => {
  11. try {
  12. //需要加载的URL是string类型
  13. this.controller.loadUrl('www.example.com');
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }
  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. Button('loadUrl')
  10. .onClick(() => {
  11. try {
  12. //带参数headers
  13. this.controller.loadUrl('www.example.com', [{headerKey: "headerKey", headerValue: "headerValue"}]);
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

加载本地网页,加载本地资源文件有两种方式。

  1. $rawfile方式。
    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. Button('loadUrl')
    10. .onClick(() => {
    11. try {
    12. //需要加载的URL是Resource类型
    13. this.controller.loadUrl($rawfile('index.html'));
    14. } catch (error) {
    15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
    16. }
    17. })
    18. Web({ src: 'www.example.com', controller: this.controller })
    19. }
    20. }
    21. }

    加载的html文件。

    1. <!-- index.html -->
    2. <!DOCTYPE html>
    3. <html>
    4. <body>
    5. <p>Hello World</p>
    6. </body>
    7. </html>

    2.加载沙箱路径下的本地资源文件,可以参考web加载沙箱路径的示例代码。

loadData

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

加载指定的数据。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

data

string

按照”Base64“或者”URL"编码后的一段字符串。

mimeType

string

媒体类型(MIME)。

encoding

string

编码类型,具体为“Base64"或者”URL编码。

baseUrl

string

指定的一个URL路径(“http”/“https”/"data"协议),并由Web组件赋值给window.origin。

historyUrl

string

用作历史记录所使用的URL。非空时,历史记录以此URL进行管理。当baseUrl为空时,此属性无效。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

17100002

Invalid 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. Button('loadData')
  10. .onClick(() => {
  11. try {
  12. this.controller.loadData(
  13. "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
  14. "text/html",
  15. "UTF-8"
  16. );
  17. } catch (error) {
  18. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  19. }
  20. })
  21. Web({ src: 'www.example.com', controller: this.controller })
  22. }
  23. }
  24. }

加载本地资源

  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. updataContent: string = '<body><div><image src=file:///data/storage/el1/bundle/entry/resources/rawfile/xxx.png alt="image -- end" width="500" height="250"></image></div></body>'
  8. build() {
  9. Column() {
  10. Button('loadData')
  11. .onClick(() => {
  12. try {
  13. this.controller.loadData(this.updataContent, "text/html", "UTF-8", " ", " ");
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

accessForward

accessForward(): boolean

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

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

boolean

可以前进返回true,否则返回false。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('accessForward')
  10. .onClick(() => {
  11. try {
  12. let result = this.controller.accessForward();
  13. console.log('result:' + result);
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

forward

forward(): void

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

系统能力: SystemCapability.Web.Webview.Core

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('forward')
  10. .onClick(() => {
  11. try {
  12. this.controller.forward();
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

accessBackward

accessBackward(): boolean

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

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

boolean

可以后退返回true,否则返回false。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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. Button('accessBackward')
  10. .onClick(() => {
  11. try {
  12. let result = this.controller.accessBackward();
  13. console.log('result:' + result);
  14. } catch (error) {
  15. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

backward

backward(): void

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

系统能力: SystemCapability.Web.Webview.Core

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('backward')
  10. .onClick(() => {
  11. try {
  12. this.controller.backward();
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

onActive

onActive(): void

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

系统能力: SystemCapability.Web.Webview.Core

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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. Button('onActive')
  10. .onClick(() => {
  11. try {
  12. this.controller.onActive();
  13. } catch (error) {
  14. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

onInactive

onInactive(): void

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

系统能力: SystemCapability.Web.Webview.Core

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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. Button('onInactive')
  10. .onClick(() => {
  11. try {
  12. this.controller.onInactive();
  13. } catch (error) {
  14. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

refresh

refresh(): void

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

系统能力: SystemCapability.Web.Webview.Core

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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. Button('refresh')
  10. .onClick(() => {
  11. try {
  12. this.controller.refresh();
  13. } catch (error) {
  14. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

accessStep

accessStep(step: number): boolean

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

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

step

number

要跳转的步数,正数代表前进,负数代表后退。

返回值:

类型

说明

boolean

页面是否前进或后退

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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 steps: number = 2;
  8. build() {
  9. Column() {
  10. Button('accessStep')
  11. .onClick(() => {
  12. try {
  13. let result = this.controller.accessStep(this.steps);
  14. console.log('result:' + result);
  15. } catch (error) {
  16. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  17. }
  18. })
  19. Web({ src: 'www.example.com', controller: this.controller })
  20. }
  21. }
  22. }

clearHistory

clearHistory(): void

删除所有前进后退记录。

系统能力: SystemCapability.Web.Webview.Core

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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. Button('clearHistory')
  10. .onClick(() => {
  11. try {
  12. this.controller.clearHistory();
  13. } catch (error) {
  14. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

getHitTest

getHitTest(): WebHitTestType

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

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

WebHitTestType

被点击区域的元素类型。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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. Button('getHitTest')
  10. .onClick(() => {
  11. try {
  12. let hitTestType = this.controller.getHitTest();
  13. console.log("hitTestType: " + hitTestType);
  14. } catch (error) {
  15. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

registerJavaScriptProxy

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

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

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

object

object

参与注册的应用侧JavaScript对象。只能声明方法,不能声明属性 。其中方法的参数和返回类型只能为string,number,boolean

name

string

注册对象的名称,与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。

methodList

Array<string>

参与注册的应用侧JavaScript对象的方法。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'
  3. @Entry
  4. @Component
  5. struct Index {
  6. controller: web_webview.WebviewController = new web_webview.WebviewController();
  7. testObj = {
  8. test: (data) => {
  9. return "ArkUI Web Component";
  10. },
  11. toString: () => {
  12. console.log('Web Component toString');
  13. }
  14. }
  15. build() {
  16. Column() {
  17. Button('refresh')
  18. .onClick(() => {
  19. try {
  20. this.controller.refresh();
  21. } catch (error) {
  22. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  23. }
  24. })
  25. Button('Register JavaScript To Window')
  26. .onClick(() => {
  27. try {
  28. this.controller.registerJavaScriptProxy(this.testObj, "objName", ["test", "toString"]);
  29. } catch (error) {
  30. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  31. }
  32. })
  33. Web({ src: $rawfile('index.html'), controller: this.controller })
  34. .javaScriptAccess(true)
  35. }
  36. }
  37. }

加载的html文件。

  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <meta charset="utf-8">
  5. <body>
  6. <button type="button" onclick="htmlTest()">Click Me!</button>
  7. <p id="demo"></p>
  8. </body>
  9. <script type="text/javascript">
  10. function htmlTest() {
  11. let str=objName.test();
  12. document.getElementById("demo").innerHTML=str;
  13. console.log('objName.test result:'+ str)
  14. }
  15. </script>
  16. </html>

runJavaScript

runJavaScript(script: string, callback : AsyncCallback<string>): void

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

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

script

string

JavaScript脚本。

callback

AsyncCallback<string>

回调执行JavaScript脚本结果。JavaScript脚本若执行失败或无返回值时,返回null。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  1. import web_webview from '@ohos.web.webview'
  2. @Entry
  3. @Component
  4. struct WebComponent {
  5. controller: web_webview.WebviewController = new web_webview.WebviewController();
  6. @State webResult: string = ''
  7. build() {
  8. Column() {
  9. Text(this.webResult).fontSize(20)
  10. Web({ src: $rawfile('index.html'), controller: this.controller })
  11. .javaScriptAccess(true)
  12. .onPageEnd(e => {
  13. try {
  14. this.controller.runJavaScript(
  15. 'test()',
  16. (error, result) => {
  17. if (error) {
  18. console.info(`run JavaScript error: ` + JSON.stringify(error))
  19. return;
  20. }
  21. if (result) {
  22. this.webResult = result
  23. console.info(`The test() return value is: ${result}`)
  24. }
  25. });
  26. console.info('url: ', e.url);
  27. } catch (error) {
  28. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  29. }
  30. })
  31. }
  32. }
  33. }

加载的html文件。

  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <meta charset="utf-8">
  5. <body>
  6. Hello world!
  7. </body>
  8. <script type="text/javascript">
  9. function test() {
  10. console.log('Ark WebComponent')
  11. return "This value is from index.html"
  12. }
  13. </script>
  14. </html>

runJavaScript

runJavaScript(script: string): Promise<string>

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

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

script

string

JavaScript脚本。

返回值:

类型

说明

Promise<string>

Promise实例,返回脚本执行的结果,执行失败返回null。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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: $rawfile('index.html'), controller: this.controller })
  10. .javaScriptAccess(true)
  11. .onPageEnd(e => {
  12. try {
  13. this.controller.runJavaScript('test()')
  14. .then(function (result) {
  15. console.log('result: ' + result);
  16. })
  17. .catch(function (error) {
  18. console.error("error: " + error);
  19. })
  20. console.info('url: ', e.url);
  21. } catch (error) {
  22. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  23. }
  24. })
  25. }
  26. }
  27. }

加载的html文件。

  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <meta charset="utf-8">
  5. <body>
  6. Hello world!
  7. </body>
  8. <script type="text/javascript">
  9. function test() {
  10. console.log('Ark WebComponent')
  11. return "This value is from index.html"
  12. }
  13. </script>
  14. </html>

deleteJavaScriptRegister

deleteJavaScriptRegister(name: string): void

删除通过registerJavaScriptProxy注册到window上的指定name的应用侧JavaScript对象。删除后立即生效,无须调用refresh接口。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

name

string

注册对象的名称,可在网页侧JavaScript中通过此名称调用应用侧JavaScript对象。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

17100008

Cannot delete JavaScriptProxy.

示例:

  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 name: string = 'Object';
  8. build() {
  9. Column() {
  10. Button('deleteJavaScriptRegister')
  11. .onClick(() => {
  12. try {
  13. this.controller.deleteJavaScriptRegister(this.name);
  14. } catch (error) {
  15. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

zoom

zoom(factor: number): void

调整当前网页的缩放比例,zoomAccess需为true。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

factor

number

基于当前网页所需调整的相对缩放比例,正值为放大,负值为缩小。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

17100004

Function not enable.

示例:

  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 factor: number = 1;
  8. build() {
  9. Column() {
  10. Button('zoom')
  11. .onClick(() => {
  12. try {
  13. this.controller.zoom(this.factor);
  14. } catch (error) {
  15. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. .zoomAccess(true)
  20. }
  21. }
  22. }

searchAllAsync

searchAllAsync(searchString: string): void

异步查找网页中所有匹配关键字'searchString'的内容并高亮,结果通过onSearchResultReceive异步返回。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

searchString

string

查找的关键字。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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 searchString: string = "xxx";
  8. build() {
  9. Column() {
  10. Button('searchString')
  11. .onClick(() => {
  12. try {
  13. this.controller.searchAllAsync(this.searchString);
  14. } catch (error) {
  15. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. .onSearchResultReceive(ret => {
  20. console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
  21. "[total]" + ret.numberOfMatches + "[isDone]" + ret.isDoneCounting);
  22. })
  23. }
  24. }
  25. }

clearMatches

clearMatches(): void

清除所有通过searchAllAsync匹配到的高亮字符查找结果。

系统能力: SystemCapability.Web.Webview.Core

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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. Button('clearMatches')
  10. .onClick(() => {
  11. try {
  12. this.controller.clearMatches();
  13. } catch (error) {
  14. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

searchNext

searchNext(forward: boolean): void

滚动到下一个匹配的查找结果并高亮。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

forward

boolean

从前向后或者逆向查找。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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. Button('searchNext')
  10. .onClick(() => {
  11. try {
  12. this.controller.searchNext(true);
  13. } catch (error) {
  14. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

clearSslCache

clearSslCache(): void

清除Web组件记录的SSL证书错误事件对应的用户操作行为。

系统能力: SystemCapability.Web.Webview.Core

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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. Button('clearSslCache')
  10. .onClick(() => {
  11. try {
  12. this.controller.clearSslCache();
  13. } catch (error) {
  14. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

clearClientAuthenticationCache

clearClientAuthenticationCache(): void

清除Web组件记录的客户端证书请求事件对应的用户操作行为。

系统能力: SystemCapability.Web.Webview.Core

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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. Button('clearClientAuthenticationCache')
  10. .onClick(() => {
  11. try {
  12. this.controller.clearClientAuthenticationCache();
  13. } catch (error) {
  14. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

createWebMessagePorts

createWebMessagePorts(): Array<WebMessagePort>

创建Web消息端口。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

Array<WebMessagePort>

web消息端口列表。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. ports: web_webview.WebMessagePort[];
  8. build() {
  9. Column() {
  10. Button('createWebMessagePorts')
  11. .onClick(() => {
  12. try {
  13. this.ports = this.controller.createWebMessagePorts();
  14. console.log("createWebMessagePorts size:" + this.ports.length)
  15. } catch (error) {
  16. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  17. }
  18. })
  19. Web({ src: 'www.example.com', controller: this.controller })
  20. }
  21. }
  22. }

postMessage

postMessage(name: string, ports: Array<WebMessagePort>, uri: string): void

发送Web消息端口到HTML。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

name

string

要发送的消息名称。

ports

Array<WebMessagePort>

要发送的消息端口。

uri

string

接收该消息的URI。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. ports: web_webview.WebMessagePort[];
  8. @State sendFromEts: string = 'Send this message from ets to HTML';
  9. @State receivedFromHtml: string = 'Display received message send from HTML';
  10. build() {
  11. Column() {
  12. // 展示接收到的来自HTML的内容
  13. Text(this.receivedFromHtml)
  14. // 输入框的内容发送到html
  15. TextInput({placeholder: 'Send this message from ets to HTML'})
  16. .onChange((value: string) => {
  17. this.sendFromEts = value;
  18. })
  19. Button('postMessage')
  20. .onClick(() => {
  21. try {
  22. // 1、创建两个消息端口。
  23. this.ports = this.controller.createWebMessagePorts();
  24. // 2、在应用侧的消息端口(如端口1)上注册回调事件。
  25. this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
  26. let msg = 'Got msg from HTML:';
  27. if (typeof(result) == "string") {
  28. console.log("received string message from html5, string is:" + result);
  29. msg = msg + result;
  30. } else if (typeof(result) == "object") {
  31. if (result instanceof ArrayBuffer) {
  32. console.log("received arraybuffer from html5, length is:" + result.byteLength);
  33. msg = msg + "lenght is " + result.byteLength;
  34. } else {
  35. console.log("not support");
  36. }
  37. } else {
  38. console.log("not support");
  39. }
  40. this.receivedFromHtml = msg;
  41. })
  42. // 3、将另一个消息端口(如端口0)发送到HTML侧,由HTML侧保存并使用。
  43. this.controller.postMessage('__init_port__', [this.ports[0]], '*');
  44. } catch (error) {
  45. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  46. }
  47. })
  48. // 4、使用应用侧的端口给另一个已经发送到html的端口发送消息。
  49. Button('SendDataToHTML')
  50. .onClick(() => {
  51. try {
  52. if (this.ports && this.ports[1]) {
  53. this.ports[1].postMessageEvent(this.sendFromEts);
  54. } else {
  55. console.error(`ports is null, Please initialize first`);
  56. }
  57. } catch (error) {
  58. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  59. }
  60. })
  61. Web({ src: $rawfile('index.html'), controller: this.controller })
  62. }
  63. }
  64. }
  1. <!--index.html-->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>WebView Message Port Demo</title>
  7. </head>
  8. <body>
  9. <h1>WebView Message Port Demo</h1>
  10. <div>
  11. <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
  12. <input id="msgFromJS" type="text" value="send this message from HTML to ets"/><br/>
  13. </div>
  14. <p class="output">display received message send from ets</p>
  15. </body>
  16. <script src="xxx.js"></script>
  17. </html>
  1. //xxx.js
  2. var h5Port;
  3. var output = document.querySelector('.output');
  4. window.addEventListener('message', function (event) {
  5. if (event.data == '__init_port__') {
  6. if (event.ports[0] != null) {
  7. h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
  8. h5Port.onmessage = function (event) {
  9. // 2. 接收ets侧发送过来的消息.
  10. var msg = 'Got message from ets:';
  11. var result = event.data;
  12. if (typeof(result) == "string") {
  13. console.log("received string message from html5, string is:" + result);
  14. msg = msg + result;
  15. } else if (typeof(result) == "object") {
  16. if (result instanceof ArrayBuffer) {
  17. console.log("received arraybuffer from html5, length is:" + result.byteLength);
  18. msg = msg + "lenght is " + result.byteLength;
  19. } else {
  20. console.log("not support");
  21. }
  22. } else {
  23. console.log("not support");
  24. }
  25. output.innerHTML = msg;
  26. }
  27. }
  28. }
  29. })
  30. // 3. 使用h5Port往ets侧发送消息.
  31. function PostMsgToEts(data) {
  32. if (h5Port) {
  33. h5Port.postMessage(data);
  34. } else {
  35. console.error("h5Port is null, Please initialize first");
  36. }
  37. }

requestFocus

requestFocus(): void

使当前web页面获取焦点。

系统能力: SystemCapability.Web.Webview.Core

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('requestFocus')
  10. .onClick(() => {
  11. try {
  12. this.controller.requestFocus();
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. });
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

zoomIn

zoomIn(): void

调用此接口将当前网页进行放大,比例为20%。

系统能力: SystemCapability.Web.Webview.Core

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

17100004

Function not enable.

示例:

  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. Button('zoomIn')
  10. .onClick(() => {
  11. try {
  12. this.controller.zoomIn();
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

zoomOut

zoomOut(): void

调用此接口将当前网页进行缩小,比例为20%。

系统能力: SystemCapability.Web.Webview.Core

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

17100004

Function not enable.

示例:

  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. Button('zoomOut')
  10. .onClick(() => {
  11. try {
  12. this.controller.zoomOut();
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

getHitTestValue

getHitTestValue(): HitTestValue

获取当前被点击区域的元素信息。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

HitTestValue

点击区域的元素信息。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('getHitTestValue')
  10. .onClick(() => {
  11. try {
  12. let hitValue = this.controller.getHitTestValue();
  13. console.log("hitType: " + hitValue.type);
  14. console.log("extra: " + hitValue.extra);
  15. } catch (error) {
  16. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  17. }
  18. })
  19. Web({ src: 'www.example.com', controller: this.controller })
  20. }
  21. }
  22. }

getWebId

getWebId(): number

获取当前Web组件的索引值,用于多个Web组件的管理。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

number

当前Web组件的索引值。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('getWebId')
  10. .onClick(() => {
  11. try {
  12. let id = this.controller.getWebId();
  13. console.log("id: " + id);
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

getUserAgent

getUserAgent(): string

获取当前默认用户代理。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

string

默认用户代理。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('getUserAgent')
  10. .onClick(() => {
  11. try {
  12. let userAgent = this.controller.getUserAgent();
  13. console.log("userAgent: " + userAgent);
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

getTitle

getTitle(): string

获取当前网页的标题。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

string

当前网页的标题。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('getTitle')
  10. .onClick(() => {
  11. try {
  12. let title = this.controller.getTitle();
  13. console.log("title: " + title);
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

getPageHeight

getPageHeight(): number

获取当前网页的页面高度。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

number

当前网页的页面高度。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('getPageHeight')
  10. .onClick(() => {
  11. try {
  12. let pageHeight = this.controller.getPageHeight();
  13. console.log("pageHeight : " + pageHeight);
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

storeWebArchive

storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback<string>): void

以回调方式异步保存当前页面。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

baseName

string

生成的离线网页存储位置,该值不能为空。

autoName

boolean

决定是否自动生成文件名。如果为false,则按baseName的文件名存储;如果为true,则根据当前Url自动生成文件名,并按baseName的文件目录存储。

callback

AsyncCallback<string>

返回文件存储路径,保存网页失败会返回null。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

17100003

Invalid resource path or file type.

示例:

  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. Button('storeWebArchive')
  10. .onClick(() => {
  11. try {
  12. this.controller.storeWebArchive("/data/storage/el2/base/", true, (error, filename) => {
  13. if (error) {
  14. console.info(`save web archive error: ` + JSON.stringify(error))
  15. return;
  16. }
  17. if (filename != null) {
  18. console.info(`save web archive success: ${filename}`)
  19. }
  20. });
  21. } catch (error) {
  22. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  23. }
  24. })
  25. Web({ src: 'www.example.com', controller: this.controller })
  26. }
  27. }
  28. }

storeWebArchive

storeWebArchive(baseName: string, autoName: boolean): Promise<string>

以Promise方式异步保存当前页面。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

baseName

string

生成的离线网页存储位置,该值不能为空。

autoName

boolean

决定是否自动生成文件名。如果为false,则按baseName的文件名存储;如果为true,则根据当前Url自动生成文件名,并按baseName的文件目录存储。

返回值:

类型

说明

Promise<string>

Promise实例,保存成功返回文件路径,保存失败返回null。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

17100003

Invalid resource path or file type.

示例:

  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. Button('storeWebArchive')
  10. .onClick(() => {
  11. try {
  12. this.controller.storeWebArchive("/data/storage/el2/base/", true)
  13. .then(filename => {
  14. if (filename != null) {
  15. console.info(`save web archive success: ${filename}`)
  16. }
  17. })
  18. .catch(error => {
  19. console.log('error: ' + JSON.stringify(error));
  20. })
  21. } catch (error) {
  22. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  23. }
  24. })
  25. Web({ src: 'www.example.com', controller: this.controller })
  26. }
  27. }
  28. }

getUrl

getUrl(): string

获取当前页面的url地址。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

string

当前页面的url地址。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('getUrl')
  10. .onClick(() => {
  11. try {
  12. let url = this.controller.getUrl();
  13. console.log("url: " + url);
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

stop

stop(): void

停止页面加载。

系统能力: SystemCapability.Web.Webview.Core

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('stop')
  10. .onClick(() => {
  11. try {
  12. this.controller.stop();
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. });
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

backOrForward

backOrForward(step: number): void

按照历史栈,前进或者后退指定步长的页面,当历史栈中不存在对应步长的页面时,不会进行页面跳转。

前进或者后退页面时,直接使用已加载过的网页,无需重新加载网页。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

step

number

需要前进或后退的步长。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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 step: number = -2;
  8. build() {
  9. Column() {
  10. Button('backOrForward')
  11. .onClick(() => {
  12. try {
  13. this.controller.backOrForward(this.step);
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

scrollTo

scrollTo(x:number, y:number): void

将页面滚动到指定的绝对位置。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

x

number

绝对位置的水平坐标,当传入数值为负数时,按照传入0处理。

y

number

绝对位置的垂直坐标,当传入数值为负数时,按照传入0处理。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('scrollTo')
  10. .onClick(() => {
  11. try {
  12. this.controller.scrollTo(50, 50);
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }
  1. <!--xxx.html-->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Demo</title>
  6. <style>
  7. body {
  8. width:3000px;
  9. height:3000px;
  10. padding-right:170px;
  11. padding-left:170px;
  12. border:5px solid blueviolet
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. Scroll Test
  18. </body>
  19. </html>

scrollBy

scrollBy(deltaX:number, deltaY:number): void

将页面滚动指定的偏移量。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

deltaX

number

水平偏移量,其中水平向右为正方向。

deltaY

number

垂直偏移量,其中垂直向下为正方向。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('scrollBy')
  10. .onClick(() => {
  11. try {
  12. this.controller.scrollBy(50, 50);
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }
  1. <!--xxx.html-->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Demo</title>
  6. <style>
  7. body {
  8. width:3000px;
  9. height:3000px;
  10. padding-right:170px;
  11. padding-left:170px;
  12. border:5px solid blueviolet
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. Scroll Test
  18. </body>
  19. </html>

slideScroll

slideScroll(vx:number, vy:number): void

按照指定速度模拟对页面的轻扫滚动动作。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

vx

number

轻扫滚动的水平速度分量,其中水平向右为速度正方向。

vy

number

轻扫滚动的垂直速度分量,其中垂直向下为速度正方向。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('slideScroll')
  10. .onClick(() => {
  11. try {
  12. this.controller.slideScroll(500, 500);
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }
  1. <!--xxx.html-->
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Demo</title>
  6. <style>
  7. body {
  8. width:3000px;
  9. height:3000px;
  10. padding-right:170px;
  11. padding-left:170px;
  12. border:5px solid blueviolet
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. Scroll Test
  18. </body>
  19. </html>

getOriginalUrl

getOriginalUrl(): string

获取当前页面的原始url地址。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

string

当前页面的原始url地址。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('getOrgUrl')
  10. .onClick(() => {
  11. try {
  12. let url = this.controller.getOriginalUrl();
  13. console.log("original url: " + url);
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

getFavicon

getFavicon(): image.PixelMap

获取页面的favicon图标。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

PixelMap

页面favicon图标的PixelMap对象。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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 pixelmap: image.PixelMap = undefined;
  9. build() {
  10. Column() {
  11. Button('getFavicon')
  12. .onClick(() => {
  13. try {
  14. this.pixelmap = this.controller.getFavicon();
  15. } catch (error) {
  16. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  17. }
  18. })
  19. Web({ src: 'www.example.com', controller: this.controller })
  20. }
  21. }
  22. }

setNetworkAvailable

setNetworkAvailable(enable: boolean): void

设置JavaScript中的window.navigator.onLine属性。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

enable

boolean

是否使能window.navigator.onLine。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('setNetworkAvailable')
  10. .onClick(() => {
  11. try {
  12. this.controller.setNetworkAvailable(true);
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: $rawfile('index.html'), controller: this.controller })
  18. }
  19. }
  20. }

加载的html文件。

  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5. <h1>online 属性</h1>
  6. <p id="demo"></p>
  7. <button onclick="func()">click</button>
  8. <script>
  9. let online = navigator.onLine;
  10. document.getElementById("demo").innerHTML = "浏览器在线:" + online;
  11. function func(){
  12. var online = navigator.onLine;
  13. document.getElementById("demo").innerHTML = "浏览器在线:" + online;
  14. }
  15. </script>
  16. </body>
  17. </html>

hasImage

hasImage(callback: AsyncCallback<boolean>): void

通过Callback方式异步查找当前页面是否存在图像。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

callback

AsyncCallback<boolean>

返回查找页面是否存在图像。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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. Button('hasImageCb')
  10. .onClick(() => {
  11. try {
  12. this.controller.hasImage((error, data) => {
  13. if (error) {
  14. console.info(`hasImage error: ` + JSON.stringify(error))
  15. return;
  16. }
  17. console.info("hasImage: " + data);
  18. });
  19. } catch (error) {
  20. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  21. }
  22. })
  23. Web({ src: 'www.example.com', controller: this.controller })
  24. }
  25. }
  26. }

hasImage

hasImage(): Promise<boolean>

通过Promise方式异步查找当前页面是否存在图像。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

Promise<boolean>

Promise实例,返回查找页面是否存在图像。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web compoent.

示例:

  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. Button('hasImagePm')
  10. .onClick(() => {
  11. try {
  12. this.controller.hasImage().then((data) => {
  13. console.info('hasImage: ' + data);
  14. })
  15. .catch(function (error) {
  16. console.error("error: " + error);
  17. })
  18. } catch (error) {
  19. console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
  20. }
  21. })
  22. Web({ src: 'www.example.com', controller: this.controller })
  23. }
  24. }
  25. }

removeCache

removeCache(clearRom: boolean): void

清除应用中的资源缓存文件,此方法将会清除同一应用中所有webview的缓存文件。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

clearRom

boolean

设置为true时同时清除rom和ram中的缓存,设置为false时只清除ram中的缓存。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('removeCache')
  10. .onClick(() => {
  11. try {
  12. this.controller.removeCache(false);
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

pageUp

pageUp(top:boolean): void

将Webview的内容向上滚动半个视框大小或者跳转到页面最顶部,通过top入参控制。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

top

boolean

是否跳转到页面最顶部,设置为false时将页面内容向上滚动半个视框大小,设置为true时跳转到页面最顶部。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('pageUp')
  10. .onClick(() => {
  11. try {
  12. this.controller.pageUp(false);
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

pageDown

pageDown(bottom:boolean): void

将Webview的内容向下滚动半个视框大小或者跳转到页面最底部,通过bottom入参控制。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

bottom

boolean

是否跳转到页面最底部,设置为false时将页面内容向下滚动半个视框大小,设置为true时跳转到页面最底部。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('pageDown')
  10. .onClick(() => {
  11. try {
  12. this.controller.pageDown(false);
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

getBackForwardEntries

getBackForwardEntries(): BackForwardList

获取当前Webview的历史信息列表。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

BackForwardList

当前Webview的历史信息列表。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  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. Button('getBackForwardEntries')
  10. .onClick(() => {
  11. try {
  12. let list = this.controller.getBackForwardEntries()
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

serializeWebState

serializeWebState(): Uint8Array

将当前Webview的页面状态历史记录信息序列化。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

Uint8Array

当前Webview的页面状态历史记录序列化后的数据。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  1. 对文件的操作需要导入文件管理模块,详情请参考文件管理
    1. // xxx.ets
    2. import web_webview from '@ohos.web.webview';
    3. import fs from '@ohos.file.fs';
    4. @Entry
    5. @Component
    6. struct WebComponent {
    7. controller: web_webview.WebviewController = new web_webview.WebviewController();
    8. build() {
    9. Column() {
    10. Button('serializeWebState')
    11. .onClick(() => {
    12. try {
    13. let state = this.controller.serializeWebState();
    14. // globalThis.cacheDir从MainAbility.ts中获取。
    15. let path = globalThis.cacheDir;
    16. path += '/WebState';
    17. // 以同步方法打开文件。
    18. let file = fs.openSync(path, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
    19. fs.writeSync(file.fd, state.buffer);
    20. fs.closeSync(file.fd);
    21. } catch (error) {
    22. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
    23. }
    24. })
    25. Web({ src: 'www.example.com', controller: this.controller })
    26. }
    27. }
    28. }
  2. 修改MainAbility.ts。 获取应用缓存文件路径。
    1. // xxx.ts
    2. import UIAbility from '@ohos.app.ability.UIAbility';
    3. import web_webview from '@ohos.web.webview';
    4. export default class MainAbility extends UIAbility {
    5. onCreate(want, launchParam) {
    6. // 通过在globalThis对象上绑定cacheDir,可以实现UIAbility组件与Page之间的数据同步。
    7. globalThis.cacheDir = this.context.cacheDir;
    8. }
    9. }

restoreWebState

restoreWebState(state: Uint8Array): void

当前Webview从序列化数据中恢复页面状态历史记录。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

state

Uint8Array

页面状态历史记录序列化数据。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100001

Init error. The WebviewController must be associated with a Web component.

示例:

  1. 对文件的操作需要导入文件管理模块,详情请参考文件管理
    1. // xxx.ets
    2. import web_webview from '@ohos.web.webview';
    3. import fs from '@ohos.file.fs';
    4. @Entry
    5. @Component
    6. struct WebComponent {
    7. controller: web_webview.WebviewController = new web_webview.WebviewController();
    8. build() {
    9. Column() {
    10. Button('RestoreWebState')
    11. .onClick(() => {
    12. try {
    13. // globalThis.cacheDir从MainAbility.ts中获取。
    14. let path = globalThis.cacheDir;
    15. path += '/WebState';
    16. // 以同步方法打开文件。
    17. let file = fs.openSync(path, fs.OpenMode.READ_WRITE);
    18. let stat = fs.statSync(path);
    19. let size = stat.size;
    20. let buf = new ArrayBuffer(size);
    21. fs.read(file.fd, buf, (err, readLen) => {
    22. if (err) {
    23. console.info("mkdir failed with error message: " + err.message + ", error code: " + err.code);
    24. } else {
    25. console.info("read file data succeed");
    26. this.controller.restoreWebState(new Uint8Array(buf.slice(0, readLen)));
    27. fs.closeSync(file);
    28. }
    29. });
    30. } catch (error) {
    31. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
    32. }
    33. })
    34. Web({ src: 'www.example.com', controller: this.controller })
    35. }
    36. }
    37. }
  2. 修改MainAbility.ts。 获取应用缓存文件路径。
    1. // xxx.ts
    2. import UIAbility from '@ohos.app.ability.UIAbility';
    3. import web_webview from '@ohos.web.webview';
    4. export default class MainAbility extends UIAbility {
    5. onCreate(want, launchParam) {
    6. // 通过在globalThis对象上绑定cacheDir,可以实现UIAbility组件与Page之间的数据同步。
    7. globalThis.cacheDir = this.context.cacheDir;
    8. }
    9. }

customizeSchemes

static customizeSchemes(schemes: Array<WebCustomScheme>): void

配置Web自定义协议请求的权限。建议在任何Web组件初始化之前进行调用。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

schemes

Array<WebCustomScheme>

自定义协议配置,最多支持同时配置10个自定义协议。

示例:

  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. responseweb: WebResourceResponse = new WebResourceResponse()
  8. scheme1: web_webview.WebCustomScheme = {schemeName: "name1", isSupportCORS: true, isSupportFetch: true}
  9. scheme2: web_webview.WebCustomScheme = {schemeName: "name2", isSupportCORS: true, isSupportFetch: true}
  10. scheme3: web_webview.WebCustomScheme = {schemeName: "name3", isSupportCORS: true, isSupportFetch: true}
  11. aboutToAppear():void {
  12. try {
  13. web_webview.WebviewController.customizeSchemes([this.scheme1, this.scheme2, this.scheme3])
  14. } catch(error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. }
  18. build() {
  19. Column() {
  20. Web({ src: 'www.example.com', controller: this.controller })
  21. .onInterceptRequest((event) => {
  22. console.log('url:' + event.request.getRequestUrl())
  23. return this.responseweb
  24. })
  25. }
  26. }
  27. }

WebCookieManager

通过WebCookie可以控制Web组件中的cookie的各种行为,其中每个应用中的所有web组件共享一个WebCookieManager实例。

说明

目前调用WebCookieManager下的方法,都需要先加载Web组件。

getCookie

static getCookie(url: string): string

获取指定url对应cookie的值。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

url

string

要获取的cookie所属的url,建议使用完整的url。

返回值:

类型

说明

string

指定url对应的cookie的值。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100002

Invalid 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. Button('getCookie')
  10. .onClick(() => {
  11. try {
  12. let value = web_webview.WebCookieManager.getCookie('https://www.example.com');
  13. console.log("value: " + value);
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

setCookie

static setCookie(url: string, value: string): void

为指定url设置单个cookie的值。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

url

string

要设置的cookie所属的url,建议使用完整的url。

value

string

要设置的cookie的值。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100002

Invalid url.

17100005

Invalid cookie value.

示例:

  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. Button('setCookie')
  10. .onClick(() => {
  11. try {
  12. web_webview.WebCookieManager.setCookie('https://www.example.com', 'a=b');
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

saveCookieAsync

static saveCookieAsync(callback: AsyncCallback<void>): void

将当前存在内存中的cookie异步保存到磁盘中。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

callback

AsyncCallback<void>

callback回调,用于获取cookie是否成功保存。

示例:

  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. Button('saveCookieAsync')
  10. .onClick(() => {
  11. try {
  12. web_webview.WebCookieManager.saveCookieAsync((error) => {
  13. if (error) {
  14. console.log("error: " + error);
  15. }
  16. })
  17. } catch (error) {
  18. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  19. }
  20. })
  21. Web({ src: 'www.example.com', controller: this.controller })
  22. }
  23. }
  24. }

saveCookieAsync

static saveCookieAsync(): Promise<void>

将当前存在内存中的cookie以Promise方法异步保存到磁盘中。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

Promise<void>

Promise实例,用于获取cookie是否成功保存。

示例:

  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. Button('saveCookieAsync')
  10. .onClick(() => {
  11. try {
  12. web_webview.WebCookieManager.saveCookieAsync()
  13. .then(() => {
  14. console.log("saveCookieAsyncCallback success!");
  15. })
  16. .catch((error) => {
  17. console.error("error: " + error);
  18. });
  19. } catch (error) {
  20. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  21. }
  22. })
  23. Web({ src: 'www.example.com', controller: this.controller })
  24. }
  25. }
  26. }

putAcceptCookieEnabled

static putAcceptCookieEnabled(accept: boolean): void

设置WebCookieManager实例是否拥有发送和接收cookie的权限。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

accept

boolean

设置是否拥有发送和接收cookie的权限。

示例:

  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. Button('putAcceptCookieEnabled')
  10. .onClick(() => {
  11. try {
  12. web_webview.WebCookieManager.putAcceptCookieEnabled(false);
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

isCookieAllowed

static isCookieAllowed(): boolean

获取WebCookieManager实例是否拥有发送和接收cookie的权限。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

boolean

是否拥有发送和接收cookie的权限,默认为true。

示例:

  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. Button('isCookieAllowed')
  10. .onClick(() => {
  11. let result = web_webview.WebCookieManager.isCookieAllowed();
  12. console.log("result: " + result);
  13. })
  14. Web({ src: 'www.example.com', controller: this.controller })
  15. }
  16. }
  17. }

putAcceptThirdPartyCookieEnabled

static putAcceptThirdPartyCookieEnabled(accept: boolean): void

设置WebCookieManager实例是否拥有发送和接收第三方cookie的权限。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

accept

boolean

设置是否拥有发送和接收第三方cookie的权限。

示例:

  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. Button('putAcceptThirdPartyCookieEnabled')
  10. .onClick(() => {
  11. try {
  12. web_webview.WebCookieManager.putAcceptThirdPartyCookieEnabled(false);
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

isThirdPartyCookieAllowed

static isThirdPartyCookieAllowed(): boolean

获取WebCookieManager实例是否拥有发送和接收第三方cookie的权限。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

boolean

是否拥有发送和接收第三方cookie的权限,默认为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. build() {
  8. Column() {
  9. Button('isThirdPartyCookieAllowed')
  10. .onClick(() => {
  11. let result = web_webview.WebCookieManager.isThirdPartyCookieAllowed();
  12. console.log("result: " + result);
  13. })
  14. Web({ src: 'www.example.com', controller: this.controller })
  15. }
  16. }
  17. }

existCookie

static existCookie(): boolean

获取是否存在cookie。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

boolean

是否拥有发送和接收第三方cookie的权限。

示例:

  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. Button('existCookie')
  10. .onClick(() => {
  11. let result = web_webview.WebCookieManager.existCookie();
  12. console.log("result: " + result);
  13. })
  14. Web({ src: 'www.example.com', controller: this.controller })
  15. }
  16. }
  17. }

deleteEntireCookie

static deleteEntireCookie(): void

清除所有cookie。

系统能力: SystemCapability.Web.Webview.Core

示例:

  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. Button('deleteEntireCookie')
  10. .onClick(() => {
  11. web_webview.WebCookieManager.deleteEntireCookie();
  12. })
  13. Web({ src: 'www.example.com', controller: this.controller })
  14. }
  15. }
  16. }

deleteSessionCookie

static deleteSessionCookie(): void

清除所有会话cookie。

系统能力: SystemCapability.Web.Webview.Core

示例:

  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. Button('deleteSessionCookie')
  10. .onClick(() => {
  11. web_webview.WebCookieManager.deleteSessionCookie();
  12. })
  13. Web({ src: 'www.example.com', controller: this.controller })
  14. }
  15. }
  16. }

WebStorage

通过WebStorage可管理Web SQL数据库接口和HTML5 Web存储接口,每个应用中的所有Web组件共享一个WebStorage。

说明

目前调用WebStorage下的方法,都需要先加载Web组件。

deleteOrigin

static deleteOrigin(origin : string): void

清除指定源所使用的存储。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

origin

string

指定源的字符串索引,来自于getOrigins

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100011

Invalid origin.

示例:

  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. origin: string = "file:///";
  8. build() {
  9. Column() {
  10. Button('deleteOrigin')
  11. .onClick(() => {
  12. try {
  13. web_webview.WebStorage.deleteOrigin(this.origin);
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. .databaseAccess(true)
  20. }
  21. }
  22. }

getOrigins

static getOrigins(callback: AsyncCallback<Array<WebStorageOrigin>>) : void

以回调方式异步获取当前使用Web SQL数据库的所有源的信息。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

callback

AsyncCallback<Array<WebStorageOrigin>>

以数组方式返回源的信息,信息内容参考WebStorageOrigin

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100012

Invalid web storage origin.

示例:

  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. Button('getOrigins')
  10. .onClick(() => {
  11. try {
  12. web_webview.WebStorage.getOrigins((error, origins) => {
  13. if (error) {
  14. console.log('error: ' + JSON.stringify(error));
  15. return;
  16. }
  17. for (let i = 0; i < origins.length; i++) {
  18. console.log('origin: ' + origins[i].origin);
  19. console.log('usage: ' + origins[i].usage);
  20. console.log('quota: ' + origins[i].quota);
  21. }
  22. })
  23. } catch (error) {
  24. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  25. }
  26. })
  27. Web({ src: 'www.example.com', controller: this.controller })
  28. .databaseAccess(true)
  29. }
  30. }
  31. }

getOrigins

static getOrigins() : Promise<Array<WebStorageOrigin>>

以Promise方式异步获取当前使用Web SQL数据库的所有源的信息。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

Promise<Array<WebStorageOrigin>>

Promise实例,用于获取当前所有源的信息,信息内容参考WebStorageOrigin

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100012

Invalid web storage origin.

示例:

  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. Button('getOrigins')
  10. .onClick(() => {
  11. try {
  12. web_webview.WebStorage.getOrigins()
  13. .then(origins => {
  14. for (let i = 0; i < origins.length; i++) {
  15. console.log('origin: ' + origins[i].origin);
  16. console.log('usage: ' + origins[i].usage);
  17. console.log('quota: ' + origins[i].quota);
  18. }
  19. })
  20. .catch(e => {
  21. console.log('error: ' + JSON.stringify(e));
  22. })
  23. } catch (error) {
  24. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  25. }
  26. })
  27. Web({ src: 'www.example.com', controller: this.controller })
  28. .databaseAccess(true)
  29. }
  30. }
  31. }

getOriginQuota

static getOriginQuota(origin : string, callback : AsyncCallback<number>) : void

使用callback回调异步获取指定源的Web SQL数据库的存储配额,配额以字节为单位。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

origin

string

指定源的字符串索引

callback

AsyncCallback<number>

指定源的存储配额

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100011

Invalid origin.

示例:

  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. origin: string = "file:///";
  8. build() {
  9. Column() {
  10. Button('getOriginQuota')
  11. .onClick(() => {
  12. try {
  13. web_webview.WebStorage.getOriginQuota(this.origin, (error, quota) => {
  14. if (error) {
  15. console.log('error: ' + JSON.stringify(error));
  16. return;
  17. }
  18. console.log('quota: ' + quota);
  19. })
  20. } catch (error) {
  21. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  22. }
  23. })
  24. Web({ src: 'www.example.com', controller: this.controller })
  25. .databaseAccess(true)
  26. }
  27. }
  28. }

getOriginQuota

static getOriginQuota(origin : string) : Promise<number>

以Promise方式异步获取指定源的Web SQL数据库的存储配额,配额以字节为单位。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

origin

string

指定源的字符串索引

返回值:

类型

说明

Promise<number>

Promise实例,用于获取指定源的存储配额。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100011

Invalid origin.

示例:

  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. origin: string = "file:///";
  8. build() {
  9. Column() {
  10. Button('getOriginQuota')
  11. .onClick(() => {
  12. try {
  13. web_webview.WebStorage.getOriginQuota(this.origin)
  14. .then(quota => {
  15. console.log('quota: ' + quota);
  16. })
  17. .catch(e => {
  18. console.log('error: ' + JSON.stringify(e));
  19. })
  20. } catch (error) {
  21. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  22. }
  23. })
  24. Web({ src: 'www.example.com', controller: this.controller })
  25. .databaseAccess(true)
  26. }
  27. }
  28. }

getOriginUsage

static getOriginUsage(origin : string, callback : AsyncCallback<number>) : void

以回调方式异步获取指定源的Web SQL数据库的存储量,存储量以字节为单位。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

origin

string

指定源的字符串索引

callback

AsyncCallback<number>

指定源的存储量。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100011

Invalid origin.

示例:

  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. origin: string = "file:///";
  8. build() {
  9. Column() {
  10. Button('getOriginUsage')
  11. .onClick(() => {
  12. try {
  13. web_webview.WebStorage.getOriginUsage(this.origin, (error, usage) => {
  14. if (error) {
  15. console.log('error: ' + JSON.stringify(error));
  16. return;
  17. }
  18. console.log('usage: ' + usage);
  19. })
  20. } catch (error) {
  21. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  22. }
  23. })
  24. Web({ src: 'www.example.com', controller: this.controller })
  25. .databaseAccess(true)
  26. }
  27. }
  28. }

getOriginUsage

static getOriginUsage(origin : string) : Promise<number>

以Promise方式异步获取指定源的Web SQL数据库的存储量,存储量以字节为单位。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

origin

string

指定源的字符串索引

返回值:

类型

说明

Promise<number>

Promise实例,用于获取指定源的存储量。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100011

Invalid origin.

示例:

  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. origin: string = "file:///";
  8. build() {
  9. Column() {
  10. Button('getOriginUsage')
  11. .onClick(() => {
  12. try {
  13. web_webview.WebStorage.getOriginUsage(this.origin)
  14. .then(usage => {
  15. console.log('usage: ' + usage);
  16. })
  17. .catch(e => {
  18. console.log('error: ' + JSON.stringify(e));
  19. })
  20. } catch (error) {
  21. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  22. }
  23. })
  24. Web({ src: 'www.example.com', controller: this.controller })
  25. .databaseAccess(true)
  26. }
  27. }
  28. }

deleteAllData

static deleteAllData(): void

清除Web SQL数据库当前使用的所有存储。

系统能力: SystemCapability.Web.Webview.Core

示例:

  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. Button('deleteAllData')
  10. .onClick(() => {
  11. try {
  12. web_webview.WebStorage.deleteAllData();
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. .databaseAccess(true)
  19. }
  20. }
  21. }

WebDataBase

web组件数据库管理对象。

说明

目前调用WebDataBase下的方法,都需要先加载Web组件。

getHttpAuthCredentials

static getHttpAuthCredentials(host: string, realm: string): Array<string>

检索给定主机和域的HTTP身份验证凭据,该方法为同步方法。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

host

string

HTTP身份验证凭据应用的主机。

realm

string

HTTP身份验证凭据应用的域。

返回值:

类型

说明

Array<string>

包含用户名和密码的组数,检索失败返回空数组。

示例:

  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. host: string = "www.spincast.org";
  8. realm: string = "protected example";
  9. username_password: string[];
  10. build() {
  11. Column() {
  12. Button('getHttpAuthCredentials')
  13. .onClick(() => {
  14. try {
  15. this.username_password = web_webview.WebDataBase.getHttpAuthCredentials(this.host, this.realm);
  16. console.log('num: ' + this.username_password.length);
  17. } catch (error) {
  18. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  19. }
  20. })
  21. Web({ src: 'www.example.com', controller: this.controller })
  22. }
  23. }
  24. }

saveHttpAuthCredentials

static saveHttpAuthCredentials(host: string, realm: string, username: string, password: string): void

保存给定主机和域的HTTP身份验证凭据,该方法为同步方法。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

host

string

HTTP身份验证凭据应用的主机。

realm

string

HTTP身份验证凭据应用的域。

username

string

用户名。

password

string

密码。

示例:

  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. host: string = "www.spincast.org";
  8. realm: string = "protected example";
  9. build() {
  10. Column() {
  11. Button('saveHttpAuthCredentials')
  12. .onClick(() => {
  13. try {
  14. web_webview.WebDataBase.saveHttpAuthCredentials(this.host, this.realm, "Stromgol", "Laroche");
  15. } catch (error) {
  16. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  17. }
  18. })
  19. Web({ src: 'www.example.com', controller: this.controller })
  20. }
  21. }
  22. }

existHttpAuthCredentials

static existHttpAuthCredentials(): boolean

判断是否存在任何已保存的HTTP身份验证凭据,该方法为同步方法。存在返回true,不存在返回false。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

boolean

是否存在任何已保存的HTTP身份验证凭据。存在返回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. build() {
  8. Column() {
  9. Button('existHttpAuthCredentials')
  10. .onClick(() => {
  11. try {
  12. let result = web_webview.WebDataBase.existHttpAuthCredentials();
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

deleteHttpAuthCredentials

static deleteHttpAuthCredentials(): void

清除所有已保存的HTTP身份验证凭据,该方法为同步方法。

系统能力: SystemCapability.Web.Webview.Core

示例:

  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. Button('deleteHttpAuthCredentials')
  10. .onClick(() => {
  11. try {
  12. web_webview.WebDataBase.deleteHttpAuthCredentials();
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

GeolocationPermissions

web组件地理位置权限管理对象。

说明

目前调用GeolocationPermissions下的方法,都需要先加载Web组件。

需要权限

访问地理位置时需添加权限:ohos.permission.LOCATION、ohos.permission.APPROXIMATELY_LOCATION、ohos.permission.LOCATION_IN_BACKGROUND,具体权限说明请参考位置服务

allowGeolocation

static allowGeolocation(origin: string): void

允许指定来源使用地理位置接口。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

origin

string

指定源的字符串索引

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100011

Invalid origin.

示例:

  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. origin: string = "file:///";
  8. build() {
  9. Column() {
  10. Button('allowGeolocation')
  11. .onClick(() => {
  12. try {
  13. web_webview.GeolocationPermissions.allowGeolocation(this.origin);
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

deleteGeolocation

static deleteGeolocation(origin: string): void

清除指定来源的地理位置权限状态。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

origin

string

指定源的字符串索引

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100011

Invalid origin.

示例:

  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. origin: string = "file:///";
  8. build() {
  9. Column() {
  10. Button('deleteGeolocation')
  11. .onClick(() => {
  12. try {
  13. web_webview.GeolocationPermissions.deleteGeolocation(this.origin);
  14. } catch (error) {
  15. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  16. }
  17. })
  18. Web({ src: 'www.example.com', controller: this.controller })
  19. }
  20. }
  21. }

getAccessibleGeolocation

static getAccessibleGeolocation(origin: string, callback: AsyncCallback<boolean>): void

以回调方式异步获取指定源的地理位置权限状态。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

origin

string

指定源的字符串索引

callback

AsyncCallback<boolean>

返回指定源的地理位置权限状态。获取成功,true表示已授权,false表示拒绝访问。获取失败,表示不存在指定源的权限状态。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100011

Invalid origin.

示例:

  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. origin: string = "file:///";
  8. build() {
  9. Column() {
  10. Button('getAccessibleGeolocation')
  11. .onClick(() => {
  12. try {
  13. web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin, (error, result) => {
  14. if (error) {
  15. console.log('getAccessibleGeolocationAsync error: ' + JSON.stringify(error));
  16. return;
  17. }
  18. console.log('getAccessibleGeolocationAsync result: ' + result);
  19. });
  20. } catch (error) {
  21. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  22. }
  23. })
  24. Web({ src: 'www.example.com', controller: this.controller })
  25. }
  26. }
  27. }

getAccessibleGeolocation

static getAccessibleGeolocation(origin: string): Promise<boolean>

以Promise方式异步获取指定源的地理位置权限状态。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

origin

string

指定源的字符串索引。

返回值:

类型

说明

Promise<boolean>

Promise实例,用于获取指定源的权限状态,获取成功,true表示已授权,false表示拒绝访问。获取失败,表示不存在指定源的权限状态。

错误码:

以下错误码的详细介绍请参见webview错误码

错误码ID

错误信息

17100011

Invalid origin.

示例:

  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. origin: string = "file:///";
  8. build() {
  9. Column() {
  10. Button('getAccessibleGeolocation')
  11. .onClick(() => {
  12. try {
  13. web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin)
  14. .then(result => {
  15. console.log('getAccessibleGeolocationPromise result: ' + result);
  16. }).catch(error => {
  17. console.log('getAccessibleGeolocationPromise error: ' + JSON.stringify(error));
  18. });
  19. } catch (error) {
  20. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  21. }
  22. })
  23. Web({ src: 'www.example.com', controller: this.controller })
  24. }
  25. }
  26. }

getStoredGeolocation

static getStoredGeolocation(callback: AsyncCallback<Array<string>>): void

以回调方式异步获取已存储地理位置权限状态的所有源信息。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

callback

AsyncCallback<Array<string>>

返回已存储地理位置权限状态的所有源信息。

示例:

  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. Button('getStoredGeolocation')
  10. .onClick(() => {
  11. try {
  12. web_webview.GeolocationPermissions.getStoredGeolocation((error, origins) => {
  13. if (error) {
  14. console.log('getStoredGeolocationAsync error: ' + JSON.stringify(error));
  15. return;
  16. }
  17. let origins_str: string = origins.join();
  18. console.log('getStoredGeolocationAsync origins: ' + origins_str);
  19. });
  20. } catch (error) {
  21. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  22. }
  23. })
  24. Web({ src: 'www.example.com', controller: this.controller })
  25. }
  26. }
  27. }

getStoredGeolocation

static getStoredGeolocation(): Promise<Array<string>>

以Promise方式异步获取已存储地理位置权限状态的所有源信息。

系统能力: SystemCapability.Web.Webview.Core

返回值:

类型

说明

Promise<Array<string>>

Promise实例,用于获取已存储地理位置权限状态的所有源信息。

示例:

  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. Button('getStoredGeolocation')
  10. .onClick(() => {
  11. try {
  12. web_webview.GeolocationPermissions.getStoredGeolocation()
  13. .then(origins => {
  14. let origins_str: string = origins.join();
  15. console.log('getStoredGeolocationPromise origins: ' + origins_str);
  16. }).catch(error => {
  17. console.log('getStoredGeolocationPromise error: ' + JSON.stringify(error));
  18. });
  19. } catch (error) {
  20. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  21. }
  22. })
  23. Web({ src: 'www.example.com', controller: this.controller })
  24. }
  25. }
  26. }

deleteAllGeolocation

static deleteAllGeolocation(): void

清除所有来源的地理位置权限状态。

系统能力: SystemCapability.Web.Webview.Core

示例:

  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. Button('deleteAllGeolocation')
  10. .onClick(() => {
  11. try {
  12. web_webview.GeolocationPermissions.deleteAllGeolocation();
  13. } catch (error) {
  14. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  15. }
  16. })
  17. Web({ src: 'www.example.com', controller: this.controller })
  18. }
  19. }
  20. }

WebHeader

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

系统能力: SystemCapability.Web.Webview.Core

名称

类型

可读

可写

说明

headerKey

string

请求/响应头的key。

headerValue

string

请求/响应头的value。

WebHitTestType

系统能力: SystemCapability.Web.Webview.Core

名称

说明

EditText

0

可编辑的区域。

Email

1

电子邮件地址。

HttpAnchor

2

超链接,其src为http。

HttpAnchorImg

3

带有超链接的图片,其中超链接的src为http。

Img

4

HTML::img标签。

Map

5

地理地址。

Phone

6

电话号码。

Unknown

7

未知内容。

HitTestValue

提供点击区域的元素信息。示例代码参考getHitTestValue。

系统能力: SystemCapability.Web.Webview.Core

名称

类型

可读

可写

说明

type

WebHitTestType

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

extra

string

点击区域的附加参数信息。若被点击区域为图片或链接,则附加参数信息为其url地址。

WebMessage

用于描述WebMessagePort所支持的数据类型。

系统能力: SystemCapability.Web.Webview.Core

类型

说明

string

字符串类型数据。

ArrayBuffer

二进制类型数据。

WebStorageOrigin

提供Web SQL数据库的使用信息。

系统能力: SystemCapability.Web.Webview.Core

名称

类型

可读

可写

说明

origin

string

指定源的字符串索引。

usage

number

指定源的存储量。

quota

number

指定源的存储配额。

BackForwardList

当前Webview的历史信息列表。

系统能力: SystemCapability.Web.Webview.Core

名称

类型

可读

可写

说明

currentIndex

number

当前在页面历史列表中的索引。

size

number

历史列表中索引的数量,最多保存50条,超过时起始记录会被覆盖。

getItemAtIndex

getItemAtIndex(index: number): HistoryItem

获取历史列表中指定索引的历史记录项信息。

系统能力: SystemCapability.Web.Webview.Core

参数:

参数名

类型

必填

说明

index

number

指定历史列表中的索引。

返回值:

类型

说明

HistoryItem

历史记录项。

示例:

  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;
  9. build() {
  10. Column() {
  11. Button('getBackForwardEntries')
  12. .onClick(() => {
  13. try {
  14. let list = this.controller.getBackForwardEntries();
  15. let historyItem = list.getItemAtIndex(list.currentIndex);
  16. console.log("HistoryItem: " + JSON.stringify(historyItem));
  17. this.icon = historyItem.icon;
  18. } catch (error) {
  19. console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
  20. }
  21. })
  22. Web({ src: 'www.example.com', controller: this.controller })
  23. }
  24. }
  25. }

HistoryItem

页面历史记录项。

系统能力: SystemCapability.Web.Webview.Core

名称

类型

可读

可写

说明

icon

PixelMap

历史页面图标的PixelMap对象。

historyUrl

string

历史记录项的url地址。

historyRawUrl

string

历史记录项的原始url地址。

title

string

历史记录项的标题。

WebCustomScheme

自定义协议配置。

系统能力: SystemCapability.Web.Webview.Core

名称

类型

可读

可写

说明

schemeName

string

自定义协议名称。最大长度为32,其字符仅支持小写字母、数字、'.'、'+'、'-'。

isSupportCORS

boolean

是否支持跨域请求。

isSupportFetch

boolean

是否支持fetch请求。

壁纸
控制台
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

媒体组件

像素

枚举

类型

接口

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }