harmony 鸿蒙Web

2022-08-09
浏览 (1212)

Web

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

说明：

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

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

需要权限

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

子组件

无

接口

Web(options: { src: ResourceStr, controller: WebviewController|WebController})

说明：

不支持转场动画。同一页面的多个web组件，必须绑定不同的WebviewController。

参数：

参数名	参数类型	必填	参数描述
src	ResourceStr	是	网页资源地址。如果访问本地资源文件，请使用$rawfile或者resource协议。如果加载应用包外沙箱路径的本地资源文件，请使用file://沙箱文件路径。
controller	WebviewController⁹⁺ \|WebController	是	控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。

示例：

加载在线网页

  // 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 })
      }
    }
  }

加载本地网页

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

  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    build() {
      Column() {
        // 通过$rawfile加载本地资源文件。
        Web({ src: $rawfile("index.html"), 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() {
        // 通过resource协议加载本地资源文件。
        Web({ src: "resource://rawfile/index.html", controller: this.controller })
      }
    }
  }

加载沙箱路径下的本地资源文件

1.通过构造的单例对象GlobalContext获取沙箱路径。

  // GlobalContext.ts
  export class GlobalContext {
    private constructor() {}
    private static instance: GlobalContext;
    private _objects = new Map<string, Object>();

    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);
    }
  }

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  import { GlobalContext } from '../GlobalContext.ts'

  let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html'

  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    build() {
      Column() {
        // 加载沙箱路径文件。
        Web({ src: url, controller: this.controller })
      }
    }
  }

2.修改EntryAbility.ts。以filesDir为例，获取沙箱路径。若想获取其他路径，请参考应用文件路径。

  // xxx.ts
  import UIAbility from '@ohos.app.ability.UIAbility';
  import AbilityConstant from '@ohos.app.ability.AbilityConstant';
  import Want from '@ohos.app.ability.Want';
  import web_webview from '@ohos.web.webview';
  import { GlobalContext } from '../GlobalContext'

  export default class EntryAbility extends UIAbility {
      onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
          // 通过在GlobalContext对象上绑定filesDir，可以实现UIAbility组件与UI之间的数据同步。
          GlobalContext.getContext().setObject("filesDir", this.context.filesDir);
          console.log("Sandbox path is " + GlobalContext.getContext().getObject("filesDir"))
      }
  }

加载的html文件。

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

属性

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

domStorageAccess

domStorageAccess(domStorageAccess: boolean)

设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。

参数：

参数名	参数类型	必填	默认值	参数描述
domStorageAccess	boolean	是	false	设置是否开启文档对象模型存储接口（DOM Storage API）权限。

示例：

  // 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 })
          .domStorageAccess(true)
      }
    }
  }

fileAccess

fileAccess(fileAccess: boolean)

设置是否开启应用中文件系统的访问，默认启用。$rawfile(filepath/filename)中rawfile路径的文件不受该属性影响而限制访问。

参数：

参数名	参数类型	必填	默认值	参数描述
fileAccess	boolean	是	true	设置是否开启应用中文件系统的访问，默认启用。

示例：

  // 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 })
          .fileAccess(true)
      }
    }
  }

imageAccess

imageAccess(imageAccess: boolean)

设置是否允许自动加载图片资源，默认允许。

参数：

参数名	参数类型	必填	默认值	参数描述
imageAccess	boolean	是	true	设置是否允许自动加载图片资源。

示例：

  // 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 })
          .imageAccess(true)
      }
    }
  }

javaScriptProxy

javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array<string>, controller: WebviewController|WebController})

注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。此接口只支持注册一个对象，若需要注册多个对象请使用registerJavaScriptProxy⁹⁺。

参数：

参数名	参数类型	必填	默认值	参数描述
object	object	是	-	参与注册的对象。只能声明方法，不能声明属性。
name	string	是	-	注册对象的名称，与window中调用的对象名一致。
methodList	Array<string>	是	-	参与注册的应用侧JavaScript对象的方法。
controller	WebviewController⁹⁺ \|WebController	是	-	控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。

示例：

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

  class TestObj {
    constructor() {
    }

    test(data1: string, data2: string, data3: string): string {
      console.log("data1:" + data1)
      console.log("data2:" + data2)
      console.log("data3:" + data3)
      return "AceString"
    }

    toString(): void {
      console.log('toString' + "interface instead.")
    }
  }

  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    testObj = new TestObj();
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .javaScriptAccess(true)
          .javaScriptProxy({
            object: this.testObj,
            name: "objName",
            methodList: ["test", "toString"],
            controller: this.controller,
        })
      }
    }
  }

javaScriptAccess

javaScriptAccess(javaScriptAccess: boolean)

设置是否允许执行JavaScript脚本，默认允许执行。

参数：

参数名	参数类型	必填	默认值	参数描述
javaScriptAccess	boolean	是	true	是否允许执行JavaScript脚本。

示例：

  // 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 })
          .javaScriptAccess(true)
      }
    }
  }

mixedMode

mixedMode(mixedMode: MixedMode)

设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。

参数：

参数名	参数类型	必填	默认值	参数描述
mixedMode	MixedMode	是	MixedMode.None	要设置的混合内容。

示例：

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

  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State mode: MixedMode = MixedMode.All
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .mixedMode(this.mode)
      }
    }
  }

onlineImageAccess

onlineImageAccess(onlineImageAccess: boolean)

设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。

参数：

参数名	参数类型	必填	默认值	参数描述
onlineImageAccess	boolean	是	true	设置是否允许从网络加载图片资源。

示例：

  // 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 })
          .onlineImageAccess(true)
      }
    }
  }

zoomAccess

zoomAccess(zoomAccess: boolean)

设置是否支持手势进行缩放，默认允许执行缩放。

参数：

参数名	参数类型	必填	默认值	参数描述
zoomAccess	boolean	是	true	设置是否支持手势进行缩放。

示例：

  // 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 })
          .zoomAccess(true)
      }
    }
  }

overviewModeAccess

overviewModeAccess(overviewModeAccess: boolean)

设置是否使用概览模式加载网页，默认使用该方式。当前仅支持移动设备。

参数：

参数名	参数类型	必填	默认值	参数描述
overviewModeAccess	boolean	是	true	设置是否使用概览模式加载网页。

示例：

  // 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 })
          .overviewModeAccess(true)
      }
    }
  }

databaseAccess

databaseAccess(databaseAccess: boolean)

设置是否开启数据库存储API权限，默认不开启。

参数：

参数名	参数类型	必填	默认值	参数描述
databaseAccess	boolean	是	false	设置是否开启数据库存储API权限。

示例：

  // 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 })
          .databaseAccess(true)
      }
    }
  }

geolocationAccess

geolocationAccess(geolocationAccess: boolean)

设置是否开启获取地理位置权限，默认开启。

参数：

参数名	参数类型	必填	默认值	参数描述
geolocationAccess	boolean	是	true	设置是否开启获取地理位置权限。

示例：

  // 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)
      }
    }
  }

mediaPlayGestureAccess

mediaPlayGestureAccess(access: boolean)

设置有声视频播放是否需要用户手动点击，静音视频播放不受该接口管控，默认需要。

参数：

参数名	参数类型	必填	默认值	参数描述
access	boolean	是	true	设置有声视频播放是否需要用户手动点击。

示例：

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

  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State access: boolean = true
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .mediaPlayGestureAccess(this.access)
      }
    }
  }

multiWindowAccess⁹⁺

multiWindowAccess(multiWindow: boolean)

设置是否开启多窗口权限，默认不开启。使能多窗口权限时，需要实现onWindowNew事件，示例代码参考onWindowNew事件。

参数：

参数名	参数类型	必填	默认值	参数描述
multiWindow	boolean	是	false	设置是否开启多窗口权限。

示例：

  // 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 })
        .multiWindowAccess(false)
      }
    }
  }

horizontalScrollBarAccess⁹⁺

horizontalScrollBarAccess(horizontalScrollBar: boolean)

设置是否显示横向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。

参数：

参数名	参数类型	必填	默认值	参数描述
horizontalScrollBar	boolean	是	true	设置是否显示横向滚动条。

示例：

  // 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 })
        .horizontalScrollBarAccess(true)
      }
    }
  }

加载的html文件。

  <!--index.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>

verticalScrollBarAccess⁹⁺

verticalScrollBarAccess(verticalScrollBar: boolean)

设置是否显示纵向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。

参数：

