web控制能力

需要權(quán)限

訪問在線網(wǎng)頁時需添加網(wǎng)絡(luò)權(quán)限：ohos.permission.INTERNET，具體申請方式請參考權(quán)限申請聲明。

導(dǎo)入模塊

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

once

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

訂閱一次指定類型Web事件的回調(diào)。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

web_webview.once("webInited", () => {
  console.log("setCookie")
  web_webview.WebCookieManager.setCookie("https://www.example.com", "a=b")
})

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

WebMessagePort

通過WebMessagePort可以進行消息的發(fā)送以及接收。

postMessageEvent

postMessageEvent(message: WebMessage): void

發(fā)送消息。完整示例代碼參考postMessage

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  ports: web_webview.WebMessagePort[];

  build() {
    Column() {
      Button('postMessageEvent')
        .onClick(() => {
          try {
            this.ports = this.controller.createWebMessagePorts();
            this.controller.postMessage('__init_port__', [this.ports[0]], '*');
            this.ports[1].postMessageEvent("post message from ets to html5");
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

onMessageEvent

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

注冊回調(diào)函數(shù)，接收HTML5側(cè)發(fā)送過來的消息。完整示例代碼參考postMessage

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  ports: web_webview.WebMessagePort[];

  build() {
    Column() {
      Button('onMessageEvent')
        .onClick(() => {
          try {
            this.ports = this.controller.createWebMessagePorts();
            this.ports[1].onMessageEvent((msg) => {
              if (typeof(msg) == "string") {
                console.log("received string message from html5, string is:" + msg);
              } else if (typeof(msg) == "object") {
                if (msg instanceof ArrayBuffer) {
                  console.log("received arraybuffer from html5, length is:" + msg.byteLength);
                } else {
                  console.log("not support");
                }
              } else {
                console.log("not support");
              }
            })
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

close

close(): void

關(guān)閉該消息端口。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  msgPort: web_webview.WebMessagePort[] = null;

  build() {
    Column() {
      Button('close')
        .onClick(() => {
          if (this.msgPort && this.msgPort.length == 2) {
            this.msgPort[1].close();
          } else {
            console.error("msgPort is null, Please initialize first");
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

WebviewController

通過WebviewController可以控制Web組件各種行為。一個WebviewController對象只能控制一個Web組件，且必須在Web組件和WebviewController綁定后，才能調(diào)用WebviewController上的方法（靜態(tài)方法除外）。

initializeWebEngine

static initializeWebEngine(): void

在 Web 組件初始化之前，通過此接口加載 Web 引擎的動態(tài)庫文件，以提高啟動性能。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

示例：

本示例以 MainAbility 為例，描述了在 Ability 創(chuàng)建階段完成 Web 組件動態(tài)庫加載的功能。

// xxx.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import web_webview from '@ohos.web.webview';

export default class EntryAbility extends UIAbility {
    onCreate(want, launchParam) {
        console.log("EntryAbility onCreate")
        web_webview.WebviewController.initializeWebEngine()
        globalThis.abilityWant = want
        console.log("EntryAbility onCreate done")
    }
}

setWebDebuggingAccess

static setWebDebuggingAccess(webDebuggingAccess: boolean): void

設(shè)置是否啟用網(wǎng)頁調(diào)試功能。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  aboutToAppear():void {
    try {
      web_webview.WebviewController.setWebDebuggingAccess(true);
    } catch(error) {
      console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
    }
  }

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

loadUrl

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

加載指定的URL。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            //需要加載的URL是string類型
            this.controller.loadUrl('www.example.com');
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('loadUrl')
        .onClick(() => {
          try {
            //帶參數(shù)headers
            this.controller.loadUrl('www.example.com', [{headerKey: "headerKey", headerValue: "headerValue"}]);
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

加載本地網(wǎng)頁，加載本地資源文件有兩種方式。

1. $rawfile方式。

   // xxx.ets
   import web_webview from '@ohos.web.webview'
   
   @Entry
   @Component
   struct WebComponent {
     controller: web_webview.WebviewController = new web_webview.WebviewController();
   
     build() {
       Column() {
         Button('loadUrl')
           .onClick(() => {
             try {
               //需要加載的URL是Resource類型
               this.controller.loadUrl($rawfile('index.html'));
             } catch (error) {
               console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
             }
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
     }
   }

   加載的html文件。

   <!-- index.html -->
   <!DOCTYPE html>
   <html>
     <body>
       <p>Hello World</p>
     </body>
   </html>

   2.加載沙箱路徑下的本地資源文件，可以參考web加載沙箱路徑的示例代碼。

loadData

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

加載指定的數(shù)據(jù)。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            this.controller.loadData(
              "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
              "text/html",
              "UTF-8"
            );
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

加載本地資源

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  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>'

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            this.controller.loadData(this.updataContent, "text/html", "UTF-8", " ", " ");
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

accessForward

accessForward(): boolean

當前頁面是否可前進，即當前頁面是否有前進歷史記錄。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

返回值：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('accessForward')
        .onClick(() => {
          try {
            let result = this.controller.accessForward();
            console.log('result:' + result);
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

forward

forward(): void

按照歷史棧，前進一個頁面。一般結(jié)合accessForward一起使用。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('forward')
        .onClick(() => {
          try {
            this.controller.forward();
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

accessBackward

accessBackward(): boolean

當前頁面是否可后退，即當前頁面是否有返回歷史記錄。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

返回值：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('accessBackward')
        .onClick(() => {
          try {
            let result = this.controller.accessBackward();
            console.log('result:' + result);
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

backward

backward(): void

按照歷史棧，后退一個頁面。一般結(jié)合accessBackward一起使用。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('backward')
        .onClick(() => {
          try {
            this.controller.backward();
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

onActive

onActive(): void

調(diào)用此接口通知Web組件進入前臺激活狀態(tài)。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('onActive')
        .onClick(() => {
          try {
            this.controller.onActive();
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

onInactive

onInactive(): void

調(diào)用此接口通知Web組件進入未激活狀態(tài)。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('onInactive')
        .onClick(() => {
          try {
            this.controller.onInactive();
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

refresh

refresh(): void

調(diào)用此接口通知Web組件刷新網(wǎng)頁。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('refresh')
        .onClick(() => {
          try {
            this.controller.refresh();
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

accessStep

accessStep(step: number): boolean

當前頁面是否可前進或者后退給定的step步。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

返回值：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State steps: number = 2;

  build() {
    Column() {
      Button('accessStep')
        .onClick(() => {
          try {
            let result = this.controller.accessStep(this.steps);
            console.log('result:' + result);
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

clearHistory

clearHistory(): void

刪除所有前進后退記錄。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('clearHistory')
        .onClick(() => {
          try {
            this.controller.clearHistory();
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

getHitTest

getHitTest(): WebHitTestType

獲取當前被點擊區(qū)域的元素類型。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

返回值：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('getHitTest')
        .onClick(() => {
          try {
            let hitTestType = this.controller.getHitTest();
            console.log("hitTestType: " + hitTestType);
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

registerJavaScriptProxy

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

注入JavaScript對象到window對象中，并在window對象中調(diào)用該對象的方法。注冊后，須調(diào)用refresh接口生效。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct Index {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  testObj = {
    test: (data) => {
      return "ArkUI Web Component";
    },
    toString: () => {
      console.log('Web Component toString');
    }
  }

  build() {
    Column() {
      Button('refresh')
        .onClick(() => {
          try {
            this.controller.refresh();
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Button('Register JavaScript To Window')
        .onClick(() => {
          try {
            this.controller.registerJavaScriptProxy(this.testObj, "objName", ["test", "toString"]);
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true)
    }
  }
}

runJavaScript

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

異步執(zhí)行JavaScript腳本，并通過回調(diào)方式返回腳本執(zhí)行的結(jié)果。runJavaScript需要在loadUrl完成后，比如onPageEnd中調(diào)用。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State webResult: string = ''

  build() {
    Column() {
      Text(this.webResult).fontSize(20)
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true)
        .onPageEnd(e => {
          try {
            this.controller.runJavaScript(
              'test()',
              (error, result) => {
                if (error) {
                  console.info(`run JavaScript error: ` + JSON.stringify(error))
                  return;
                }
                if (result) {
                  this.webResult = result
                  console.info(`The test() return value is: ${result}`)
                }
              });
            console.info('url: ', e.url);
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
    }
  }
}

runJavaScript

runJavaScript(script: string): Promise<string>

異步執(zhí)行JavaScript腳本，并通過Promise方式返回腳本執(zhí)行的結(jié)果。runJavaScript需要在loadUrl完成后，比如onPageEnd中調(diào)用。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

返回值：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
 

  build() {
    Column() {
     
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .javaScriptAccess(true)
        .onPageEnd(e => {
          try {
            this.controller.runJavaScript('test()')
              .then(function (result) {
                console.log('result: ' + result);
              })
              .catch(function (error) {
                console.error("error: " + error);
              })
            console.info('url: ', e.url);
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
    }
  }
}

deleteJavaScriptRegister

deleteJavaScriptRegister(name: string): void

刪除通過registerJavaScriptProxy注冊到window上的指定name的應(yīng)用側(cè)JavaScript對象。刪除后立即生效，無須調(diào)用refresh接口。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State name: string = 'Object';

  build() {
    Column() {
      Button('deleteJavaScriptRegister')
        .onClick(() => {
          try {
            this.controller.deleteJavaScriptRegister(this.name);
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

zoom

zoom(factor: number): void

調(diào)整當前網(wǎng)頁的縮放比例，zoomAccess需為true。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State factor: number = 1;

  build() {
    Column() {
      Button('zoom')
        .onClick(() => {
          try {
            this.controller.zoom(this.factor);
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
        .zoomAccess(true)
    }
  }
}

searchAllAsync

searchAllAsync(searchString: string): void

異步查找網(wǎng)頁中所有匹配關(guān)鍵字'searchString'的內(nèi)容并高亮，結(jié)果通過onSearchResultReceive異步返回。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State searchString: string = "xxx";

  build() {
    Column() {
      Button('searchString')
        .onClick(() => {
          try {
            this.controller.searchAllAsync(this.searchString);
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
        .onSearchResultReceive(ret => {
          console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
          "[total]" + ret.numberOfMatches + "[isDone]" + ret.isDoneCounting);
        })
    }
  }
}

clearMatches

clearMatches(): void

清除所有通過searchAllAsync匹配到的高亮字符查找結(jié)果。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('clearMatches')
        .onClick(() => {
          try {
            this.controller.clearMatches();
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

searchNext

searchNext(forward: boolean): void

滾動到下一個匹配的查找結(jié)果并高亮。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('searchNext')
        .onClick(() => {
          try {
            this.controller.searchNext(true);
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

clearSslCache

clearSslCache(): void

清除Web組件記錄的SSL證書錯誤事件對應(yīng)的用戶操作行為。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('clearSslCache')
        .onClick(() => {
          try {
            this.controller.clearSslCache();
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

clearClientAuthenticationCache

clearClientAuthenticationCache(): void

清除Web組件記錄的客戶端證書請求事件對應(yīng)的用戶操作行為。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('clearClientAuthenticationCache')
        .onClick(() => {
          try {
            this.controller.clearClientAuthenticationCache();
          } catch (error) {
            console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

createWebMessagePorts

createWebMessagePorts(): Array<WebMessagePort>

創(chuàng)建Web消息端口。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

返回值：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
ports: web_webview.WebMessagePort[];

build() {
  Column() {
    Button('createWebMessagePorts')
      .onClick(() => {
        try {
          this.ports = this.controller.createWebMessagePorts();
          console.log("createWebMessagePorts size:" + this.ports.length)
        } catch (error) {
          console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
        }
      })
    Web({ src: 'www.example.com', controller: this.controller })
  }
}
}

postMessage

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

發(fā)送Web消息端口到HTML。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  ports: web_webview.WebMessagePort[];
  @State sendFromEts: string = 'Send this message from ets to HTML';
  @State receivedFromHtml: string = 'Display received message send from HTML';

  build() {
    Column() {
      // 展示接收到的來自HTML的內(nèi)容
      Text(this.receivedFromHtml)
      // 輸入框的內(nèi)容發(fā)送到html
      TextInput({placeholder: 'Send this message from ets to HTML'})
        .onChange((value: string) => {
          this.sendFromEts = value;
      })

      Button('postMessage')
        .onClick(() => {
          try {
            // 1、創(chuàng)建兩個消息端口。
            this.ports = this.controller.createWebMessagePorts();
            // 2、在應(yīng)用側(cè)的消息端口(如端口1)上注冊回調(diào)事件。
            this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
                let msg = 'Got msg from HTML:';
                if (typeof(result) == "string") {
                  console.log("received string message from html5, string is:" + result);
                  msg = msg + result;
                } else if (typeof(result) == "object") {
                  if (result instanceof ArrayBuffer) {
                    console.log("received arraybuffer from html5, length is:" + result.byteLength);
                    msg = msg + "lenght is " + result.byteLength;
                  } else {
                    console.log("not support");
                  }
                } else {
                  console.log("not support");
                }
                this.receivedFromHtml = msg;
              })
              // 3、將另一個消息端口(如端口0)發(fā)送到HTML側(cè)，由HTML側(cè)保存并使用。
              this.controller.postMessage('__init_port__', [this.ports[0]], '*');
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })

      // 4、使用應(yīng)用側(cè)的端口給另一個已經(jīng)發(fā)送到html的端口發(fā)送消息。
      Button('SendDataToHTML')
        .onClick(() => {
          try {
            if (this.ports && this.ports[1]) {
              this.ports[1].postMessageEvent(this.sendFromEts);
            } else {
              console.error(`ports is null, Please initialize first`);
            }
          } catch (error) {
            console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
          }
        })
      Web({ src: $rawfile('index.html'), controller: this.controller })
    }
  }
}

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebView Message Port Demo</title>
</head>

  <body>
    <h1>WebView Message Port Demo</h1>
    <div>
        <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
        <input id="msgFromJS" type="text" value="send this message from HTML to ets"/><br/>
    </div>
    <p class="output">display received message send from ets</p>
  </body>
  <script src="xxx.js"></script>
</html>

//xxx.js
var h5Port;
var output = document.querySelector('.output');
window.addEventListener('message', function (event) {
    if (event.data == '__init_port__') {
        if (event.ports[0] != null) {
            h5Port = event.ports[0]; // 1. 保存從ets側(cè)發(fā)送過來的端口
            h5Port.onmessage = function (event) {
              // 2. 接收ets側(cè)發(fā)送過來的消息.
              var msg = 'Got message from ets:';
              var result = event.data;
              if (typeof(result) == "string") {
                console.log("received string message from html5, string is:" + result);
                msg = msg + result;
              } else if (typeof(result) == "object") {
                if (result instanceof ArrayBuffer) {
                  console.log("received arraybuffer from html5, length is:" + result.byteLength);
                  msg = msg + "lenght is " + result.byteLength;
                } else {
                  console.log("not support");
                }
              } else {
                console.log("not support");
              }
              output.innerHTML = msg;
            }
        }
    }
})

// 3. 使用h5Port往ets側(cè)發(fā)送消息.
function PostMsgToEts(data) {
    if (h5Port) {
      h5Port.postMessage(data);
    } else {
      console.error("h5Port is null, Please initialize first");
    }
}

requestFocus

requestFocus(): void

使當前web頁面獲取焦點。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('requestFocus')
        .onClick(() => {
          try {
            this.controller.requestFocus();
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        });
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

zoomIn

zoomIn(): void

調(diào)用此接口將當前網(wǎng)頁進行放大，比例為20%。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('zoomIn')
        .onClick(() => {
          try {
            this.controller.zoomIn();
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

zoomOut

zoomOut(): void

調(diào)用此接口將當前網(wǎng)頁進行縮小，比例為20%。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('zoomOut')
        .onClick(() => {
          try {
            this.controller.zoomOut();
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

getHitTestValue

getHitTestValue(): HitTestValue

獲取當前被點擊區(qū)域的元素信息。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

返回值：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('getHitTestValue')
        .onClick(() => {
          try {
            let hitValue = this.controller.getHitTestValue();
            console.log("hitType: " + hitValue.type);
            console.log("extra: " + hitValue.extra);
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

getWebId

getWebId(): number

獲取當前Web組件的索引值，用于多個Web組件的管理。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

返回值：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('getWebId')
        .onClick(() => {
          try {
            let id = this.controller.getWebId();
            console.log("id: " + id);
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

getUserAgent

getUserAgent(): string

獲取當前默認用戶代理。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

返回值：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('getUserAgent')
        .onClick(() => {
          try {
            let userAgent = this.controller.getUserAgent();
            console.log("userAgent: " + userAgent);
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

getTitle

getTitle(): string

獲取當前網(wǎng)頁的標題。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

返回值：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例:

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('getTitle')
        .onClick(() => {
          try {
            let title = this.controller.getTitle();
            console.log("title: " + title);
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

getPageHeight

getPageHeight(): number

獲取當前網(wǎng)頁的頁面高度。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

返回值：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例:

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('getPageHeight')
        .onClick(() => {
          try {
            let pageHeight = this.controller.getPageHeight();
            console.log("pageHeight : " + pageHeight);
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

storeWebArchive

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

以回調(diào)方式異步保存當前頁面。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('storeWebArchive')
        .onClick(() => {
          try {
            this.controller.storeWebArchive("/data/storage/el2/base/", true, (error, filename) => {
              if (error) {
                console.info(`save web archive error: ` + JSON.stringify(error))
                return;
              }
              if (filename != null) {
                console.info(`save web archive success: ${filename}`)
              }
            });
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

storeWebArchive

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

以Promise方式異步保存當前頁面。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

返回值：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('storeWebArchive')
        .onClick(() => {
          try {
            this.controller.storeWebArchive("/data/storage/el2/base/", true)
              .then(filename => {
                if (filename != null) {
                  console.info(`save web archive success: ${filename}`)
                }
              })
              .catch(error => {
                console.log('error: ' + JSON.stringify(error));
              })
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

getUrl

getUrl(): string

獲取當前頁面的url地址。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

返回值：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('getUrl')
        .onClick(() => {
          try {
            let url = this.controller.getUrl();
            console.log("url: " + url);
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

stop

stop(): void

停止頁面加載。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('stop')
        .onClick(() => {
          try {
            this.controller.stop();
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        });
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

backOrForward

backOrForward(step: number): void

按照歷史棧，前進或者后退指定步長的頁面，當歷史棧中不存在對應(yīng)步長的頁面時，不會進行頁面跳轉(zhuǎn)。

前進或者后退頁面時，直接使用已加載過的網(wǎng)頁，無需重新加載網(wǎng)頁。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State step: number = -2;

  build() {
    Column() {
      Button('backOrForward')
        .onClick(() => {
          try {
            this.controller.backOrForward(this.step);
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

scrollTo

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

將頁面滾動到指定的絕對位置。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('scrollTo')
        .onClick(() => {
          try {
            this.controller.scrollTo(50, 50);
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

<!--xxx.html-->
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
        body {
            width:3000px;
            height:3000px;
            padding-right:170px;
            padding-left:170px;
            border:5px solid blueviolet
        }
    </style>
</head>
<body>
Scroll Test
</body>
</html>

scrollBy

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

將頁面滾動指定的偏移量。

系統(tǒng)能力： SystemCapability.Web.Webview.Core

參數(shù)：

錯誤碼：

以下錯誤碼的詳細介紹請參見webview錯誤碼。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button('scrollBy')
        .onClick(() => {
          try {
            this.controller.scrollBy(50, 50);
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

<!--xxx.html-->
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
        body {
            width:3000px;
            height:3000px;
            padding-right:170px;
            padding-left:170px;
            border:5px solid blueviolet
        }
    </style>
</head>
<body>
Scroll Test
</body>
</html>