();
public static getContext(): GlobalContext {
if (!GlobalContext.instance) {
GlobalContext.instance = new GlobalContext();
}
return GlobalContext.instance;
}
getObject(value: string): Object | undefined {
return this._objects.get(value);
}
setObject(key: string, objectClass: Object): void {
this._objects.set(key, objectClass);
}
}
```
2. 实现双向认证。
```ts
// xxx.ets API10
import common from '@ohos.app.ability.common';
import Want from '@ohos.app.ability.Want';
import web_webview from '@ohos.web.webview'
import { BusinessError } from '@ohos.base';
import bundleManager from '@ohos.bundle.bundleManager'
import { GlobalContext } from '../GlobalContext'
let uri = "";
export default class CertManagerService {
private static sInstance: CertManagerService;
private authUri = "";
private appUid = "";
public static getInstance(): CertManagerService {
if (CertManagerService.sInstance == null) {
CertManagerService.sInstance = new CertManagerService();
}
return CertManagerService.sInstance;
}
async grantAppPm(callback: (message: string) => void) {
let message = '';
let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT | bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION;
//注：com.example.myapplication需要写实际应用名称
try {
bundleManager.getBundleInfoForSelf(bundleFlags).then((data) => {
console.info('getBundleInfoForSelf successfully. Data: %{public}s', JSON.stringify(data));
this.appUid = data.appInfo.uid.toString();
}).catch((err: BusinessError) => {
console.error('getBundleInfoForSelf failed. Cause: %{public}s', err.message);
});
} catch (err) {
let message = (err as BusinessError).message;
console.error('getBundleInfoForSelf failed: %{public}s', message);
}
//注：需要在MainAbility.ts文件的onCreate函数里添加GlobalContext.getContext().setObject("AbilityContext", this.context)
let abilityContext = GlobalContext.getContext().getObject("AbilityContext") as common.UIAbilityContext
await abilityContext.startAbilityForResult(
{
bundleName: "com.ohos.certmanager",
abilityName: "MainAbility",
uri: "requestAuthorize",
parameters: {
appUid: this.appUid, //传入申请应用的appUid
}
} as Want)
.then((data: common.AbilityResult) => {
if (!data.resultCode && data.want) {
if (data.want.parameters) {
this.authUri = data.want.parameters.authUri as string; //授权成功后获取返回的authUri
}
}
})
message += "after grantAppPm authUri: " + this.authUri;
uri = this.authUri;
callback(message)
}
}
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State message: string = 'Hello World' //message主要是调试观察使用
certManager = CertManagerService.getInstance();
build() {
Row() {
Column() {
Row() {
//第一步：需要先进行授权，获取到uri
Button('GrantApp')
.onClick(() => {
this.certManager.grantAppPm((data) => {
this.message = data;
});
})
//第二步：授权后，双向认证会通过onClientAuthenticationRequest回调将uri传给web进行认证
Button("ClientCertAuth")
.onClick(() => {
this.controller.loadUrl('https://www.example2.com'); //支持双向认证的服务器网站
})
}
Web({ src: 'https://www.example1.com', controller: this.controller })
.fileAccess(true)
.javaScriptAccess(true)
.domStorageAccess(true)
.onlineImageAccess(true)
.onClientAuthenticationRequest((event) => {
AlertDialog.show({
title: 'ClientAuth',
message: 'Text',
confirm: {
value: 'Confirm',
action: () => {
event.handler.confirm(uri);
}
},
cancel: () => {
event.handler.cancel();
}
})
})
}
}
.width('100%')
.height('100%')
}
}
```
### onPermissionRequest9+
onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
通知收到获取权限请求。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | ---------------------------------------- | -------------- |
| request | [PermissionRequest](#permissionrequest9) | 通知Web组件用户操作行为。 |
**示例：**
```ts
// 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 })
.onPermissionRequest((event) => {
if (event) {
AlertDialog.show({
title: 'title',
message: 'text',
primaryButton: {
value: 'deny',
action: () => {
event.request.deny()
}
},
secondaryButton: {
value: 'onConfirm',
action: () => {
event.request.grant(event.request.getAccessibleResource())
}
},
cancel: () => {
event.request.deny()
}
})
}
})
}
}
}
```
加载的html文件。
```html
```
### onContextMenuShow9+
onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebContextMenuResult }) => boolean)
长按特定元素（例如图片，链接）或鼠标右键，跳出菜单。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------ | ---------------------------------------- | ----------- |
| param | [WebContextMenuParam](#webcontextmenuparam9) | 菜单相关参数。 |
| result | [WebContextMenuResult](#webcontextmenuresult9) | 菜单相应事件传入内核。 |
**返回值：**
| 类型 | 说明 |
| ------- | ------------------------ |
| boolean | 自定义菜单返回true，默认菜单返回false。 |
**示例：**
```ts
// 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: 'www.example.com', controller: this.controller })
.onContextMenuShow((event) => {
if (event) {
console.info("x coord = " + event.param.x())
console.info("link url = " + event.param.getLinkUrl())
}
return true
})
}
}
}
```
### onScroll9+
onScroll(callback: (event: {xOffset: number, yOffset: number}) => void)
通知网页滚动条滚动位置。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | ------ | ------------ |
| xOffset | number | 以网页最左端为基准，水平滚动条滚动所在位置。 |
| yOffset | number | 以网页最上端为基准，竖直滚动条滚动所在位置。 |
**示例：**
```ts
// 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: 'www.example.com', controller: this.controller })
.onScroll((event) => {
console.info("x = " + event.xOffset)
console.info("y = " + event.yOffset)
})
}
}
}
```
### onGeolocationShow
onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocation }) => void)
通知用户收到地理位置信息获取请求。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ----------- | ------------------------------- | -------------- |
| origin | string | 指定源的字符串索引。 |
| geolocation | [JsGeolocation](#jsgeolocation) | 通知Web组件用户操作行为。 |
**示例：**
```ts
// 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 })
.geolocationAccess(true)
.onGeolocationShow((event) => {
if (event) {
AlertDialog.show({
title: 'title',
message: 'text',
confirm: {
value: 'onConfirm',
action: () => {
event.geolocation.invoke(event.origin, true, true)
}
},
cancel: () => {
event.geolocation.invoke(event.origin, false, true)
}
})
}
})
}
}
}
```
加载的html文件。
```html
点击按钮获取您当前坐标 （可能需要比较长的时间获取）：
```
### onGeolocationHide
onGeolocationHide(callback: () => void)
通知用户先前被调用[onGeolocationShow](#ongeolocationshow)时收到地理位置信息获取请求已被取消。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| -------- | ---------- | -------------------- |
| callback | () => void | 地理位置信息获取请求已被取消的回调函数。 |
**示例：**
```ts
// 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:'www.example.com', controller:this.controller })
.geolocationAccess(true)
.onGeolocationHide(() => {
console.log("onGeolocationHide...")
})
}
}
}
```
### onFullScreenEnter9+
onFullScreenEnter(callback: (event: { handler: FullScreenExitHandler }) => void)
通知开发者web组件进入全屏模式。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | ---------------------------------------- | -------------- |
| handler | [FullScreenExitHandler](#fullscreenexithandler9) | 用于退出全屏模式的函数句柄。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
handler: FullScreenExitHandler | null = null
build() {
Column() {
Web({ src:'www.example.com', controller:this.controller })
.onFullScreenEnter((event) => {
console.log("onFullScreenEnter...")
this.handler = event.handler
})
}
}
}
```
### onFullScreenExit9+
onFullScreenExit(callback: () => void)
通知开发者web组件退出全屏模式。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| -------- | ---------- | ------------- |
| callback | () => void | 退出全屏模式时的回调函数。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
handler: FullScreenExitHandler | null = null
build() {
Column() {
Web({ src:'www.example.com', controller:this.controller })
.onFullScreenExit(() => {
console.log("onFullScreenExit...")
if (this.handler) {
this.handler.exitFullScreen()
}
})
.onFullScreenEnter((event) => {
this.handler = event.handler
})
}
}
}
```
### onWindowNew9+
onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetUrl: string, handler: ControllerHandler}) => void)
使能multiWindowAccess情况下，通知用户新建窗口请求。
若不调用event.handler.setWebController接口，会造成render进程阻塞。
如果不需要打开新窗口，在调用event.handler.setWebController接口时须设置成null。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------------- | ---------------------------------------- | -------------------------- |
| isAlert | boolean | true代表请求创建对话框，false代表新标签页。 |
| isUserTrigger | boolean | true代表用户触发，false代表非用户触发。 |
| targetUrl | string | 目标url。 |
| handler | [ControllerHandler](#controllerhandler9) | 用于设置新建窗口的WebviewController实例。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
//在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。
@CustomDialog
struct NewWebViewComp {
controller?: CustomDialogController
webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: "", controller: this.webviewController1 })
.javaScriptAccess(true)
.multiWindowAccess(false)
.onWindowExit(()=> {
console.info("NewWebViewComp onWindowExit")
if (this.controller) {
this.controller.close()
}
})
}
}
}
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
dialogController: CustomDialogController | null = null
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.javaScriptAccess(true)
//需要使能multiWindowAccess
.multiWindowAccess(true)
.allowWindowOpenMethod(true)
.onWindowNew((event) => {
if (this.dialogController) {
this.dialogController.close()
}
let popController:web_webview.WebviewController = new web_webview.WebviewController()
this.dialogController = new CustomDialogController({
builder: NewWebViewComp({webviewController1: popController})
})
this.dialogController.open()
//将新窗口对应WebviewController返回给Web内核。
//如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。
//若不调用event.handler.setWebController接口，会造成render进程阻塞。
event.handler.setWebController(popController)
})
}
}
}
```
### onWindowExit9+
onWindowExit(callback: () => void)
通知用户窗口关闭请求。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| -------- | ---------- | ------------ |
| callback | () => void | 窗口请求关闭的回调函数。 |
**示例：**
```ts
// 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:'www.example.com', controller: this.controller })
.onWindowExit(() => {
console.log("onWindowExit...")
})
}
}
}
```
### onSearchResultReceive9+
onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMatches: number, isDoneCounting: boolean}) => void): WebAttribute
回调通知调用方网页页内查找的结果。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------------------ | ------- | ---------------------------------------- |
| activeMatchOrdinal | number | 当前匹配的查找项的序号（从0开始）。 |
| numberOfMatches | number | 所有匹配到的关键词的个数。 |
| isDoneCounting | boolean | 当次页内查找操作是否结束。该方法可能会回调多次，直到isDoneCounting为true为止。 |
**示例：**
```ts
// 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: 'www.example.com', controller: this.controller })
.onSearchResultReceive(ret => {
if (ret) {
console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
"[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting)
}
})
}
}
}
```
### onDataResubmitted9+
onDataResubmitted(callback: (event: {handler: DataResubmissionHandler}) => void)
设置网页表单可以重新提交时触发的回调函数。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | ---------------------------------------------------- | ---------------------- |
| handler | [DataResubmissionHandler](#dataresubmissionhandler9) | 表单数据重新提交句柄。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
import business_error from '@ohos.base';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
//在网页中点击提交之后，点击refresh按钮可以重新提交时的触发函数。
Button('refresh')
.onClick(() => {
try {
this.controller.refresh();
} catch (error) {
let e: business_error.BusinessError = error as business_error.BusinessError;
console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
}
})
Web({ src:$rawfile('index.html'), controller: this.controller })
.onDataResubmitted((event) => {
console.log('onDataResubmitted')
event.handler.resend();
})
}
}
}
```
加载的html文件。
```html
```
### onPageVisible9+
onPageVisible(callback: (event: {url: string}) => void)
设置旧页面不再呈现，新页面即将可见时触发的回调函数。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------ | -------- | ------------------------------------------------- |
| url | string | 旧页面不再呈现，新页面即将可见时新页面的url地址。 |
**示例：**
```ts
// 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:'www.example.com', controller: this.controller })
.onPageVisible((event) => {
console.log('onPageVisible url:' + event.url)
})
}
}
}
```
### onInterceptKeyEvent9+
onInterceptKeyEvent(callback: (event: KeyEvent) => boolean)
设置键盘事件的回调函数，该回调在被Webview使用前触发。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------ | ------------------------------------------------------- | -------------------- |
| event | [KeyEvent](ts-universal-events-key.md#keyevent对象说明) | 触发的KeyEvent事件。 |
**返回值：**
| 类型 | 说明 |
| ------- | ------------------------------------------------------------ |
| boolean | 回调函数通过返回boolean类型值来决定是否继续将该KeyEvent传入Webview内核。 |
**示例：**
```ts
// 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:'www.example.com', controller: this.controller })
.onInterceptKeyEvent((event) => {
if (event.keyCode == 2017 || event.keyCode == 2018) {
console.info(`onInterceptKeyEvent get event.keyCode ${event.keyCode}`)
return true;
}
return false;
})
}
}
}
```
### onTouchIconUrlReceived9+
onTouchIconUrlReceived(callback: (event: {url: string, precomposed: boolean}) => void)
设置接收到apple-touch-icon url地址时的回调函数。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ----------- | -------- | ---------------------------------- |
| url | string | 接收到的apple-touch-icon url地址。 |
| precomposed | boolean | 对应apple-touch-icon是否为预合成。 |
**示例：**
```ts
// 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:'www.baidu.com', controller: this.controller })
.onTouchIconUrlReceived((event) => {
console.log('onTouchIconUrlReceived:' + JSON.stringify(event))
})
}
}
}
```
### onFaviconReceived9+
onFaviconReceived(callback: (event: {favicon: image.PixelMap}) => void)
设置应用为当前页面接收到新的favicon时的回调函数。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | ---------------------------------------------- | ----------------------------------- |
| favicon | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 接收到的favicon图标的PixelMap对象。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
import image from "@ohos.multimedia.image"
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State icon: image.PixelMap | undefined = undefined;
build() {
Column() {
Web({ src:'www.example.com', controller: this.controller })
.onFaviconReceived((event) => {
console.log('onFaviconReceived');
this.icon = event.favicon;
})
}
}
}
```
### onAudioStateChanged10+
onAudioStateChanged(callback: (event: { playing: boolean }) => void)
设置网页上的音频播放状态发生改变时的回调函数。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | ---------------------------------------------- | ----------------------------------- |
| playing | boolean | 当前页面的音频播放状态，true表示正在播放，false表示未播放。 |
**示例：**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State playing: boolean = false
build() {
Column() {
Web({ src:'www.example.com', controller: this.controller })
.onAudioStateChanged(event => {
this.playing = event.playing
console.debug('onAudioStateChanged playing: ' + this.playing)
})
}
}
}
```
### onFirstContentfulPaint10+
onFirstContentfulPaint(callback: (event?: { navigationStartTick: number, firstContentfulPaintMs: number }) => void)
设置网页首次内容绘制回调函数。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| -----------------------| -------- | ----------------------------------- |
| navigationStartTick | number | navigation开始的时间，单位以微秒表示。|
| firstContentfulPaintMs | number | 从navigation开始第一次绘制内容的时间，单位是以毫秒表示。|
**示例：**
```ts
// 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:'www.example.com', controller: this.controller })
.onFirstContentfulPaint(event => {
if (event) {
console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" +
event.navigationStartTick + ", [firstContentfulPaintMs]:" +
event.firstContentfulPaintMs)
}
})
}
}
}
```
### onLoadIntercept10+
onLoadIntercept(callback: (event?: { data: WebResourceRequest }) => boolean)
当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。默认允许加载。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | ---------------------------------------- | --------- |
| request | [WebResourceRequest](#webresourcerequest) | url请求的相关信息。 |
**返回值：**
| 类型 | 说明 |
| ------- | ------------------------ |
| boolean | 返回true表示阻止此次加载，否则允许此次加载。 |
**示例：**
```ts
// 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: 'www.example.com', controller: this.controller })
.onLoadIntercept((event) => {
console.log('url:' + event.data.getRequestUrl())
console.log('isMainFrame:' + event.data.isMainFrame())
console.log('isRedirect:' + event.data.isRedirect())
console.log('isRequestGesture:' + event.data.isRequestGesture())
return true
})
}
}
}
```
### onRequestSelected
onRequestSelected(callback: () => void)
当Web组件获得焦点时触发该回调。
**示例：**
```ts
// 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: 'www.example.com', controller: this.controller })
.onRequestSelected(() => {
console.log('onRequestSelected')
})
}
}
}
```
### onScreenCaptureRequest10+
onScreenCaptureRequest(callback: (event?: { handler: ScreenCaptureHandler }) => void)
通知收到屏幕捕获请求。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | ---------------------------------------- | -------------- |
| handler | [ScreenCaptureHandler](#screencapturehandler10) | 通知Web组件用户操作行为。 |
**示例：**
```ts
// 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: 'www.example.com', controller: this.controller })
.onScreenCaptureRequest((event) => {
if (event) {
AlertDialog.show({
title: 'title: ' + event.handler.getOrigin(),
message: 'text',
primaryButton: {
value: 'deny',
action: () => {
event.handler.deny()
}
},
secondaryButton: {
value: 'onConfirm',
action: () => {
event.handler.grant({ captureMode: WebCaptureMode.HOME_SCREEN })
}
},
cancel: () => {
event.handler.deny()
}
})
}
})
}
}
}
```
### onOverScroll10+
onOverScroll(callback: (event: {xOffset: number, yOffset: number}) => void)
通知网页过滚动偏移量。
**参数：**
| 参数名 | 参数类型 | 参数描述 |
| ------- | ------ | ------------ |
| xOffset | number | 以网页最左端为基准，水平过滚动偏移量。 |
| yOffset | number | 以网页最上端为基准，竖直过滚动偏移量。 |
**示例：**
```ts
// 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: 'www.example.com', controller: this.controller })
.onOverScroll((event) => {
console.info("x = " + event.xOffset)
console.info("y = " + event.yOffset)
})
}
}
}
```
### onControllerAttached10+
onControllerAttached(callback: () => void)
当Controller成功绑定到Web组件时触发该回调，并且该Controller必须为WebviewController，
因该回调调用时网页还未加载，无法在回调中使用有关操作网页的接口，例如[zoomIn](../apis/js-apis-webview.md#zoomin)、[zoomOut](../apis/js-apis-webview.md#zoomout)等，可以使用[loadUrl](../apis/js-apis-webview.md#loadurl)、[getWebId](../apis/js-apis-webview.md#getwebid)等操作网页不相关的接口。
**示例：**
在该回调中使用loadUrl加载网页
```ts
// 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: '', controller: this.controller })
.onControllerAttached(() => {
this.controller.loadUrl($rawfile("index.html"));
})
}
}
}
```
在该回调中使用getWebId
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
import { BusinessError } from '@ohos.base';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: $rawfile("index.html"), controller: this.controller })
.onControllerAttached(() => {
try {
let id = this.controller.getWebId();
console.log("id: " + id);
} catch (error) {
let code = (error as BusinessError).code;
let message = (error as BusinessError).message;
console.error(`ErrorCode: ${code}, Message: ${message}`);
}
})
}
}
}
```
加载的html文件。
```html
Hello World
```
## ConsoleMessage
Web组件获取控制台信息对象。示例代码参考[onConsole事件](#onconsole)。
### getLineNumber
getLineNumber(): number
获取ConsoleMessage的行数。
**返回值：**
| 类型 | 说明 |
| ------ | -------------------- |
| number | 返回ConsoleMessage的行数。 |
### getMessage
getMessage(): string
获取ConsoleMessage的日志信息。
**返回值：**
| 类型 | 说明 |
| ------ | ---------------------- |
| string | 返回ConsoleMessage的日志信息。 |
### getMessageLevel
getMessageLevel(): MessageLevel
获取ConsoleMessage的信息级别。
**返回值：**
| 类型 | 说明 |
| --------------------------------- | ---------------------- |
| [MessageLevel](#messagelevel枚举说明) | 返回ConsoleMessage的信息级别。 |
### getSourceId
getSourceId(): string
获取网页源文件路径和名字。
**返回值：**
| 类型 | 说明 |
| ------ | ------------- |
| string | 返回网页源文件路径和名字。 |
## JsResult
Web组件返回的弹窗确认或弹窗取消功能对象。示例代码参考[onAlert事件](#onalert)。
### handleCancel
handleCancel(): void
通知Web组件用户取消弹窗操作。
### handleConfirm
handleConfirm(): void
通知Web组件用户确认弹窗操作。
### handlePromptConfirm9+
handlePromptConfirm(result: string): void
通知Web组件用户确认弹窗操作及对话框内容。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ------ | ---- | ---- | ----------- |
| result | string | 是 | - | 用户输入的对话框内容。 |
## FullScreenExitHandler9+
通知开发者Web组件退出全屏。示例代码参考[onFullScreenEnter事件](#onfullscreenenter9)。
### exitFullScreen9+
exitFullScreen(): void
通知开发者Web组件退出全屏。
## ControllerHandler9+
设置用户新建web组件的的WebviewController对象。示例代码参考[onWindowNew事件](#onwindownew9)。
### setWebController9+
setWebController(controller: WebviewController): void
设置WebviewController对象，如果不需要打开新窗口请设置为null。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------------- | ---- | ---- | ------------------------- |
| controller | [WebviewController](../apis/js-apis-webview.md#webviewcontroller) | 是 | - | 新建web组件的WebviewController对象，如果不需要打开新窗口请设置为null。 |
## WebResourceError
web组件资源管理错误信息对象。示例代码参考[onErrorReceive事件](#onerrorreceive)。
### getErrorCode
getErrorCode(): number
获取加载资源的错误码。
**返回值：**
| 类型 | 说明 |
| ------ | ----------- |
| number | 返回加载资源的错误码。 |
### getErrorInfo
getErrorInfo(): string
获取加载资源的错误信息。
**返回值：**
| 类型 | 说明 |
| ------ | ------------ |
| string | 返回加载资源的错误信息。 |
## WebResourceRequest
web组件获取资源请求对象。示例代码参考[onErrorReceive事件](#onerrorreceive)。
### getRequestHeader
getResponseHeader() : Array\
获取资源请求头信息。
**返回值：**
| 类型 | 说明 |
| -------------------------- | ---------- |
| Array\<[Header](#header)\> | 返回资源请求头信息。 |
### getRequestUrl
getRequestUrl(): string
获取资源请求的URL信息。
**返回值：**
| 类型 | 说明 |
| ------ | ------------- |
| string | 返回资源请求的URL信息。 |
### isMainFrame
isMainFrame(): boolean
判断资源请求是否为主frame。
**返回值：**
| 类型 | 说明 |
| ------- | ---------------- |
| boolean | 返回资源请求是否为主frame。 |
### isRedirect
isRedirect(): boolean
判断资源请求是否被服务端重定向。
**返回值：**
| 类型 | 说明 |
| ------- | ---------------- |
| boolean | 返回资源请求是否被服务端重定向。 |
### isRequestGesture
isRequestGesture(): boolean
获取资源请求是否与手势（如点击）相关联。
**返回值：**
| 类型 | 说明 |
| ------- | -------------------- |
| boolean | 返回资源请求是否与手势（如点击）相关联。 |
### getRequestMethod9+
getRequestMethod(): string
获取请求方法。
**返回值：**
| 类型 | 说明 |
| ------- | -------------------- |
| string | 返回请求方法。 |
## Header
Web组件返回的请求/响应头对象。
| 名称 | 类型 | 描述 |
| ----------- | ------ | ------------- |
| headerKey | string | 请求/响应头的key。 |
| headerValue | string | 请求/响应头的value。 |
## WebResourceResponse
web组件资源响应对象。示例代码参考[onHttpErrorReceive事件](#onhttperrorreceive)。
### getReasonMessage
getReasonMessage(): string
获取资源响应的状态码描述。
**返回值：**
| 类型 | 说明 |
| ------ | ------------- |
| string | 返回资源响应的状态码描述。 |
### getResponseCode
getResponseCode(): number
获取资源响应的状态码。
**返回值：**
| 类型 | 说明 |
| ------ | ----------- |
| number | 返回资源响应的状态码。 |
### getResponseData
getResponseData(): string
获取资源响应数据。
**返回值：**
| 类型 | 说明 |
| ------ | --------- |
| string | 返回资源响应数据。 |
### getResponseEncoding
getResponseEncoding(): string
获取资源响应的编码。
**返回值：**
| 类型 | 说明 |
| ------ | ---------- |
| string | 返回资源响应的编码。 |
### getResponseHeader
getResponseHeader() : Array\
获取资源响应头。
**返回值：**
| 类型 | 说明 |
| -------------------------- | -------- |
| Array\<[Header](#header)\> | 返回资源响应头。 |
### getResponseMimeType
getResponseMimeType(): string
获取资源响应的媒体（MIME）类型。
**返回值：**
| 类型 | 说明 |
| ------ | ------------------ |
| string | 返回资源响应的媒体（MIME）类型。 |
### setResponseData9+
setResponseData(data: string | number \| Resource)
设置资源响应数据。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ---------------- | ---- | ------ | ------------------------------------------------------------ |
| data | string \| number \| [Resource](ts-types.md)10+| 是 | - | 要设置的资源响应数据。string表示HTML格式的字符串。number表示文件句柄, 此句柄由系统的Web组件负责关闭。 Resource表示应用rawfile目录下文件资源。|
### setResponseEncoding9+
setResponseEncoding(encoding: string)
设置资源响应的编码。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------ | ---- | ---- | ------------ |
| encoding | string | 是 | - | 要设置的资源响应的编码。 |
### setResponseMimeType9+
setResponseMimeType(mimeType: string)
设置资源响应的媒体（MIME）类型。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------ | ---- | ---- | -------------------- |
| mimeType | string | 是 | - | 要设置的资源响应的媒体（MIME）类型。 |
### setReasonMessage9+
setReasonMessage(reason: string)
设置资源响应的状态码描述。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ------ | ---- | ---- | --------------- |
| reason | string | 是 | - | 要设置的资源响应的状态码描述。 |
### setResponseHeader9+
setResponseHeader(header: Array\)
设置资源响应头。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------------------------- | ---- | ---- | ---------- |
| header | Array\<[Header](#header)\> | 是 | - | 要设置的资源响应头。 |
### setResponseCode9+
setResponseCode(code: number)
设置资源响应的状态码。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ------ | ---- | ---- | ------------- |
| code | number | 是 | - | 要设置的资源响应的状态码。 |
### setResponseIsReady9+
setResponseIsReady(IsReady: boolean)
设置资源响应数据是否已经就绪。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | -------- | ---- | ------ | -------------------------- |
| IsReady | boolean | 是 | true | 资源响应数据是否已经就绪。 |
## FileSelectorResult9+
通知Web组件的文件选择结果。示例代码参考[onShowFileSelector事件](#onshowfileselector9)。
### handleFileList9+
handleFileList(fileList: Array\): void
通知Web组件进行文件选择操作。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | --------------- | ---- | ---- | ------------ |
| fileList | Array\ | 是 | - | 需要进行操作的文件列表。 |
## FileSelectorParam9+
web组件获取文件对象。示例代码参考[onShowFileSelector事件](#onshowfileselector9)。
### getTitle9+
getTitle(): string
获取文件选择器标题。
**返回值：**
| 类型 | 说明 |
| ------ | -------- |
| string | 返回文件选择器标题。 |
### getMode9+
getMode(): FileSelectorMode
获取文件选择器的模式。
**返回值：**
| 类型 | 说明 |
| ---------------------------------------- | ----------- |
| [FileSelectorMode](#fileselectormode枚举说明) | 返回文件选择器的模式。 |
### getAcceptType9+
getAcceptType(): Array\
获取文件过滤类型。
**返回值：**
| 类型 | 说明 |
| --------------- | --------- |
| Array\ | 返回文件过滤类型。 |
### isCapture9+
isCapture(): boolean
获取是否调用多媒体能力。
**返回值：**
| 类型 | 说明 |
| ------- | ------------ |
| boolean | 返回是否调用多媒体能力。 |
## HttpAuthHandler9+
Web组件返回的http auth认证请求确认或取消和使用缓存密码认证功能对象。示例代码参考[onHttpAuthRequest事件](#onhttpauthrequest9)。
### cancel9+
cancel(): void
通知Web组件用户取消HTTP认证操作。
### confirm9+
confirm(userName: string, pwd: string): boolean
使用用户名和密码进行HTTP认证操作。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------ | ---- | ---- | ---------- |
| userName | string | 是 | - | HTTP认证用户名。 |
| pwd | string | 是 | - | HTTP认证密码。 |
**返回值：**
| 类型 | 说明 |
| ------- | --------------------- |
| boolean | 认证成功返回true，失败返回false。 |
### isHttpAuthInfoSaved9+
isHttpAuthInfoSaved(): boolean
通知Web组件用户使用服务器缓存的帐号密码认证。
**返回值：**
| 类型 | 说明 |
| ------- | ------------------------- |
| boolean | 存在密码认证成功返回true，其他返回false。 |
## SslErrorHandler9+
Web组件返回的SSL错误通知事件用户处理功能对象。示例代码参考[onSslErrorEventReceive事件](#onsslerroreventreceive9)。
### handleCancel9+
handleCancel(): void
通知Web组件取消此请求。
### handleConfirm9+
handleConfirm(): void
通知Web组件继续使用SSL证书。
## ClientAuthenticationHandler9+
Web组件返回的SSL客户端证书请求事件用户处理功能对象。示例代码参考[onClientAuthenticationRequest事件](#onclientauthenticationrequest9)。
### confirm9+
confirm(priKeyFile : string, certChainFile : string): void
通知Web组件使用指定的私钥和客户端证书链。
**参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------------- | ------ | ---- | ------------------ |
| priKeyFile | string | 是 | 存放私钥的文件，包含路径和文件名。 |
| certChainFile | string | 是 | 存放证书链的文件，包含路径和文件名。 |
### confirm10+
confirm(authUri : string): void
**需要权限：** ohos.permission.ACCESS_CERT_MANAGER
通知Web组件使用指定的凭据(从证书管理模块获得)。
**参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------- | ------ | ---- | ------------- |
| authUri | string | 是 | 凭据的关键值。 |
### cancel9+
cancel(): void
通知Web组件取消相同host和port服务器发送的客户端证书请求事件。同时，相同host和port服务器的请求，不重复上报该事件。
### ignore9+
ignore(): void
通知Web组件忽略本次请求。
## PermissionRequest9+
Web组件返回授权或拒绝权限功能的对象。示例代码参考[onPermissionRequest事件](#onpermissionrequest9)。
### deny9+
deny(): void
拒绝网页所请求的权限。
### getOrigin9+
getOrigin(): string
获取网页来源。
**返回值：**
| 类型 | 说明 |
| ------ | ------------ |
| string | 当前请求权限网页的来源。 |
### getAccessibleResource9+
getAccessibleResource(): Array\
获取网页所请求的权限资源列表，资源列表类型参考[ProtectedResourceType](#protectedresourcetype9枚举说明)。
**返回值：**
| 类型 | 说明 |
| --------------- | ------------- |
| Array\ | 网页所请求的权限资源列表。 |
### grant9+
grant(resources: Array\): void
对网页访问的给定权限进行授权。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | --------------- | ---- | ---- | ------------- |
| resources | Array\ | 是 | - | 授予网页请求的权限的资源列表。 |
## ScreenCaptureHandler10+
Web组件返回授权或拒绝屏幕捕获功能的对象。示例代码参考[onScreenCaptureRequest事件](#onscreencapturerequest10)。
### deny10+
deny(): void
拒绝网页所请求的屏幕捕获操作。
### getOrigin10+
getOrigin(): string
获取网页来源。
**返回值：**
| 类型 | 说明 |
| ------ | ------------ |
| string | 当前请求权限网页的来源。 |
### grant10+
grant(config: ScreenCaptureConfig): void
**需要权限：** ohos.permission.MICROPHONE，ohos.permission.CAPTURE_SCREEN
对网页访问的屏幕捕获操作进行授权。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | --------------- | ---- | ---- | ------------- |
| config | [ScreenCaptureConfig](#screencaptureconfig10) | 是 | - | 屏幕捕获配置。 |
## ContextMenuSourceType9+枚举说明
| 名称 | 描述 |
| -------------------- | ---------- |
| None | 其他事件来源。 |
| Mouse | 鼠标事件。 |
| LongPress | 长按事件。 |
## ContextMenuMediaType9+枚举说明
| 名称 | 描述 |
| ------------ | ----------- |
| None | 非特殊媒体或其他媒体类型。 |
| Image | 图片。 |
## ContextMenuInputFieldType9+枚举说明
| 名称 | 描述 |
| ------------ | ----------- |
| None | 非输入框。 |
| PlainText | 纯文本类型，包括text、search、email等。 |
| Password | 密码类型。 |
| Number | 数字类型。 |
| Telephone | 电话号码类型。 |
| Other | 其他类型。 |
## ContextMenuEditStateFlags9+枚举说明
| 名称 | 描述 |
| ------------ | ----------- |
| NONE | 不可编辑。 |
| CAN_CUT | 支持剪切。 |
| CAN_COPY | 支持拷贝。 |
| CAN_PASTE | 支持粘贴。 |
| CAN_SELECT_ALL | 支持全选。 |
## WebContextMenuParam9+
实现长按页面元素或鼠标右键弹出来的菜单信息。示例代码参考[onContextMenuShow事件](#oncontextmenushow9)。
### x9+
x(): number
弹出菜单的x坐标。
**返回值：**
| 类型 | 说明 |
| ------ | ------------------ |
| number | 显示正常返回非负整数，否则返回-1。 |
### y9+
y(): number
弹出菜单的y坐标。
**返回值：**
| 类型 | 说明 |
| ------ | ------------------ |
| number | 显示正常返回非负整数，否则返回-1。 |
### getLinkUrl9+
getLinkUrl(): string
获取链接地址。
**返回值：**
| 类型 | 说明 |
| ------ | ------------------------- |
| string | 如果长按位置是链接，返回经过安全检查的url链接。 |
### getUnfilteredLinkUrl9+
getUnfilteredLinkUrl(): string
获取链接地址。
**返回值：**
| 类型 | 说明 |
| ------ | --------------------- |
| string | 如果长按位置是链接，返回原始的url链接。 |
### getSourceUrl9+
getSourceUrl(): string
获取sourceUrl链接。
**返回值：**
| 类型 | 说明 |
| ------ | ------------------------ |
| string | 如果选中的元素有src属性，返回src的url。 |
### existsImageContents9+
existsImageContents(): boolean
是否存在图像内容。
**返回值：**
| 类型 | 说明 |
| ------- | ------------------------- |
| boolean | 长按位置中有图片返回true，否则返回false。 |
### getMediaType9+
getMediaType(): ContextMenuMediaType
获取网页元素媒体类型。
**返回值：**
| 类型 | 说明 |
| ---------------------------------------- | ----------- |
| [ContextMenuMediaType](#contextmenumediatype9枚举说明) | 网页元素媒体类型。 |
### getSelectionText9+
getSelectionText(): string
获取选中文本。
**返回值：**
| 类型 | 说明 |
| ------- | ------------------------- |
| string | 菜单上下文选中文本内容，不存在则返回空。 |
### getSourceType9+
getSourceType(): ContextMenuSourceType
获取菜单事件来源。
**返回值：**
| 类型 | 说明 |
| ---------------------------------------- | ----------- |
| [ContextMenuSourceType](#contextmenusourcetype9枚举说明) | 菜单事件来源。 |
### getInputFieldType9+
getInputFieldType(): ContextMenuInputFieldType
获取网页元素输入框类型。
**返回值：**
| 类型 | 说明 |
| ---------------------------------------- | ----------- |
| [ContextMenuInputFieldType](#contextmenuinputfieldtype9枚举说明) | 输入框类型。 |
### isEditable9+
isEditable(): boolean
获取网页元素是否可编辑标识。
**返回值：**
| 类型 | 说明 |
| ------- | ------------------------- |
| boolean | 网页元素可编辑返回true，不可编辑返回false。 |
### getEditStateFlags9+
getEditStateFlags(): number
获取网页元素可编辑标识。
**返回值：**
| 类型 | 说明 |
| ------- | ------------------------- |
| number | 网页元素可编辑标识，参照[ContextMenuEditStateFlags](#contextmenueditstateflags9枚举说明)。 |
## WebContextMenuResult9+
实现长按页面元素或鼠标右键弹出来的菜单所执行的响应事件。示例代码参考[onContextMenuShow事件](#oncontextmenushow9)。
### closeContextMenu9+
closeContextMenu(): void
不执行WebContextMenuResult其他接口操作时，需要调用此接口关闭菜单。
### copyImage9+
copyImage(): void
WebContextMenuParam有图片内容则复制图片。
### copy9+
copy(): void
执行与此上下文菜单相关的拷贝操作。
### paste9+
paste(): void
执行与此上下文菜单相关的粘贴操作。
### cut9+
cut(): void
执行与此上下文菜单相关的剪切操作。
### selectAll9+
selectAll(): void
执行与此上下文菜单相关的全选操作。
## JsGeolocation
Web组件返回授权或拒绝权限功能的对象。示例代码参考[onGeolocationShow事件](#ongeolocationshow)。
### invoke
invoke(origin: string, allow: boolean, retain: boolean): void
设置网页地理位置权限状态。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | ------- | ---- | ---- | ---------------------------------------- |
| origin | string | 是 | - | 指定源的字符串索引。 |
| allow | boolean | 是 | - | 设置的地理位置权限状态。 |
| retain | boolean | 是 | - | 是否允许将地理位置权限状态保存到系统中。可通过[GeolocationPermissions9+](../apis/js-apis-webview.md#geolocationpermissions)接口管理保存到系统的地理位置权限。 |
## MessageLevel枚举说明
| 名称 | 描述 |
| ----- | :---- |
| Debug | 调试级别。 |
| Error | 错误级别。 |
| Info | 消息级别。 |
| Log | 日志级别。 |
| Warn | 警告级别。 |
## RenderExitReason枚举说明
onRenderExited接口返回的渲染进程退出的具体原因。
| 名称 | 描述 |
| -------------------------- | ----------------- |
| ProcessAbnormalTermination | 渲染进程异常退出。 |
| ProcessWasKilled | 收到SIGKILL，或被手动终止。 |
| ProcessCrashed | 渲染进程崩溃退出，如段错误。 |
| ProcessOom | 程序内存不足。 |
| ProcessExitUnknown | 其他原因。 |
## MixedMode枚举说明
| 名称 | 描述 |
| ---------- | ---------------------------------- |
| All | 允许加载HTTP和HTTPS混合内容。所有不安全的内容都可以被加载。 |
| Compatible | 混合内容兼容性模式，部分不安全的内容可能被加载。 |
| None | 不允许加载HTTP和HTTPS混合内容。 |
## CacheMode枚举说明
| 名称 | 描述 |
| ------- | ------------------------------------ |
| Default | 使用未过期的cache加载资源，如果cache中无该资源则从网络中获取。 |
| None | 加载资源使用cache，如果cache中无该资源则从网络中获取。 |
| Online | 加载资源不使用cache，全部从网络中获取。 |
| Only | 只从cache中加载资源。 |
## FileSelectorMode枚举说明
| 名称 | 描述 |
| -------------------- | ---------- |
| FileOpenMode | 打开上传单个文件。 |
| FileOpenMultipleMode | 打开上传多个文件。 |
| FileOpenFolderMode | 打开上传文件夹模式。 |
| FileSaveMode | 文件保存模式。 |
## HitTestType枚举说明
| 名称 | 描述 |
| ------------- | ------------------------ |
| EditText | 可编辑的区域。 |
| Email | 电子邮件地址。 |
| HttpAnchor | 超链接，其src为http。 |
| HttpAnchorImg | 带有超链接的图片，其中超链接的src为http。 |
| Img | HTML::img标签。 |
| Map | 地理地址。 |
| Phone | 电话号码。 |
| Unknown | 未知内容。 |
## SslError9+枚举说明
onSslErrorEventReceive接口返回的SSL错误的具体原因。
| 名称 | 描述 |
| ------------ | ----------- |
| Invalid | 一般错误。 |
| HostMismatch | 主机名不匹配。 |
| DateInvalid | 证书日期无效。 |
| Untrusted | 证书颁发机构不受信任。 |
## ProtectedResourceType9+枚举说明
| 名称 | 描述 | 备注 |
| --------- | ------------- | -------------------------- |
| MidiSysex | MIDI SYSEX资源。 | 目前仅支持权限事件上报，MIDI设备的使用还未支持。 |
| VIDEO_CAPTURE10+ | 视频捕获资源，例如相机。 | |
| AUDIO_CAPTURE10+ | 音频捕获资源，例如麦克风。 | |
## WebDarkMode9+枚举说明
| 名称 | 描述 |
| ------- | ------------------------------------ |
| Off | Web深色模式关闭。 |
| On | Web深色模式开启。 |
| Auto | Web深色模式跟随系统。 |
## WebCaptureMode10+枚举说明
| 名称 | 描述 |
| --------- | ------------- |
| HOME_SCREEN | 主屏捕获模式。 |
## WebMediaOptions10+
Web媒体策略的配置。
| 名称 | 类型 | 可读 | 可写 | 必填 | 说明 |
| -------------- | --------- | ---- | ---- | --- | ---------------------------- |
| resumeInterval | number | 是 | 是 | 否 |被暂停的Web音频能够自动续播的有效期，单位：秒。最长有效期为60秒，由于近似值原因，该有效期可能存在一秒内的误差。 |
| audioExclusive | boolean | 是 | 是 | 否 | 应用内多个Web实例的音频是否独占。 |
## ScreenCaptureConfig10+
Web屏幕捕获的配置。
| 名称 | 类型 | 可读 | 可写 | 必填 | 说明 |
| -------------- | --------- | ---- | ---- | --- | ---------------------------- |
| captureMode | [WebCaptureMode](#webcapturemode10枚举说明) | 是 | 是 | 是 | Web屏幕捕获模式。 |
## DataResubmissionHandler9+
通过DataResubmissionHandler可以重新提交表单数据或取消提交表单数据。
### resend9+
resend(): void
重新发送表单数据。
**示例：**
```ts
// 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:'www.example.com', controller: this.controller })
.onDataResubmitted((event) => {
console.log('onDataResubmitted')
event.handler.resend();
})
}
}
}
```
### cancel9+
cancel(): void
取消重新发送表单数据。
**示例：**
```ts
// 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:'www.example.com', controller: this.controller })
.onDataResubmitted((event) => {
console.log('onDataResubmitted')
event.handler.cancel();
})
}
}
}
```
## WebController
通过WebController可以控制Web组件各种行为。一个WebController对象只能控制一个Web组件，且必须在Web组件和WebController绑定后，才能调用WebController上的方法。
从API version 9开始不再维护，建议使用[WebviewController9+](../apis/js-apis-webview.md#webviewcontroller)代替。
### 创建对象
```ts
let webController: WebController = new WebController()
```
### getCookieManager9+
getCookieManager(): WebCookie
获取web组件cookie管理对象。
**返回值：**
| 类型 | 说明 |
| --------- | ---------------------------------------- |
| WebCookie | web组件cookie管理对象，参考[WebCookie](#webcookiedeprecated)定义。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('getCookieManager')
.onClick(() => {
let cookieManager = this.controller.getCookieManager()
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### requestFocus(deprecated)
requestFocus()
使当前web页面获取焦点。
从API version 9开始不再维护，建议使用[requestFocus9+](../apis/js-apis-webview.md#requestfocus)代替。
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('requestFocus')
.onClick(() => {
this.controller.requestFocus()
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### accessBackward(deprecated)
accessBackward(): boolean
当前页面是否可后退，即当前页面是否有返回历史记录。
从API version 9开始不再维护，建议使用[accessBackward9+](../apis/js-apis-webview.md#accessbackward)代替。
**返回值：**
| 类型 | 说明 |
| ------- | --------------------- |
| boolean | 可以后退返回true,否则返回false。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('accessBackward')
.onClick(() => {
let result = this.controller.accessBackward()
console.log('result:' + result)
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### accessForward(deprecated)
accessForward(): boolean
当前页面是否可前进，即当前页面是否有前进历史记录。
从API version 9开始不再维护，建议使用[accessForward9+](../apis/js-apis-webview.md#accessforward)代替。
**返回值：**
| 类型 | 说明 |
| ------- | --------------------- |
| boolean | 可以前进返回true,否则返回false。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('accessForward')
.onClick(() => {
let result = this.controller.accessForward()
console.log('result:' + result)
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### accessStep(deprecated)
accessStep(step: number): boolean
当前页面是否可前进或者后退给定的step步。
从API version 9开始不再维护，建议使用[accessStep9+](../apis/js-apis-webview.md#accessstep)代替。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ------ | ---- | ---- | --------------------- |
| step | number | 是 | - | 要跳转的步数，正数代表前进，负数代表后退。 |
**返回值：**
| 类型 | 说明 |
| ------- | --------- |
| boolean | 页面是否前进或后退 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
@State steps: number = 2
build() {
Column() {
Button('accessStep')
.onClick(() => {
let result = this.controller.accessStep(this.steps)
console.log('result:' + result)
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### backward(deprecated)
backward(): void
按照历史栈，后退一个页面。一般结合accessBackward一起使用。
从API version 9开始不再维护，建议使用[backward9+](../apis/js-apis-webview.md#backward)代替。
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('backward')
.onClick(() => {
this.controller.backward()
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### forward(deprecated)
forward(): void
按照历史栈，前进一个页面。一般结合accessForward一起使用。
从API version 9开始不再维护，建议使用[forward9+](../apis/js-apis-webview.md#forward)代替。
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('forward')
.onClick(() => {
this.controller.forward()
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### deleteJavaScriptRegister(deprecated)
deleteJavaScriptRegister(name: string)
删除通过registerJavaScriptProxy注册到window上的指定name的应用侧JavaScript对象。删除后立即生效，无须调用[refresh](#refreshdeprecated)接口。
从API version 9开始不再维护，建议使用[deleteJavaScriptRegister9+](../apis/js-apis-webview.md#deletejavascriptregister)代替。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ------ | ---- | ---- | ---------------------------------------- |
| name | string | 是 | - | 注册对象的名称，可在网页侧JavaScript中通过此名称调用应用侧JavaScript对象。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
@State name: string = 'Object'
build() {
Column() {
Button('deleteJavaScriptRegister')
.onClick(() => {
this.controller.deleteJavaScriptRegister(this.name)
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### getHitTest(deprecated)
getHitTest(): HitTestType
获取当前被点击区域的元素类型。
从API version 9开始不再维护，建议使用[getHitTest9+](../apis/js-apis-webview.md#gethittest)代替。
**返回值：**
| 类型 | 说明 |
| ------------------------------- | ----------- |
| [HitTestType](#hittesttype枚举说明) | 被点击区域的元素类型。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('getHitTest')
.onClick(() => {
let hitType = this.controller.getHitTest()
console.log("hitType: " + hitType)
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### loadData(deprecated)
loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string })
baseUrl为空时，通过”data“协议加载指定的一段字符串。
当baseUrl为”data“协议时，编码后的data字符串将被Web组件作为”data"协议加载。
当baseUrl为“http/https"协议时，编码后的data字符串将被Web组件以类似loadUrl的方式以非编码字符串处理。
从API version 9开始不再维护，建议使用[loadData9+](../apis/js-apis-webview.md#loaddata)代替。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------ | ---- | ---- | ---------------------------------------- |
| data | string | 是 | - | 按照”Base64“或者”URL"编码后的一段字符串。 |
| mimeType | string | 是 | - | 媒体类型（MIME）。 |
| encoding | string | 是 | - | 编码类型，具体为“Base64"或者”URL编码。 |
| baseUrl | string | 否 | - | 指定的一个URL路径（“http”/“https”/"data"协议），并由Web组件赋值给window.origin。 |
| historyUrl | string | 否 | - | 历史记录URL。非空时，可被历史记录管理，实现前后后退功能。当baseUrl为空时，此属性无效。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('loadData')
.onClick(() => {
this.controller.loadData({
data: "Source:source
",
mimeType: "text/html",
encoding: "UTF-8"
})
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### loadUrl(deprecated)
loadUrl(options: { url: string | Resource, headers?: Array\ })
使用指定的http头加载指定的URL。
通过loadUrl注入的对象只在当前document有效，即通过loadUrl导航到新的页面会无效。
而通过registerJavaScriptProxy注入的对象，在loadUrl导航到新的页面也会有效。
从API version 9开始不再维护，建议使用[loadUrl9+](../apis/js-apis-webview.md#loadurl)代替。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------- | -------------------------- | ---- | ---- | -------------- |
| url | string | 是 | - | 需要加载的 URL。 |
| headers | Array\<[Header](#header)\> | 否 | [] | URL的附加HTTP请求头。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('loadUrl')
.onClick(() => {
this.controller.loadUrl({ url: 'www.example.com' })
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### onActive(deprecated)
onActive(): void
调用此接口通知Web组件进入前台激活状态。
从API version 9开始不再维护，建议使用[onActive9+](../apis/js-apis-webview.md#onactive)代替。
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('onActive')
.onClick(() => {
this.controller.onActive()
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### onInactive(deprecated)
onInactive(): void
调用此接口通知Web组件进入未激活状态。
从API version 9开始不再维护，建议使用[onInactive9+](../apis/js-apis-webview.md#oninactive)代替。
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('onInactive')
.onClick(() => {
this.controller.onInactive()
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### zoom(deprecated)
zoom(factor: number): void
调整当前网页的缩放比例。
从API version 9开始不再维护，建议使用[zoom9+](../apis/js-apis-webview.md#zoom)代替。
**参数：**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ------ | ---- | ------------------------------ |
| factor | number | 是 | 基于当前网页所需调整的相对缩放比例，正值为放大，负值为缩小。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
@State factor: number = 1
build() {
Column() {
Button('zoom')
.onClick(() => {
this.controller.zoom(this.factor)
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### refresh(deprecated)
refresh()
调用此接口通知Web组件刷新网页。
从API version 9开始不再维护，建议使用[refresh9+](../apis/js-apis-webview.md#refresh)代替。
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('refresh')
.onClick(() => {
this.controller.refresh()
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### registerJavaScriptProxy(deprecated)
registerJavaScriptProxy(options: { object: object, name: string, methodList: Array\ })
注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。注册后，须调用[refresh](#refreshdeprecated)接口生效。
从API version 9开始不再维护，建议使用[registerJavaScriptProxy9+](../apis/js-apis-webview.md#registerjavascriptproxy)代替。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | --------------- | ---- | ---- | ---------------------------------------- |
| object | object | 是 | - | 参与注册的应用侧JavaScript对象。只能声明方法，不能声明属性 。其中方法的参数和返回类型只能为string，number，boolean |
| name | string | 是 | - | 注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。 |
| methodList | Array\ | 是 | - | 参与注册的应用侧JavaScript对象的方法。 |
**示例：**
```ts
// xxx.ets
class TestObj {
constructor() {
}
test(): string {
return "ArkUI Web Component"
}
toString(): void {
console.log('Web Component toString')
}
}
@Entry
@Component
struct Index {
controller: WebController = new WebController()
testObj = new TestObj();
build() {
Column() {
Row() {
Button('Register JavaScript To Window').onClick(() => {
this.controller.registerJavaScriptProxy({
object: this.testObj,
name: "objName",
methodList: ["test", "toString"],
})
})
}
Web({ src: $rawfile('index.html'), controller: this.controller })
.javaScriptAccess(true)
}
}
}
```
加载的html文件。
```html
Hello world!
```
### runJavaScript(deprecated)
runJavaScript(options: { script: string, callback?: (result: string) => void })
异步执行JavaScript脚本，并通过回调方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。
从API version 9开始不再维护，建议使用[runJavaScript9+](../apis/js-apis-webview.md#runjavascript)代替。
**参数：**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------------------------ | ---- | ---- | ---------------------------------------- |
| script | string | 是 | - | JavaScript脚本。 |
| callback | (result: string) => void | 否 | - | 回调执行JavaScript脚本结果。JavaScript脚本若执行失败或无返回值时，返回null。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
@State webResult: string = ''
build() {
Column() {
Text(this.webResult).fontSize(20)
Web({ src: $rawfile('index.html'), controller: this.controller })
.javaScriptAccess(true)
.onPageEnd(e => {
this.controller.runJavaScript({
script: 'test()',
callback: (result: string)=> {
this.webResult = result
console.info(`The test() return value is: ${result}`)
}})
if (e) {
console.info('url: ', e.url)
}
})
}
}
}
```
加载的html文件。
```html
Hello world!
```
### stop(deprecated)
stop()
停止页面加载。
从API version 9开始不再维护，建议使用[stop9+](../apis/js-apis-webview.md#stop)代替。
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('stop')
.onClick(() => {
this.controller.stop()
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### clearHistory(deprecated)
clearHistory(): void
删除所有前进后退记录。
从API version 9开始不再维护，建议使用[clearHistory9+](../apis/js-apis-webview.md#clearhistory)代替。
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('clearHistory')
.onClick(() => {
this.controller.clearHistory()
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
## WebCookie(deprecated)
通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。
### setCookie(deprecated)
setCookie(): boolean
设置cookie，该方法为同步方法。设置成功返回true，否则返回false。
从API version 9开始不再维护，建议使用[setCookie9+](../apis/js-apis-webview.md#setcookie)代替。
**返回值：**
| 类型 | 说明 |
| ------- | ------------- |
| boolean | 设置cookie是否成功。 |
### saveCookie(deprecated)
saveCookie(): boolean
将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。
从API version 9开始不再维护，建议使用[saveCookieAsync9+](../apis/js-apis-webview.md#savecookieasync)代替。
**返回值：**
| 类型 | 说明 |
| ------- | -------------------- |
| boolean | 同步内存cookie到磁盘操作是否成功。 |