参数名	参数类型	必填	默认值	参数描述
verticalScrollBar	boolean	是	true	设置是否显示纵向滚动条。

示例：

  // 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 })
        .verticalScrollBarAccess(true)
      }
    }
  }

加载的html文件。

  <!--index.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>

password^(deprecated)

password(password: boolean)

设置是否应保存密码。该接口为空接口。

说明：

从API version 10开始废弃，并且不再提供新的接口作为替代。

cacheMode

cacheMode(cacheMode: CacheMode)

设置缓存模式。

参数：

参数名	参数类型	必填	默认值	参数描述
cacheMode	CacheMode	是	CacheMode.Default	要设置的缓存模式。

示例：

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

  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State mode: CacheMode = CacheMode.None
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .cacheMode(this.mode)
      }
    }
  }

textZoomAtio^(deprecated)

textZoomAtio(textZoomAtio: number)

设置页面的文本缩放百分比，默认为100%。

从API version 9开始不再维护，建议使用textZoomRatio⁹⁺代替。

参数：

参数名	参数类型	必填	默认值	参数描述
textZoomAtio	number	是	100	要设置的页面的文本缩放百分比。取值为整数，范围为(0, +∞)。

示例：

  // xxx.ets
  @Entry
  @Component
  struct WebComponent {
    controller: WebController = new WebController()
    @State atio: number = 150
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .textZoomAtio(this.atio)
      }
    }
  }

textZoomRatio⁹⁺

textZoomRatio(textZoomRatio: number)

设置页面的文本缩放百分比，默认为100%。

参数：

参数名	参数类型	必填	默认值	参数描述
textZoomRatio	number	是	100	要设置的页面的文本缩放百分比。取值为整数，范围为(0, +∞)。

示例：

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

  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State atio: number = 150
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .textZoomRatio(this.atio)
      }
    }
  }

initialScale⁹⁺

initialScale(percent: number)

设置整体页面的缩放百分比，默认为100。

参数：

参数名	参数类型	必填	默认值	参数描述
percent	number	是	100	要设置的整体页面的缩放百分比。取值范围：1-100

示例：

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

  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State percent: number = 100
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .initialScale(this.percent)
      }
    }
  }

userAgent^(deprecated)

userAgent(userAgent: string)

设置用户代理。

说明：

从API version 8开始支持，从API version 10开始废弃。建议使用setCustomUserAgent¹⁰⁺替代。

参数：

参数名	参数类型	必填	默认值	参数描述
userAgent	string	是	-	要设置的用户代理。

示例：

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

  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36'
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .userAgent(this.userAgent)
      }
    }
  }

blockNetwork⁹⁺

blockNetwork(block: boolean)

设置Web组件是否阻止从网络加载资源。

参数：

参数名	参数类型	必填	默认值	参数描述
block	boolean	是	false	设置Web组件是否阻止从网络加载资源。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State block: boolean = true
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .blockNetwork(this.block)
      }
    }
  }

defaultFixedFontSize⁹⁺

defaultFixedFontSize(size: number)

设置网页的默认等宽字体大小。

参数：

参数名	参数类型	必填	默认值	参数描述
size	number	是	13	设置网页的默认等宽字体大小，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State fontSize: number = 16
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .defaultFixedFontSize(this.fontSize)
      }
    }
  }

defaultFontSize⁹⁺

defaultFontSize(size: number)

设置网页的默认字体大小。

参数：

参数名	参数类型	必填	默认值	参数描述
size	number	是	16	设置网页的默认字体大小，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State fontSize: number = 13
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .defaultFontSize(this.fontSize)
      }
    }
  }

minFontSize⁹⁺

minFontSize(size: number)

设置网页字体大小最小值。

参数：

参数名	参数类型	必填	默认值	参数描述
size	number	是	8	设置网页字体大小最小值，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State fontSize: number = 13
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .minFontSize(this.fontSize)
      }
    }
  }

minLogicalFontSize⁹⁺

minLogicalFontSize(size: number)

设置网页逻辑字体大小最小值。

参数：

参数名	参数类型	必填	默认值	参数描述
size	number	是	8	设置网页逻辑字体大小最小值，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State fontSize: number = 13
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .minLogicalFontSize(this.fontSize)
      }
    }
  }

webFixedFont⁹⁺

webFixedFont(family: string)

设置网页的fixed font字体库。

参数：

参数名	参数类型	必填	默认值	参数描述
family	string	是	monospace	设置网页的fixed font字体库。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State family: string = "monospace"
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .webFixedFont(this.family)
      }
    }
  }

webSansSerifFont⁹⁺

webSansSerifFont(family: string)

设置网页的sans serif font字体库。

参数：

参数名	参数类型	必填	默认值	参数描述
family	string	是	sans-serif	设置网页的sans serif font字体库。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State family: string = "sans-serif"
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .webSansSerifFont(this.family)
      }
    }
  }

webSerifFont⁹⁺

webSerifFont(family: string)

设置网页的serif font字体库。

参数：

参数名	参数类型	必填	默认值	参数描述
family	string	是	serif	设置网页的serif font字体库。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State family: string = "serif"
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .webSerifFont(this.family)
      }
    }
  }

webStandardFont⁹⁺

webStandardFont(family: string)

设置网页的standard font字体库。

参数：

参数名	参数类型	必填	默认值	参数描述
family	string	是	sans serif	设置网页的standard font字体库。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State family: string = "sans-serif"
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .webStandardFont(this.family)
      }
    }
  }

webFantasyFont⁹⁺

webFantasyFont(family: string)

设置网页的fantasy font字体库。

参数：

参数名	参数类型	必填	默认值	参数描述
family	string	是	fantasy	设置网页的fantasy font字体库。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State family: string = "fantasy"
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .webFantasyFont(this.family)
      }
    }
  }

webCursiveFont⁹⁺

webCursiveFont(family: string)

设置网页的cursive font字体库。

参数：

参数名	参数类型	必填	默认值	参数描述
family	string	是	cursive	设置网页的cursive font字体库。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State family: string = "cursive"
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .webCursiveFont(this.family)
      }
    }
  }

darkMode⁹⁺

darkMode(mode: WebDarkMode)

设置Web深色模式，默认关闭。当深色模式开启时，Web将启用媒体查询prefers-color-scheme中网页所定义的深色样式，若网页未定义深色样式，则保持原状。如需开启强制深色模式，建议配合forceDarkAccess使用。

参数：

参数名	参数类型	必填	默认值	参数描述
mode	WebDarkMode	是	WebDarkMode.Off	设置Web的深色模式为关闭、开启或跟随系统。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State mode: WebDarkMode = WebDarkMode.On
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .darkMode(this.mode)
      }
    }
  }

forceDarkAccess⁹⁺

forceDarkAccess(access: boolean)

设置网页是否开启强制深色模式。默认关闭。该属性仅在darkMode开启深色模式时生效。

参数：

参数名	参数类型	必填	默认值	参数描述
access	boolean	是	false	设置网页是否开启强制深色模式。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State mode: WebDarkMode = WebDarkMode.On
    @State access: boolean = true
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .darkMode(this.mode)
          .forceDarkAccess(this.access)
      }
    }
  }

tableData^(deprecated)

tableData(tableData: boolean)

设置是否应保存表单数据。该接口为空接口。

说明：

从API version 10开始废弃，并且不再提供新的接口作为替代。

wideViewModeAccess^(deprecated)

wideViewModeAccess(wideViewModeAccess: boolean)

设置web是否支持html中meta标签的viewport属性。该接口为空接口。

说明：

从API version 10开始废弃，并且不再提供新的接口作为替代。

pinchSmooth⁹⁺

pinchSmooth(isEnabled: boolean)

设置网页是否开启捏合流畅模式，默认不开启。

参数：

参数名	参数类型	必填	默认值	参数描述
isEnabled	boolean	是	false	网页是否开启捏合流畅模式。

示例：

  // 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 })
          .pinchSmooth(true)
      }
    }
  }

allowWindowOpenMethod¹⁰⁺

allowWindowOpenMethod(flag: boolean)

设置网页是否可以通过JavaScript自动打开新窗口。

该属性为true时，可通过JavaScript自动打开新窗口。该属性为false时，用户行为仍可通过JavaScript自动打开新窗口，但非用户行为不能通过JavaScript自动打开新窗口。此处的用户行为是指用户在5秒内请求打开新窗口（window.open）。

该属性仅在javaScriptAccess开启时生效。

该属性在multiWindowAccess开启时打开新窗口，关闭时打开本地窗口。

该属性的默认值与系统属性persist.web.allowWindowOpenMethod.enabled 保持一致，如果未设置系统属性则默认值为false。

检查系统配置项persist.web.allowWindowOpenMethod.enabled 是否开启。

通过hdc shell param get persist.web.allowWindowOpenMethod.enabled 查看，若配置项为0或不存在，可通过命令hdc shell param set persist.web.allowWindowOpenMethod.enabled 1 开启配置。

参数：

参数名	参数类型	必填	默认值	参数描述
flag	boolean	是	默认值与系统参数关联，当系统参数persist.web.allowWindowOpenMethod.enabled为true时，默认值为true, 否则为false	网页是否可以通过JavaScript自动打开窗口。

示例：

  // 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)
          })
      }
    }
  }

mediaOptions¹⁰⁺

mediaOptions(options: WebMediaOptions)

设置Web媒体播放的策略，其中包括：Web中的音频在重新获焦后能够自动续播的有效期、应用内多个Web实例的音频是否独占。

说明：

同一Web实例中的多个音频均视为同一音频。

该媒体播放策略将同时管控有声视频。

属性参数更新后需重新播放音频方可生效。

建议为所有Web组件设置相同的audioExclusive值。

参数：

参数名	参数类型	必填	默认值	参数描述
options	WebMediaOptions	是	{resumeInterval: 0, audioExclusive: true}	设置Web的媒体策略。其中，resumeInterval的默认值为0表示不自动续播。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    @State options: WebMediaOptions = {resumeInterval: 10, audioExclusive: true}
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .mediaOptions(this.options)
      }
    }
  }

事件

不支持通用事件。

onAlert

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

网页触发alert()告警弹窗时触发回调。

参数：

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

返回值：

类型	说明
boolean	当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，web组件暂不支持触发默认弹窗。

示例：

  // 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 })
          .onAlert((event) => {
            if (event) {
              console.log("event.url:" + event.url)
              console.log("event.message:" + event.message)
              AlertDialog.show({
                title: 'onAlert',
                message: 'text',
                primaryButton: {
                  value: 'cancel',
                  action: () => {
                    event.result.handleCancel()
                  }
                },
                secondaryButton: {
                  value: 'ok',
                  action: () => {
                    event.result.handleConfirm()
                  }
                },
                cancel: () => {
                  event.result.handleCancel()
                }
              })
            }
            return true
          })
      }
    }
  }

加载的html文件。

  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
  </head>
  <body>
    <h1>WebView onAlert Demo</h1>
    <button onclick="myFunction()">Click here</button>
    <script>
      function myFunction() {
        alert("Hello World");
      }
    </script>
  </body>
  </html>

onBeforeUnload

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

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

参数：

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

返回值：

类型	说明
boolean	当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，web组件暂不支持触发默认弹窗。

示例：

  // 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 })
          .onBeforeUnload((event) => {
            if (event) {
              console.log("event.url:" + event.url)
              console.log("event.message:" + event.message)
              AlertDialog.show({
                title: 'onBeforeUnload',
                message: 'text',
                primaryButton: {
                  value: 'cancel',
                  action: () => {
                    event.result.handleCancel()
                  }
                },
                secondaryButton: {
                  value: 'ok',
                  action: () => {
                    event.result.handleConfirm()
                  }
                },
                cancel: () => {
                  event.result.handleCancel()
                }
              })
            }
            return true
          })
      }
    }
  }

加载的html文件。

  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
  </head>
  <body onbeforeunload="return myFunction()">
    <h1>WebView onBeforeUnload Demo</h1>
    <a href="https://www.example.com">Click here</a>
    <script>
      function myFunction() {
        return "onBeforeUnload Event";
      }
    </script>
  </body>
  </html>

onConfirm

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

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

参数：

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

返回值：

类型	说明
boolean	当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回false时，web组件暂不支持触发默认弹窗。

示例：

  // 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 })
          .onConfirm((event) => {
            if (event) {
              console.log("event.url:" + event.url)
              console.log("event.message:" + event.message)
              AlertDialog.show({
                title: 'onConfirm',
                message: 'text',
                primaryButton: {
                  value: 'cancel',
                  action: () => {
                    event.result.handleCancel()
                  }
                },
                secondaryButton: {
                  value: 'ok',
                  action: () => {
                    event.result.handleConfirm()
                  }
                },
                cancel: () => {
                  event.result.handleCancel()
                }
              })
            }
            return true
          })
      }
    }
  }

加载的html文件。

  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
  </head>

  <body>
    <h1>WebView onConfirm Demo</h1>
    <button onclick="myFunction()">Click here</button>
    <p id="demo"></p>
    <script>
      function myFunction() {
        let x;
        let r = confirm("click button!");
        if (r == true) {
          x = "ok";
        } else {
          x = "cancel";
        }
        document.getElementById("demo").innerHTML = x;
      }
    </script>
  </body>
  </html>

onPrompt⁹⁺

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

参数：

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

返回值：

类型	说明
boolean	当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。当回调返回false时，web组件暂不支持触发默认弹窗。

示例：

  // 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 })
          .onPrompt((event) => {
            if (event) {
              console.log("url:" + event.url)
              console.log("message:" + event.message)
              console.log("value:" + event.value)
              AlertDialog.show({
                title: 'onPrompt',
                message: 'text',
                primaryButton: {
                  value: 'cancel',
                  action: () => {
                    event.result.handleCancel()
                  }
                },
                secondaryButton: {
                  value: 'ok',
                  action: () => {
                    event.result.handlePromptConfirm(event.value)
                  }
                },
                cancel: () => {
                  event.result.handleCancel()
                }
              })
            }
            return true
          })
      }
    }
  }

加载的html文件。

  <!--index.html-->
  <!DOCTYPE html>
  <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
  </head>

  <body>
    <h1>WebView onPrompt Demo</h1>
    <button onclick="myFunction()">Click here</button>
    <p id="demo"></p>
    <script>
      function myFunction() {
        let message = prompt("Message info", "Hello World");
        if (message != null && message != "") {
          document.getElementById("demo").innerHTML = message;
        }
      }
    </script>
  </body>
  </html>

onConsole

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

通知宿主应用JavaScript console消息。

参数：

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

返回值：

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

示例：

  // 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 })
          .onConsole((event) => {
            if (event) {
              console.log('getMessage:' + event.message.getMessage())
              console.log('getSourceId:' + event.message.getSourceId())
              console.log('getLineNumber:' + event.message.getLineNumber())
              console.log('getMessageLevel:' + event.message.getMessageLevel())
            }
            return false
          })
      }
    }
  }

onDownloadStart

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

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

参数：

参数名	参数类型	参数描述
url	string	文件下载的URL。
userAgent	string	用于下载的用户代理。
contentDisposition	string	服务器返回的 Content-Disposition响应头，可能为空。
mimetype	string	服务器返回内容媒体类型（MIME）信息。
contentLength	number	服务器返回文件的长度。

示例：

  // 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 })
          .onDownloadStart((event) => {
            if (event) {
              console.log('url:' + event.url)
              console.log('userAgent:' + event.userAgent)
              console.log('contentDisposition:' + event.contentDisposition)
              console.log('contentLength:' + event.contentLength)
              console.log('mimetype:' + event.mimetype)
            }
          })
      }
    }
  }

onErrorReceive

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

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

参数：

参数名	参数类型	参数描述
request	WebResourceRequest	网页请求的封装信息。
error	WebResourceError	网页加载资源错误的封装信息。

示例：

  // 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 })
          .onErrorReceive((event) => {
            if (event) {
              console.log('getErrorInfo:' + event.error.getErrorInfo())
              console.log('getErrorCode:' + event.error.getErrorCode())
              console.log('url:' + event.request.getRequestUrl())
              console.log('isMainFrame:' + event.request.isMainFrame())
              console.log('isRedirect:' + event.request.isRedirect())
              console.log('isRequestGesture:' + event.request.isRequestGesture())
              console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString())
              let result = event.request.getRequestHeader()
              console.log('The request header result size is ' + result.length)
              for (let i of result) {
                console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue)
              }
            }
          })
      }
    }
  }

onHttpErrorReceive

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

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

参数：

参数名	参数类型	参数描述
request	WebResourceRequest	网页请求的封装信息。
response	WebResourceResponse	资源响应的封装信息。

示例：

  // 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 })
          .onHttpErrorReceive((event) => {
            if (event) {
              console.log('url:' + event.request.getRequestUrl())
              console.log('isMainFrame:' + event.request.isMainFrame())
              console.log('isRedirect:' + event.request.isRedirect())
              console.log('isRequestGesture:' + event.request.isRequestGesture())
              console.log('getResponseData:' + event.response.getResponseData())
              console.log('getResponseEncoding:' + event.response.getResponseEncoding())
              console.log('getResponseMimeType:' + event.response.getResponseMimeType())
              console.log('getResponseCode:' + event.response.getResponseCode())
              console.log('getReasonMessage:' + event.response.getReasonMessage())
              let result = event.request.getRequestHeader()
              console.log('The request header result size is ' + result.length)
              for (let i of result) {
                console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
              }
              let resph = event.response.getResponseHeader()
              console.log('The response header result size is ' + resph.length)
              for (let i of resph) {
                console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
              }
            }
          })
      }
    }
  }

onPageBegin

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

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

参数：

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

示例：

  // 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 })
          .onPageBegin((event) => {
            if (event) {
              console.log('url:' + event.url)
            }
          })
      }
    }
  }

onPageEnd

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

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

参数：

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

示例：

  // 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 })
          .onPageEnd((event) => {
            if (event) {
              console.log('url:' + event.url)
            }
          })
      }
    }
  }

onProgressChange

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

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

参数：

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

示例：

  // 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 })
          .onProgressChange((event) => {
            if (event) {
              console.log('newProgress:' + event.newProgress)
            }
          })
      }
    }
  }

onTitleReceive

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

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

参数：

参数名	参数类型	参数描述
title	string	document标题内容。

示例：

  // 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 })
          .onTitleReceive((event) => {
            if (event) {
              console.log('title:' + event.title)
            }
          })
      }
    }
  }

onRefreshAccessedHistory

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

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

参数：

参数名	参数类型	参数描述
url	string	访问的url。
isRefreshed	boolean	true表示该页面是被重新加载的（调用refresh⁹⁺接口），false表示该页面是新加载的。

示例：

  // 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 })
          .onRefreshAccessedHistory((event) => {
            if (event) {
              console.log('url:' + event.url + ' isReload:' + event.isRefreshed)
            }
          })
      }
    }
  }

onSslErrorReceive^(deprecated)

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

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

说明：

从API version 8开始支持，从API version 9开始废弃。建议使用onSslErrorEventReceive⁹⁺替代。

onFileSelectorShow^(deprecated)

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

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

说明：

从API version 8开始支持，从API version 9开始废弃。建议使用onShowFileSelector⁹⁺替代。

onRenderExited⁹⁺

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

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

参数：

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

示例：

  // 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: 'chrome://crash/', controller: this.controller })
          .onRenderExited((event) => {
            if (event) {
              console.log('reason:' + event.renderExitReason)
            }
          })
      }
    }
  }

onShowFileSelector⁹⁺

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

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

参数：

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

返回值：

类型	说明
boolean	当返回值为true时，用户可以调用系统提供的弹窗能力。当回调返回false时，web组件暂不支持触发默认弹窗。

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview';
  import picker from '@ohos.file.picker';
  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 })
          .onShowFileSelector((event) => {
            console.log('MyFileUploader onShowFileSelector invoked')
            const documentSelectOptions = new picker.DocumentSelectOptions();
            let uri: string|null = null;
            const documentViewPicker = new picker.DocumentViewPicker();
            documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
              uri = documentSelectResult[0];
              console.info('documentViewPicker.select to file succeed and uri is:' + uri);
              if (event) {
                event.result.handleFileList([uri]);
              }
            }).catch((err: BusinessError) => {
              console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
            })
            return true
          })
      }
    }
  }

加载的html文件。

  <!DOCTYPE html>
  <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
  </head>
  <body>
    <form id="upload-form" enctype="multipart/form-data">
      <input type="file" id="upload" name="upload"/>
      </form>
  </body>
  </html>

onResourceLoad⁹⁺

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

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

参数：

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

示例：

  // 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 })
          .onResourceLoad((event) => {
            console.log('onResourceLoad: ' + event.url)
          })
      }
    }
  }

onScaleChange⁹⁺

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

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

参数：

参数名	参数类型	参数描述
oldScale	number	变化前的显示比例百分比。
newScale	number	变化后的显示比例百分比。

示例：

  // 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 })
          .onScaleChange((event) => {
            console.log('onScaleChange changed from ' + event.oldScale + ' to ' + event.newScale)
          })
      }
    }
  }

onUrlLoadIntercept^(deprecated)

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

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

参数：

参数名	参数类型	参数描述
data	string \|WebResourceRequest	url的相关信息。

返回值：

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

示例：

  // 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 })
          .onUrlLoadIntercept((event) => {
            if (event) {
              console.log('onUrlLoadIntercept ' + event.data.toString())
            }
            return true
          })
      }
    }
  }

onInterceptRequest⁹⁺

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

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

参数：

参数名	参数类型	参数描述
request	WebResourceRequest	url请求的相关信息。

返回值：

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

示例：

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

  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    responseweb: WebResourceResponse = new WebResourceResponse()
    heads:Header[] = new Array()
    @State webdata: string = "<!DOCTYPE html>\n" +
    "<html>\n"+
    "<head>\n"+
    "<title>intercept test</title>\n"+
    "</head>\n"+
    "<body>\n"+
    "<h1>intercept test</h1>\n"+
    "</body>\n"+
    "</html>"
    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .onInterceptRequest((event) => {
            if (event) {
              console.log('url:' + event.request.getRequestUrl())
            }
            let head1:Header = {
              headerKey:"Connection",
              headerValue:"keep-alive"
            }
            let head2:Header = {
              headerKey:"Cache-Control",
              headerValue:"no-cache"
            }
            let length = this.heads.push(head1)
            length = this.heads.push(head2)
            this.responseweb.setResponseHeader(this.heads)
            this.responseweb.setResponseData(this.webdata)
            this.responseweb.setResponseEncoding('utf-8')
            this.responseweb.setResponseMimeType('text/html')
            this.responseweb.setResponseCode(200)
            this.responseweb.setReasonMessage('OK')
            return this.responseweb
          })
      }
    }
  }

onHttpAuthRequest⁹⁺

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

通知收到http auth认证请求。

参数：

参数名	参数类型	参数描述
handler	HttpAuthHandler	通知Web组件用户操作行为。
host	string	HTTP身份验证凭据应用的主机。
realm	string	HTTP身份验证凭据应用的域。

返回值：

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

示例：

  // xxx.ets
  import web_webview from '@ohos.web.webview'
  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    httpAuth: boolean = false

    build() {
      Column() {
        Web({ src: 'www.example.com', controller: this.controller })
          .onHttpAuthRequest((event) => {
            if (event) {
              AlertDialog.show({
                title: 'onHttpAuthRequest',
                message: 'text',
                primaryButton: {
                  value: 'cancel',
                  action: () => {
                    event.handler.cancel()
                  }
                },
                secondaryButton: {
                  value: 'ok',
                  action: () => {
                    this.httpAuth = event.handler.isHttpAuthInfoSaved()
                    if (this.httpAuth == false) {
                      web_webview.WebDataBase.saveHttpAuthCredentials(
                        event.host,
                        event.realm,
                        "2222",
                        "2222"
                      )
                      event.handler.cancel()
                    }
                  }
                },
                cancel: () => {
                  event.handler.cancel()
                }
              })
            }
            return true
          })
      }
    }
  }

onSslErrorEventReceive⁹⁺

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

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

参数：

参数名	参数类型	参数描述
handler	SslErrorHandler	通知Web组件用户操作行为。
error	SslError	错误码。

示例：

  // 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 })
          .onSslErrorEventReceive((event) => {
            AlertDialog.show({
              title: 'onSslErrorEventReceive',
              message: 'text',
              primaryButton: {
                value: 'confirm',
                action: () => {
                  event.handler.handleConfirm()
                }
              },
              secondaryButton: {
                value: 'cancel',
                action: () => {
                  event.handler.handleCancel()
                }
              },
              cancel: () => {
                event.handler.handleCancel()
              }
            })
          })
      }
    }
  }

onClientAuthenticationRequest⁹⁺

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

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

参数：

参数名	参数类型	参数描述
handler	ClientAuthenticationHandler	通知Web组件用户操作行为。
host	string	请求证书服务器的主机名。
port	number	请求证书服务器的端口号。
keyTypes	Array	可接受的非对称秘钥类型。
issuers	Array	与私钥匹配的证书可接受颁发者。

示例： 未对接证书管理的双向认证

  // xxx.ets API9
  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 })
          .onClientAuthenticationRequest((event) => {
            AlertDialog.show({
              title: 'onClientAuthenticationRequest',
              message: 'text',
              primaryButton: {
                value: 'confirm',
                action: () => {
                  event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem")
                }
              },
              secondaryButton: {
                value: 'cancel',
                action: () => {
                  event.handler.cancel()
                }
              },
              cancel: () => {
                event.handler.ignore()
              }
            })
          })
      }
    }
  }

对接证书管理的双向认证

构造单例对象GlobalContext。

// GlobalContext.ts
export class GlobalContext {
private constructor() {}
private static instance: GlobalContext;
private _objects = new Map<string, Object>();


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);
}
}

实现双向认证。 “`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%')
}

}


### onPermissionRequest<sup>9+</sup>

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文件。

  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
  <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
  <canvas id="canvas" width="500px" height="500px"></canvas>
  <br>
  <input type="button" title="HTML5摄像头" value="开启摄像头" onclick="getMedia()"/>
  <script>
    function getMedia()
    {
      let constraints = {
        video: {width: 500, height: 500},
        audio: true
      };
      //获取video摄像头区域
      let video = document.getElementByld("video");
      //返回的Promise对象
      let promise = navigator.mediaDevices.getUserMedia(constraints);
      //then()异步，调用MediaStream对象作为参数
      promise.then(function (MediaStream) {
        video.srcObject = MediaStream;
        video.play();
      });
    }
  </script>
  </body>
  </html>

onContextMenuShow⁹⁺

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

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

参数：

参数名	参数类型	参数描述
param	WebContextMenuParam	菜单相关参数。
result	WebContextMenuResult	菜单相应事件传入内核。

返回值：

类型	说明
boolean	自定义菜单返回true，默认菜单返回false。

示例：

  // 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
        })
      }
    }
  }

onScroll⁹⁺

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

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

参数：

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

示例：

  // 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	通知Web组件用户操作行为。

示例：

  // 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文件。

  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
  <p id="demo">点击按钮获取您当前坐标 （可能需要比较长的时间获取）：</p>
  <button onclick="getLocation()">点我</button>
  <script>
    var x=document.grtElementByld("demo");
    function getLocation()
    {
      if (navigator.geolocation)
      {
        navigator.geolocation.getCurrentPosition(showPosition);
      }
      else
      {
        x.innerHTML="该浏览器不支持获取地理位置。";
      }
    }

    function showPosition(position)
    {
      x.innerHTML="纬度：" + position.coords.latitude + "经度：" + position.coords.longitude;
    }
  </script>
  </body>
  </html>

onGeolocationHide

onGeolocationHide(callback: () => void)

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

参数：

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

示例：

  // 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...")
        })
      }
    }
  }

onFullScreenEnter⁹⁺

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

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

参数：

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

示例：

  // 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
        })
      }
    }
  }

onFullScreenExit⁹⁺

onFullScreenExit(callback: () => void)

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

参数：

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

示例：

  // 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
        })
      }
    }
  }

onWindowNew⁹⁺

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	用于设置新建窗口的WebviewController实例。

示例：

  // 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)
          })
      }
    }
  }

onWindowExit⁹⁺

onWindowExit(callback: () => void)

通知用户窗口关闭请求。

参数：

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

示例：

  // 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...")
        })
      }
    }
  }

onSearchResultReceive⁹⁺

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

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

参数：

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

示例：

  // 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)
     	    }
     	  })
      }
    }
  }

onDataResubmitted⁹⁺

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

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

参数：

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

示例：

  // 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文件。

  <!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <form action="http://httpbin.org/post" method="post">
      <input type="text" name="username">
      <input type="submit" name="提交">
    </form>
  </body>
  </html>

onPageVisible⁹⁺

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

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

参数：

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

示例：

  // 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)
        })
      }
    }
  }

onInterceptKeyEvent⁹⁺

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

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

参数：

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

返回值：

类型	说明
boolean	回调函数通过返回boolean类型值来决定是否继续将该KeyEvent传入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:'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;
        })
      }
    }
  }

onTouchIconUrlReceived⁹⁺

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

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

参数：

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

示例：

  // 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))
        })
      }
    }
  }

onFaviconReceived⁹⁺

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

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

参数：

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

示例：

  // 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;
        })
      }
    }
  }

onAudioStateChanged¹⁰⁺

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

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

参数：

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

示例：

  // 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)
          })
      }
    }
  }

onFirstContentfulPaint¹⁰⁺

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

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

参数：

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

示例：

  // 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)
            }
          })
      }
    }
  }

onLoadIntercept¹⁰⁺

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

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

参数：

参数名	参数类型	参数描述
request	WebResourceRequest	url请求的相关信息。

返回值：

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

示例：

  // 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组件获得焦点时触发该回调。

示例：

  // 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')
          })
      }
    }
  }

onScreenCaptureRequest¹⁰⁺

onScreenCaptureRequest(callback: (event?: { handler: ScreenCaptureHandler }) => void)

通知收到屏幕捕获请求。

参数：

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

示例：

  // 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()
                }
              })
            }
          })
      }
    }
  }

onOverScroll¹⁰⁺

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

通知网页过滚动偏移量。

参数：

参数名	参数类型	参数描述
xOffset	number	以网页最左端为基准，水平过滚动偏移量。
yOffset	number	以网页最上端为基准，竖直过滚动偏移量。

示例：

  // 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)
        })
      }
    }
  }

onControllerAttached¹⁰⁺

onControllerAttached(callback: () => void)

当Controller成功绑定到Web组件时触发该回调，并且该Controller必须为WebviewController，
因该回调调用时网页还未加载，无法在回调中使用有关操作网页的接口，例如zoomIn、zoomOut等，可以使用loadUrl、getWebId等操作网页不相关的接口。

示例：

在该回调中使用loadUrl加载网页

  // 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

  // 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文件。

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

ConsoleMessage

Web组件获取控制台信息对象。示例代码参考onConsole事件。

getLineNumber

getLineNumber(): number

获取ConsoleMessage的行数。

返回值：

类型	说明
number	返回ConsoleMessage的行数。

getMessage

getMessage(): string

获取ConsoleMessage的日志信息。

返回值：

类型	说明
string	返回ConsoleMessage的日志信息。

getMessageLevel

getMessageLevel(): MessageLevel

获取ConsoleMessage的信息级别。

返回值：

类型	说明
MessageLevel	返回ConsoleMessage的信息级别。

getSourceId

getSourceId(): string

获取网页源文件路径和名字。

返回值：

类型	说明
string	返回网页源文件路径和名字。

JsResult

Web组件返回的弹窗确认或弹窗取消功能对象。示例代码参考onAlert事件。

handleCancel

handleCancel(): void

通知Web组件用户取消弹窗操作。

handleConfirm

handleConfirm(): void

通知Web组件用户确认弹窗操作。

handlePromptConfirm⁹⁺

handlePromptConfirm(result: string): void

通知Web组件用户确认弹窗操作及对话框内容。

参数：

参数名	参数类型	必填	默认值	参数描述
result	string	是	-	用户输入的对话框内容。

FullScreenExitHandler⁹⁺

通知开发者Web组件退出全屏。示例代码参考onFullScreenEnter事件。

exitFullScreen⁹⁺

exitFullScreen(): void

通知开发者Web组件退出全屏。

ControllerHandler⁹⁺

设置用户新建web组件的的WebviewController对象。示例代码参考onWindowNew事件。

setWebController⁹⁺

setWebController(controller: WebviewController): void

设置WebviewController对象，如果不需要打开新窗口请设置为null。

参数：

参数名	参数类型	必填	默认值	参数描述
controller	WebviewController	是	-	新建web组件的WebviewController对象，如果不需要打开新窗口请设置为null。

WebResourceError

web组件资源管理错误信息对象。示例代码参考onErrorReceive事件。

getErrorCode

getErrorCode(): number

获取加载资源的错误码。

返回值：

类型	说明
number	返回加载资源的错误码。

getErrorInfo

getErrorInfo(): string

获取加载资源的错误信息。

返回值：

类型	说明
string	返回加载资源的错误信息。

WebResourceRequest

web组件获取资源请求对象。示例代码参考onErrorReceive事件。

getRequestHeader

getResponseHeader() : Array<Header>

获取资源请求头信息。

返回值：

类型	说明
Array<Header>	返回资源请求头信息。

getRequestUrl

getRequestUrl(): string

获取资源请求的URL信息。

返回值：

类型	说明
string	返回资源请求的URL信息。

isMainFrame

isMainFrame(): boolean

判断资源请求是否为主frame。

返回值：

类型	说明
boolean	返回资源请求是否为主frame。

isRedirect

isRedirect(): boolean

判断资源请求是否被服务端重定向。

返回值：

类型	说明
boolean	返回资源请求是否被服务端重定向。

isRequestGesture

isRequestGesture(): boolean

获取资源请求是否与手势（如点击）相关联。

返回值：

类型	说明
boolean	返回资源请求是否与手势（如点击）相关联。

getRequestMethod⁹⁺

getRequestMethod(): string

获取请求方法。

返回值：

类型	说明
string	返回请求方法。

Header

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

名称	类型	描述
headerKey	string	请求/响应头的key。
headerValue	string	请求/响应头的value。

WebResourceResponse

web组件资源响应对象。示例代码参考onHttpErrorReceive事件。

getReasonMessage

getReasonMessage(): string

获取资源响应的状态码描述。

返回值：

类型	说明
string	返回资源响应的状态码描述。

getResponseCode

getResponseCode(): number

获取资源响应的状态码。

返回值：

类型	说明
number	返回资源响应的状态码。

getResponseData

getResponseData(): string

获取资源响应数据。

返回值：

类型	说明
string	返回资源响应数据。

getResponseEncoding

getResponseEncoding(): string

获取资源响应的编码。

返回值：

类型	说明
string	返回资源响应的编码。

getResponseHeader

getResponseHeader() : Array<Header>

获取资源响应头。

返回值：

类型	说明
Array<Header>	返回资源响应头。

getResponseMimeType

getResponseMimeType(): string

获取资源响应的媒体（MIME）类型。

返回值：

类型	说明
string	返回资源响应的媒体（MIME）类型。

setResponseData⁹⁺

setResponseData(data: string|number |Resource)

设置资源响应数据。

参数：

参数名	参数类型	必填	默认值	参数描述
data	string \|number \|Resource¹⁰⁺	是	-	要设置的资源响应数据。string表示HTML格式的字符串。number表示文件句柄, 此句柄由系统的Web组件负责关闭。 Resource表示应用rawfile目录下文件资源。

setResponseEncoding⁹⁺

setResponseEncoding(encoding: string)

设置资源响应的编码。

参数：

参数名	参数类型	必填	默认值	参数描述
encoding	string	是	-	要设置的资源响应的编码。

setResponseMimeType⁹⁺

setResponseMimeType(mimeType: string)

设置资源响应的媒体（MIME）类型。

参数：

参数名	参数类型	必填	默认值	参数描述
mimeType	string	是	-	要设置的资源响应的媒体（MIME）类型。

setReasonMessage⁹⁺

setReasonMessage(reason: string)

设置资源响应的状态码描述。

参数：

参数名	参数类型	必填	默认值	参数描述
reason	string	是	-	要设置的资源响应的状态码描述。

setResponseHeader⁹⁺

setResponseHeader(header: Array<Header>)

设置资源响应头。

参数：

参数名	参数类型	必填	默认值	参数描述
header	Array<Header>	是	-	要设置的资源响应头。

setResponseCode⁹⁺

setResponseCode(code: number)

设置资源响应的状态码。

参数：

参数名	参数类型	必填	默认值	参数描述
code	number	是	-	要设置的资源响应的状态码。

setResponseIsReady⁹⁺

setResponseIsReady(IsReady: boolean)

设置资源响应数据是否已经就绪。

参数：

参数名	参数类型	必填	默认值	参数描述
IsReady	boolean	是	true	资源响应数据是否已经就绪。

FileSelectorResult⁹⁺

通知Web组件的文件选择结果。示例代码参考onShowFileSelector事件。

handleFileList⁹⁺

handleFileList(fileList: Array<string>): void

通知Web组件进行文件选择操作。

参数：

参数名	参数类型	必填	默认值	参数描述
fileList	Array<string>	是	-	需要进行操作的文件列表。

FileSelectorParam⁹⁺

web组件获取文件对象。示例代码参考onShowFileSelector事件。

getTitle⁹⁺

getTitle(): string

获取文件选择器标题。

返回值：

类型	说明
string	返回文件选择器标题。

getMode⁹⁺

getMode(): FileSelectorMode

获取文件选择器的模式。

返回值：

类型	说明
FileSelectorMode	返回文件选择器的模式。

getAcceptType⁹⁺

getAcceptType(): Array<string>

获取文件过滤类型。

返回值：

类型	说明
Array<string>	返回文件过滤类型。

isCapture⁹⁺

isCapture(): boolean

获取是否调用多媒体能力。

返回值：

类型	说明
boolean	返回是否调用多媒体能力。

HttpAuthHandler⁹⁺

Web组件返回的http auth认证请求确认或取消和使用缓存密码认证功能对象。示例代码参考onHttpAuthRequest事件。

cancel⁹⁺

cancel(): void

通知Web组件用户取消HTTP认证操作。

confirm⁹⁺

confirm(userName: string, pwd: string): boolean

使用用户名和密码进行HTTP认证操作。

参数：

参数名	参数类型	必填	默认值	参数描述
userName	string	是	-	HTTP认证用户名。
pwd	string	是	-	HTTP认证密码。

返回值：

类型	说明
boolean	认证成功返回true，失败返回false。

isHttpAuthInfoSaved⁹⁺

isHttpAuthInfoSaved(): boolean

通知Web组件用户使用服务器缓存的帐号密码认证。

返回值：

类型	说明
boolean	存在密码认证成功返回true，其他返回false。

SslErrorHandler⁹⁺

Web组件返回的SSL错误通知事件用户处理功能对象。示例代码参考onSslErrorEventReceive事件。

handleCancel⁹⁺

handleCancel(): void

通知Web组件取消此请求。

handleConfirm⁹⁺

handleConfirm(): void

通知Web组件继续使用SSL证书。

ClientAuthenticationHandler⁹⁺

Web组件返回的SSL客户端证书请求事件用户处理功能对象。示例代码参考onClientAuthenticationRequest事件。

confirm⁹⁺

confirm(priKeyFile : string, certChainFile : string): void

通知Web组件使用指定的私钥和客户端证书链。

参数：

参数名	参数类型	必填	参数描述
priKeyFile	string	是	存放私钥的文件，包含路径和文件名。
certChainFile	string	是	存放证书链的文件，包含路径和文件名。

confirm¹⁰⁺

confirm(authUri : string): void

需要权限： ohos.permission.ACCESS_CERT_MANAGER

通知Web组件使用指定的凭据(从证书管理模块获得)。

参数：

参数名	参数类型	必填	参数描述
authUri	string	是	凭据的关键值。

cancel⁹⁺

cancel(): void

通知Web组件取消相同host和port服务器发送的客户端证书请求事件。同时，相同host和port服务器的请求，不重复上报该事件。

ignore⁹⁺

ignore(): void

通知Web组件忽略本次请求。

PermissionRequest⁹⁺

Web组件返回授权或拒绝权限功能的对象。示例代码参考onPermissionRequest事件。

deny⁹⁺

deny(): void

拒绝网页所请求的权限。

getOrigin⁹⁺

getOrigin(): string

获取网页来源。

返回值：

类型	说明
string	当前请求权限网页的来源。

getAccessibleResource⁹⁺

getAccessibleResource(): Array<string>

获取网页所请求的权限资源列表，资源列表类型参考ProtectedResourceType。

返回值：

类型	说明
Array<string>	网页所请求的权限资源列表。

grant⁹⁺

grant(resources: Array<string>): void

对网页访问的给定权限进行授权。

参数：

参数名	参数类型	必填	默认值	参数描述
resources	Array<string>	是	-	授予网页请求的权限的资源列表。

ScreenCaptureHandler¹⁰⁺

Web组件返回授权或拒绝屏幕捕获功能的对象。示例代码参考onScreenCaptureRequest事件。

deny¹⁰⁺

deny(): void

拒绝网页所请求的屏幕捕获操作。

getOrigin¹⁰⁺

getOrigin(): string

获取网页来源。

返回值：

类型	说明
string	当前请求权限网页的来源。

grant¹⁰⁺

grant(config: ScreenCaptureConfig): void

需要权限： ohos.permission.MICROPHONE，ohos.permission.CAPTURE_SCREEN

对网页访问的屏幕捕获操作进行授权。

参数：

参数名	参数类型	必填	默认值	参数描述
config	ScreenCaptureConfig	是	-	屏幕捕获配置。

ContextMenuSourceType⁹⁺枚举说明

名称	描述
None	其他事件来源。
Mouse	鼠标事件。
LongPress	长按事件。

ContextMenuMediaType⁹⁺枚举说明

名称	描述
None	非特殊媒体或其他媒体类型。
Image	图片。

ContextMenuInputFieldType⁹⁺枚举说明

名称	描述
None	非输入框。
PlainText	纯文本类型，包括text、search、email等。
Password	密码类型。
Number	数字类型。
Telephone	电话号码类型。
Other	其他类型。

ContextMenuEditStateFlags⁹⁺枚举说明

名称	描述
NONE	不可编辑。
CAN_CUT	支持剪切。
CAN_COPY	支持拷贝。
CAN_PASTE	支持粘贴。
CAN_SELECT_ALL	支持全选。

WebContextMenuParam⁹⁺

实现长按页面元素或鼠标右键弹出来的菜单信息。示例代码参考onContextMenuShow事件。

x⁹⁺

x(): number

弹出菜单的x坐标。

返回值：

类型	说明
number	显示正常返回非负整数，否则返回-1。

y⁹⁺

y(): number

弹出菜单的y坐标。

返回值：

类型	说明
number	显示正常返回非负整数，否则返回-1。

getLinkUrl⁹⁺

getLinkUrl(): string

获取链接地址。

返回值：

类型	说明
string	如果长按位置是链接，返回经过安全检查的url链接。

getUnfilteredLinkUrl⁹⁺

getUnfilteredLinkUrl(): string

获取链接地址。

返回值：

类型	说明
string	如果长按位置是链接，返回原始的url链接。

getSourceUrl⁹⁺

getSourceUrl(): string

获取sourceUrl链接。

返回值：

类型	说明
string	如果选中的元素有src属性，返回src的url。

existsImageContents⁹⁺

existsImageContents(): boolean

是否存在图像内容。

返回值：

类型	说明
boolean	长按位置中有图片返回true，否则返回false。

getMediaType⁹⁺

getMediaType(): ContextMenuMediaType

获取网页元素媒体类型。

返回值：

类型	说明
ContextMenuMediaType	网页元素媒体类型。

getSelectionText⁹⁺

getSelectionText(): string

获取选中文本。

返回值：

类型	说明
string	菜单上下文选中文本内容，不存在则返回空。

getSourceType⁹⁺

getSourceType(): ContextMenuSourceType

获取菜单事件来源。

返回值：

类型	说明
ContextMenuSourceType	菜单事件来源。

getInputFieldType⁹⁺

getInputFieldType(): ContextMenuInputFieldType

获取网页元素输入框类型。

返回值：

类型	说明
ContextMenuInputFieldType	输入框类型。

isEditable⁹⁺

isEditable(): boolean

获取网页元素是否可编辑标识。

返回值：

类型	说明
boolean	网页元素可编辑返回true，不可编辑返回false。

getEditStateFlags⁹⁺

getEditStateFlags(): number

获取网页元素可编辑标识。

返回值：

类型	说明
number	网页元素可编辑标识，参照ContextMenuEditStateFlags。

WebContextMenuResult⁹⁺

实现长按页面元素或鼠标右键弹出来的菜单所执行的响应事件。示例代码参考onContextMenuShow事件。

closeContextMenu⁹⁺

closeContextMenu(): void

不执行WebContextMenuResult其他接口操作时，需要调用此接口关闭菜单。

copyImage⁹⁺

copyImage(): void

WebContextMenuParam有图片内容则复制图片。

copy⁹⁺

copy(): void

执行与此上下文菜单相关的拷贝操作。

paste⁹⁺

paste(): void

执行与此上下文菜单相关的粘贴操作。

cut⁹⁺

cut(): void

执行与此上下文菜单相关的剪切操作。

selectAll⁹⁺

selectAll(): void

执行与此上下文菜单相关的全选操作。

JsGeolocation

Web组件返回授权或拒绝权限功能的对象。示例代码参考onGeolocationShow事件。

invoke

invoke(origin: string, allow: boolean, retain: boolean): void

设置网页地理位置权限状态。

参数：

参数名	参数类型	必填	默认值	参数描述
origin	string	是	-	指定源的字符串索引。
allow	boolean	是	-	设置的地理位置权限状态。
retain	boolean	是	-	是否允许将地理位置权限状态保存到系统中。可通过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	未知内容。

SslError⁹⁺枚举说明

onSslErrorEventReceive接口返回的SSL错误的具体原因。

名称	描述
Invalid	一般错误。
HostMismatch	主机名不匹配。
DateInvalid	证书日期无效。
Untrusted	证书颁发机构不受信任。

ProtectedResourceType⁹⁺枚举说明

名称	描述	备注
MidiSysex	MIDI SYSEX资源。	目前仅支持权限事件上报，MIDI设备的使用还未支持。
VIDEO_CAPTURE¹⁰⁺	视频捕获资源，例如相机。
AUDIO_CAPTURE¹⁰⁺	音频捕获资源，例如麦克风。

WebDarkMode⁹⁺枚举说明

名称	描述
Off	Web深色模式关闭。
On	Web深色模式开启。
Auto	Web深色模式跟随系统。

WebCaptureMode¹⁰⁺枚举说明

名称	描述
HOME_SCREEN	主屏捕获模式。

WebMediaOptions¹⁰⁺

Web媒体策略的配置。

名称	类型	可读	可写	必填	说明
resumeInterval	number	是	是	否	被暂停的Web音频能够自动续播的有效期，单位：秒。最长有效期为60秒，由于近似值原因，该有效期可能存在一秒内的误差。
audioExclusive	boolean	是	是	否	应用内多个Web实例的音频是否独占。

ScreenCaptureConfig¹⁰⁺

Web屏幕捕获的配置。

名称	类型	可读	可写	必填	说明
captureMode	WebCaptureMode	是	是	是	Web屏幕捕获模式。

DataResubmissionHandler⁹⁺

通过DataResubmissionHandler可以重新提交表单数据或取消提交表单数据。

resend⁹⁺

resend(): void

重新发送表单数据。

示例：

  // 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();
        })
      }
    }
  }

cancel⁹⁺

cancel(): void

取消重新发送表单数据。

示例：

  // 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开始不再维护，建议使用WebviewController⁹⁺代替。

创建对象

let webController: WebController = new WebController()

getCookieManager^(deprecated)

getCookieManager(): WebCookie

获取web组件cookie管理对象。

从API version 9开始不再维护，建议使用getCookie代替。

返回值：

类型	说明
WebCookie	web组件cookie管理对象，参考WebCookie定义。

示例：

  // 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开始不再维护，建议使用requestFocus⁹⁺代替。

示例：

  // 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开始不再维护，建议使用accessBackward⁹⁺代替。

返回值：

类型	说明
boolean	可以后退返回true,否则返回false。

示例：

  // 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开始不再维护，建议使用accessForward⁹⁺代替。

返回值：

类型	说明
boolean	可以前进返回true,否则返回false。

示例：

  // 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开始不再维护，建议使用accessStep⁹⁺代替。

参数：

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

返回值：

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

示例：

  // 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开始不再维护，建议使用backward⁹⁺代替。

示例：

  // 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开始不再维护，建议使用forward⁹⁺代替。

示例：

  // 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接口。

从API version 9开始不再维护，建议使用deleteJavaScriptRegister⁹⁺代替。

参数：

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

示例：

  // 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开始不再维护，建议使用getHitTest⁹⁺代替。

返回值：

类型	说明
HitTestType	被点击区域的元素类型。

示例：

  // 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开始不再维护，建议使用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为空时，此属性无效。

示例：

  // xxx.ets
  @Entry
  @Component
  struct WebComponent {
    controller: WebController = new WebController()

    build() {
      Column() {
        Button('loadData')
          .onClick(() => {
            this.controller.loadData({
              data: "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
              mimeType: "text/html",
              encoding: "UTF-8"
            })
          })
        Web({ src: 'www.example.com', controller: this.controller })
      }
    }
  }

loadUrl^(deprecated)

loadUrl(options: { url: string|Resource, headers?: Array<Header> })

使用指定的http头加载指定的URL。

通过loadUrl注入的对象只在当前document有效，即通过loadUrl导航到新的页面会无效。

而通过registerJavaScriptProxy注入的对象，在loadUrl导航到新的页面也会有效。

从API version 9开始不再维护，建议使用loadUrl⁹⁺代替。

参数：

参数名	参数类型	必填	默认值	参数描述
url	string	是	-	需要加载的 URL。
headers	Array<Header>	否	[]	URL的附加HTTP请求头。

示例：

  // 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开始不再维护，建议使用onActive⁹⁺代替。

示例：

  // 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开始不再维护，建议使用onInactive⁹⁺代替。

示例：

  // 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开始不再维护，建议使用zoom⁹⁺代替。

参数：

参数名	参数类型	必填	参数描述
factor	number	是	基于当前网页所需调整的相对缩放比例，正值为放大，负值为缩小。

示例：

  // 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开始不再维护，建议使用refresh⁹⁺代替。

示例：

  // 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<string> })

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

从API version 9开始不再维护，建议使用registerJavaScriptProxy⁹⁺代替。

参数：

参数名	参数类型	必填	默认值	参数描述
object	object	是	-	参与注册的应用侧JavaScript对象。只能声明方法，不能声明属性。其中方法的参数和返回类型只能为string，number，boolean
name	string	是	-	注册对象的名称，与window中调用的对象名一致。注册后window对象可以通过此名字访问应用侧JavaScript对象。
methodList	Array<string>	是	-	参与注册的应用侧JavaScript对象的方法。

示例：

  // 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文件。

  <!-- index.html -->
  <!DOCTYPE html>
  <html>
      <meta charset="utf-8">
      <body>
          Hello world!
      </body>
      <script type="text/javascript">
      function htmlTest() {
          str = objName.test("test function")
          console.log('objName.test result:'+ str)
      }
  </script>
  </html>

runJavaScript^(deprecated)

runJavaScript(options: { script: string, callback?: (result: string) => void })

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

从API version 9开始不再维护，建议使用runJavaScript⁹⁺代替。

参数：

参数名	参数类型	必填	默认值	参数描述
script	string	是	-	JavaScript脚本。
callback	(result: string) => void	否	-	回调执行JavaScript脚本结果。JavaScript脚本若执行失败或无返回值时，返回null。

示例：

  // 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(() => {
          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文件。

  <!-- index.html -->
  <!DOCTYPE html>
  <html>
    <meta charset="utf-8">
    <body>
        Hello world!
    </body>
    <script type="text/javascript">
    function test() {
        console.log('Ark WebComponent')
        return "This value is from index.html"
    }
    </script>
  </html>

stop^(deprecated)

stop()

停止页面加载。

从API version 9开始不再维护，建议使用stop⁹⁺代替。

示例：

  // 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开始不再维护，建议使用clearHistory⁹⁺代替。

示例：

  // 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开始不再维护，建议使用setCookie⁹⁺代替。

返回值：

类型	说明
boolean	设置cookie是否成功。

saveCookie^(deprecated)

saveCookie(): boolean

将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。

从API version 9开始不再维护，建议使用saveCookieAsync⁹⁺代替。

返回值：

类型	说明
boolean	同步内存cookie到磁盘操作是否成功。

你可能感兴趣的鸿蒙文章

harmony 鸿蒙基于ArkTS的声明式开发范式

harmony 鸿蒙@ohos.arkui.advanced.Counter（计数器组件）

harmony 鸿蒙@ohos.arkui.advanced.SegmentButton（分段按钮）

harmony 鸿蒙@ohos.multimedia.avCastPicker (投播组件)

harmony 鸿蒙CalendarPicker

harmony 鸿蒙Checkbox

0 赞

所属分类： 后端技术
本文标签： 软件鸿蒙
版权声明： 原创文章如转载，请注明本文链接: https://www.seaxiang.com/blog/8dac92d240674b9e956d1bbaa497cd7f

harmony 鸿蒙Web

Web

需要权限

子组件

接口

属性

domStorageAccess

fileAccess

imageAccess

javaScriptProxy

javaScriptAccess

mixedMode

onlineImageAccess

zoomAccess

overviewModeAccess

databaseAccess

geolocationAccess

mediaPlayGestureAccess

multiWindowAccess9+

horizontalScrollBarAccess9+

verticalScrollBarAccess9+

password(deprecated)

cacheMode

textZoomAtio(deprecated)

textZoomRatio9+

initialScale9+

userAgent(deprecated)

blockNetwork9+

defaultFixedFontSize9+

defaultFontSize9+

minFontSize9+

minLogicalFontSize9+

webFixedFont9+

webSansSerifFont9+

webSerifFont9+

webStandardFont9+

webFantasyFont9+

webCursiveFont9+

darkMode9+

forceDarkAccess9+

tableData(deprecated)

wideViewModeAccess(deprecated)

pinchSmooth9+

allowWindowOpenMethod10+

mediaOptions10+

事件

onAlert

onBeforeUnload

onConfirm

onPrompt9+

onConsole

onDownloadStart

onErrorReceive

onHttpErrorReceive

onPageBegin

onPageEnd

onProgressChange

onTitleReceive

onRefreshAccessedHistory

onSslErrorReceive(deprecated)

onFileSelectorShow(deprecated)

onRenderExited9+

onShowFileSelector9+

onResourceLoad9+

onScaleChange9+

onUrlLoadIntercept(deprecated)

onInterceptRequest9+

onHttpAuthRequest9+

onSslErrorEventReceive9+

onClientAuthenticationRequest9+

onContextMenuShow9+

onScroll9+

onGeolocationShow

onGeolocationHide

onFullScreenEnter9+

onFullScreenExit9+

onWindowNew9+

onWindowExit9+

onSearchResultReceive9+

onDataResubmitted9+

multiWindowAccess⁹⁺

horizontalScrollBarAccess⁹⁺

verticalScrollBarAccess⁹⁺

password^(deprecated)

textZoomAtio^(deprecated)

textZoomRatio⁹⁺

initialScale⁹⁺

userAgent^(deprecated)

blockNetwork⁹⁺

defaultFixedFontSize⁹⁺

defaultFontSize⁹⁺

minFontSize⁹⁺

minLogicalFontSize⁹⁺

webFixedFont⁹⁺

webSansSerifFont⁹⁺

webSerifFont⁹⁺

webStandardFont⁹⁺

webFantasyFont⁹⁺

webCursiveFont⁹⁺

darkMode⁹⁺

forceDarkAccess⁹⁺

tableData^(deprecated)

wideViewModeAccess^(deprecated)

pinchSmooth⁹⁺

allowWindowOpenMethod¹⁰⁺

mediaOptions¹⁰⁺

onPrompt⁹⁺

onSslErrorReceive^(deprecated)

onFileSelectorShow^(deprecated)

onRenderExited⁹⁺

onShowFileSelector⁹⁺

onResourceLoad⁹⁺

onScaleChange⁹⁺

onUrlLoadIntercept^(deprecated)

onInterceptRequest⁹⁺

onHttpAuthRequest⁹⁺

onSslErrorEventReceive⁹⁺

onClientAuthenticationRequest⁹⁺

onContextMenuShow⁹⁺

onScroll⁹⁺

onFullScreenEnter⁹⁺

onFullScreenExit⁹⁺

onWindowNew⁹⁺

onWindowExit⁹⁺

onSearchResultReceive⁹⁺

onDataResubmitted⁹⁺

onPageVisible⁹⁺

onInterceptKeyEvent⁹⁺

onTouchIconUrlReceived⁹⁺

onFaviconReceived⁹⁺

onAudioStateChanged¹⁰⁺

onFirstContentfulPaint¹⁰⁺

onLoadIntercept¹⁰⁺

onScreenCaptureRequest¹⁰⁺

onOverScroll¹⁰⁺

onControllerAttached¹⁰⁺

handlePromptConfirm⁹⁺

FullScreenExitHandler⁹⁺

exitFullScreen⁹⁺

ControllerHandler⁹⁺

setWebController⁹⁺

getRequestMethod⁹⁺

setResponseData⁹⁺

setResponseEncoding⁹⁺

setResponseMimeType⁹⁺

setReasonMessage⁹⁺

setResponseHeader⁹⁺

setResponseCode⁹⁺

setResponseIsReady⁹⁺

FileSelectorResult⁹⁺

handleFileList⁹⁺

FileSelectorParam⁹⁺

getTitle⁹⁺

getMode⁹⁺

getAcceptType⁹⁺

isCapture⁹⁺

HttpAuthHandler⁹⁺

cancel⁹⁺

confirm⁹⁺

isHttpAuthInfoSaved⁹⁺