Web
The <Web> component can be used to display web pages. It can be used with the @ohos.web.webview module, which provides APIs for web control.
NOTE
- This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
- You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
Required Permissions
To use online resources, the application must have the ohos.permission.INTERNET permission. For details about how to apply for a permission, see Declaring Permissions.
Child Components
Not supported
APIs
Web(options: { src: ResourceStr, controller: WebviewController|WebController})
NOTE
Transition animation is not supported.
<Web> components on a page must be bound to different WebviewControllers.
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| src | ResourceStr | Yes | Address of a web page resource. To access local resource files, use the $rawfile or resource protocol. To load a local resource file in the sandbox outside of the application package, use file:// to specify the path of the sandbox. |
| controller | WebviewController9+ |WebController | Yes | Controller. This API is deprecated since API version 9. You are advised to use WebviewController instead. |
Example
Example of loading online web pages:
// 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 })
}
}
}
Example of loading local web pages:
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
// Load a local resource file through $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() {
// Load a local resource file through the resource protocol.
Web({ src: "resource://rawfile/index.html", controller: this.controller })
}
}
}
Example of loading local resource files in the sandbox:
- Obtain the sandbox path through the constructed singleton object 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() {
// Load the files in the sandbox.
Web({ src: url, controller: this.controller })
}
}
}
- Modify the EntryAbility.ts file.
The following uses **filesDir** as an example to describe how to obtain the path of the sandbox. For details about how to obtain other paths, see [Obtaining Application File Paths](https://seaxiang.com/blog/70037184027540feb52736ad6b717314).
// 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) {
// Data synchronization between the UIAbility component and UI can be implemented by binding filesDir to the GlobalContext object.
GlobalContext.getContext().setObject("filesDir", this.context.filesDir);
console.log("Sandbox path is " + GlobalContext.getContext().getObject("filesDir"))
}
}
HTML file to be loaded:
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>
Attributes
Only the following universal attributes are supported: width, height, padding, margin, and border.
domStorageAccess
domStorageAccess(domStorageAccess: boolean)
Sets whether to enable the DOM Storage API. By default, this feature is disabled.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| domStorageAccess | boolean | Yes | false | Whether to enable the DOM Storage API. |
Example
// 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)
Sets whether to enable access to the file system in the application. This setting does not affect the access to the files specified through $rawfile(filepath/filename).
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| fileAccess | boolean | Yes | true | Whether to enable access to the file system in the application. By default, this feature is enabled. |
Example
// 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)
Sets whether to enable automatic image loading. By default, this feature is enabled.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| imageAccess | boolean | Yes | true | Whether to enable automatic image loading. |
Example
// 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})
Registers a JavaScript object with the window. APIs of this object can then be invoked in the window. The parameters cannot be updated.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| object | object | Yes | - | Object to be registered. Methods can be declared, but attributes cannot. |
| name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window. |
| methodList | Array<string> | Yes | - | Methods of the JavaScript object to be registered at the application side. |
| controller | WebviewController9+ |WebController | Yes | - | Controller. This API is deprecated since API version 9. You are advised to use WebviewController instead. |
Example
// 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)
Sets whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| javaScriptAccess | boolean | Yes | true | Whether JavaScript scripts can be executed. |
Example
// 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)
Sets whether to enable loading of HTTP and HTTPS hybrid content can be loaded. By default, this feature is disabled.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| mixedMode | MixedMode | Yes | MixedMode.None | Mixed content to load. |
Example
// 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)
Sets whether to enable access to online images through HTTP and HTTPS. By default, this feature is enabled.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| onlineImageAccess | boolean | Yes | true | Whether to enable access to online images through HTTP and HTTPS. |
Example
// 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)
Sets whether to enable zoom gestures. By default, this feature is enabled.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| zoomAccess | boolean | Yes | true | Whether to enable zoom gestures. |
Example
// 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)
Sets whether to load web pages by using the overview mode. By default, this feature is enabled. Currently, only mobile devices are supported.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| overviewModeAccess | boolean | Yes | true | Whether to load web pages by using the overview mode. |
Example
// 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)
Sets whether to enable database access. By default, this feature is disabled.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| databaseAccess | boolean | Yes | false | Whether to enable database access. |
Example
// 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)
Sets whether to enable geolocation access. By default, this feature is enabled.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| geolocationAccess | boolean | Yes | true | Whether to enable geolocation access. |
Example
// 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)
Sets whether video playback must be started by user gestures. This API is not applicable to videos that do not have an audio track or whose audio track is muted.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| access | boolean | Yes | true | Whether video playback must be started by user gestures. |
Example
// 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)
}
}
}
multiWindowAccess9+
multiWindowAccess(multiWindow: boolean)
Sets whether to enable the multi-window permission. Enabling the multi-window permission requires implementation of the onWindowNew event. For the sample code, see onWindowNew.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| multiWindow | boolean | Yes | false | Whether to enable the multi-window permission. |
Example
// 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)
}
}
}
horizontalScrollBarAccess9+
horizontalScrollBarAccess(horizontalScrollBar: boolean)
Sets whether to display the horizontal scrollbar, including the default system scrollbar and custom scrollbar. By default, the horizontal scrollbar is displayed.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| horizontalScrollBar | boolean | Yes | true | Whether to display the horizontal scrollbar. |
Example
// 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 file to be loaded:
<!--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>
verticalScrollBarAccess9+
verticalScrollBarAccess(verticalScrollBar: boolean)
Sets whether to display the vertical scrollbar, including the default system scrollbar and custom scrollbar. By default, the vertical scrollbar is displayed.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| verticalScrollBarAccess | boolean | Yes | true | Whether to display the vertical scrollbar. |
Example
// 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 file to be loaded:
<!--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)
Sets whether the password should be saved. This API is a void API.
NOTE
This API is deprecated since API version 10, and no new API is provided as a substitute.
cacheMode
cacheMode(cacheMode: CacheMode)
Sets the cache mode.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| cacheMode | CacheMode | Yes | CacheMode.Default | Cache mode to set. |
Example
// 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)
Sets the text zoom ratio of the page. The default value is 100, which indicates 100%.
This API is deprecated since API version 9. You are advised to use textZoomRatio9+ instead.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| textZoomAtio | number | Yes | 100 | Text zoom ratio to set. The value is an integer. The value range is (0, +∞). |
Example
// 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)
}
}
}
textZoomRatio9+
textZoomRatio(textZoomRatio: number)
Sets the text zoom ratio of the page. The default value is 100, which indicates 100%.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| textZoomRatio | number | Yes | 100 | Text zoom ratio to set. The value is an integer. The value range is (0, +∞). |
Example
// 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)
}
}
}
initialScale9+
initialScale(percent: number)
Sets the scale factor of the entire page. The default value is 100%.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| percent | number | Yes | 100 | Scale factor of the entire page. |
Example
// 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)
Sets the user agent.
NOTE
This API is supported since API version 8 and deprecated since API version 10. You are advised to use setCustomUserAgent10+ instead.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| userAgent | string | Yes | - | User agent to set. |
Example
// 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)
}
}
}
blockNetwork9+
blockNetwork(block: boolean)
Sets whether to block online downloads.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| block | boolean | Yes | false | Whether to block online downloads. |
Example
// 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)
}
}
}
defaultFixedFontSize9+
defaultFixedFontSize(size: number)
Sets the default fixed font size for the web page.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| size | number | Yes | 13 | Default fixed font size to set, in px. The value ranges from -2^31 to 2^31-1. In actual rendering, values greater than 72 are handled as 72, and values less than 1 are handled as 1. |
Example
// 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)
}
}
}
defaultFontSize9+
defaultFontSize(size: number)
Sets the default font size for the web page.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| size | number | Yes | 16 | Default font size to set, in px. The value ranges from -2^31 to 2^31-1. In actual rendering, values greater than 72 are handled as 72, and values less than 1 are handled as 1. |
Example
// 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)
}
}
}
minFontSize9+
minFontSize(size: number)
Sets the minimum font size for the web page.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| size | number | Yes | 8 | Minimum font size to set, in px. The value ranges from -2^31 to 2^31-1. In actual rendering, values greater than 72 are handled as 72, and values less than 1 are handled as 1. |
Example
// 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)
}
}
}
minLogicalFontSize9+
minLogicalFontSize(size: number)
Sets the minimum logical font size for the web page.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| size | number | Yes | 8 | Minimum logical font size to set, in px. The value ranges from -2^31 to 2^31-1. In actual rendering, values greater than 72 are handled as 72, and values less than 1 are handled as 1. |
Example
// 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)
}
}
}
webFixedFont9+
webFixedFont(family: string)
Sets the fixed font family for the web page.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| family | string | Yes | monospace | Fixed font family to set. |
Example
// 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)
}
}
}
webSansSerifFont9+
webSansSerifFont(family: string)
Sets the sans serif font family for the web page.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| family | string | Yes | sans-serif | Sans serif font family to set. |
Example
// 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)
}
}
}
webSerifFont9+
webSerifFont(family: string)
Sets the serif font family for the web page.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| family | string | Yes | serif | Serif font family to set. |
Example
// 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)
}
}
}
webStandardFont9+
webStandardFont(family: string)
Sets the standard font family for the web page.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| family | string | Yes | sans serif | Standard font family to set. |
Example
// 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)
}
}
}
webFantasyFont9+
webFantasyFont(family: string)
Sets the fantasy font family for the web page.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| family | string | Yes | fantasy | Fantasy font family to set. |
Example
// 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)
}
}
}
webCursiveFont9+
webCursiveFont(family: string)
Sets the cursive font family for the web page.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| family | string | Yes | cursive | Cursive font family to set. |
Example
// 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)
}
}
}
darkMode9+
darkMode(mode: WebDarkMode)
Sets the web dark mode. By default, web dark mode is disabled. When it is enabled, the <Web> component enables the dark theme defined for web pages if the theme has been defined in prefers-color-scheme of a media query, and remains unchanged otherwise. To enable the forcible dark mode, use this API with forceDarkAccess.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| mode | WebDarkMode | Yes | WebDarkMode.Off | Web dark mode to set. |
Example
// 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)
}
}
}
forceDarkAccess9+
forceDarkAccess(access: boolean)
Sets whether to enable forcible dark mode for the web page. By default, this feature is turned off. This API is applicable only when dark mode is enabled in darkMode.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| access | boolean | Yes | false | Whether to enable forcible dark mode for the web page. |
Example
// 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)
Sets whether form data should be saved. This API is a void API.
NOTE
This API is deprecated since API version 10, and no new API is provided as a substitute.
wideViewModeAccess(deprecated)
wideViewModeAccess(wideViewModeAccess: boolean)
Sets whether to support the viewport attribute of the HTML <meta> tag. This API is a void API.
NOTE
This API is deprecated since API version 10, and no new API is provided as a substitute.
pinchSmooth9+
pinchSmooth(isEnabled: boolean)
Sets whether to enable smooth pinch mode for the web page.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| isEnabled | boolean | Yes | false | Whether to enable smooth pinch mode for the web page. |
Example
// 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)
}
}
}
allowWindowOpenMethod10+
allowWindowOpenMethod(flag: boolean)
Sets whether to allow a new window to automatically open through JavaScript.
When flag is set to true, a new window can automatically open through JavaScript. When flag is set to false, a new window can still automatically open through JavaScript for user behavior, but cannot for non-user behavior. The user behavior here refers to that a user requests to open a new window (window.open) within 5 seconds.
This API takes effect only when javaScriptAccess is enabled.
This API opens a new window when multiWindowAccess is enabled and opens a local window when multiWindowAccess is disabled.
The default value of flag is subject to the settings of the persist.web.allowWindowOpenMethod.enabled system attribute. If this attribute is not set, the default value of flag is false.
To check the settings of persist.web.allowWindowOpenMethod.enabled,
run the hdc shell param get persist.web.allowWindowOpenMethod.enabled command. If the attribute is set to 0 or does not exist, you can run the hdc shell param set persist.web.allowWindowOpenMethod.enabled 1 command to enable it.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| flag | boolean | Yes | Subject to the settings of the persist.web.allowWindowOpenMethod.enabled system attribute. If this attribute is set, the default value of flag is true. Otherwise, the default value of flag is false. | Whether to allow a new window to automatically open through JavaScript. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
// There are two <Web> components on the same page. When the WebComponent object opens a new window, the NewWebViewComp object is displayed.
@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 needs to be enabled.
.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()
// Return the WebviewController object corresponding to the new window to the <Web> kernel.
// If opening a new window is not needed, set the parameter to null when calling the event.handler.setWebController API.
// If the event.handler.setWebController API is not called, the render process will be blocked.
event.handler.setWebController(popController)
})
}
}
}
mediaOptions10+
mediaOptions(options: WebMediaOptions)
Sets the web-based media playback policy, including the validity period for automatically resuming a paused web audio, and whether the audio of multiple <Web> instances in an application is exclusive.
NOTE
- Audios in the same <Web> instance are considered as the same audio.
- The media playback policy controls videos with an audio track.
- After the parameter settings are updated, the playback must be started again for the settings to take effect.
- It is recommended that you set the same audioExclusive value for all <Web> components.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| options | WebMediaOptions | Yes | {resumeInterval: 0, audioExclusive: true} | Web-based media playback policy. The default value of resumeInterval is 0, indicating that the playback is not automatically resumed. |
Example
// 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)
}
}
}
Events
The universal events are not supported.
onAlert
onAlert(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)
Called when alert() is invoked to display an alert dialog box on the web page.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | URL of the web page where the dialog box is displayed. |
| message | string | Message displayed in the dialog box. |
| result | JsResult | User operation. |
Return value
| Type | Description |
|---|---|
| boolean | If the callback returns true, the application can use the system dialog box (allows the confirm and cancel operations) and invoke the JsResult API to instruct the <Web> component to exit the current page based on the user operation. If the callback returns false, the <Web> component cannot trigger the system dialog box. |
Example
// 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 file to be loaded:
<!--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)
Called when this page is about to exit after the user refreshes or closes the page. This API takes effect only when the page has obtained focus.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | URL of the web page where the dialog box is displayed. |
| message | string | Message displayed in the dialog box. |
| result | JsResult | User operation. |
Return value
| Type | Description |
|---|---|
| boolean | If the callback returns true, the application can use the system dialog box (allows the confirm and cancel operations) and invoke the JsResult API to instruct the <Web> component to exit the current page based on the user operation. If the callback returns false, the <Web> component cannot trigger the system dialog box. |
Example
// 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 file to be loaded:
<!--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)
Called when confirm() is invoked by the web page.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | URL of the web page where the dialog box is displayed. |
| message | string | Message displayed in the dialog box. |
| result | JsResult | User operation. |
Return value
| Type | Description |
|---|---|
| boolean | If the callback returns true, the application can use the system dialog box (allows the confirm and cancel operations) and invoke the JsResult API to instruct the <Web> component to exit the current page based on the user operation. If the callback returns false, the <Web> component cannot trigger the system dialog box. |
Example
// 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 file to be loaded:
<!--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>
onPrompt9+
onPrompt(callback: (event?: { url: string; message: string; value: string; result: JsResult }) => boolean)
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | URL of the web page where the dialog box is displayed. |
| message | string | Message displayed in the dialog box. |
| result | JsResult | User operation. |
Return value
| Type | Description |
|---|---|
| boolean | If the callback returns true, the application can use the system dialog box (allows the confirm and cancel operations) and invoke the JsResult API to instruct the <Web> component to exit the current page based on the user operation. If the callback returns false, the <Web> component cannot trigger the system dialog box. |
Example
// 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 file to be loaded:
<!--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)
Called to notify the host application of a JavaScript console message.
Parameters
| Name | Type | Description |
|---|---|---|
| message | ConsoleMessage | Console message. |
Return value
| Type | Description |
|---|---|
| boolean | Returns true if the message will not be printed to the console; returns false otherwise. |
Example
// 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)
Instructs the main application to start downloading a file.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | URL for the download task. |
| userAgent | string | User agent used for download. |
| contentDisposition | string | Content-Disposition response header returned by the server, which may be empty. |
| mimetype | string | MIME type of the content returned by the server. |
| contentLength | number | Length of the content returned by the server. |
Example
// 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)
Called when an error occurs during web page loading. For better results, simplify the implementation logic in the callback. This API is called when there is no network connection.
Parameters
| Name | Type | Description |
|---|---|---|
| request | WebResourceRequest | Encapsulation of a web page request. |
| error | WebResourceError | Encapsulation of a web page resource loading error. |
Example
// 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)
Called when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading.
Parameters
| Name | Type | Description |
|---|---|---|
| request | WebResourceRequest | Encapsulation of a web page request. |
| response | WebResourceResponse | Encapsulation of a resource response. |
Example
// 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)
Called when the web page starts to be loaded. This API is called only for the main frame content, and not for the iframe or frameset content.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | URL of the page. |
Example
// 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)
Called when the web page loading is complete. This API takes effect only for the main frame content.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | URL of the page. |
Example
// 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)
Called when the web page loading progress changes.
Parameters
| Name | Type | Description |
|---|---|---|
| newProgress | number | New loading progress. The value is an integer ranging from 0 to 100. |
Example
// 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)
Called when the document title of the web page is changed.
Parameters
| Name | Type | Description |
|---|---|---|
| title | string | Document title. |
Example
// 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)
Called when loading of the web page is complete. This API is used by an application to update the historical link it accessed.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | URL to be accessed. |
| isRefreshed | boolean | Whether the page is reloaded. The value true means that the page is reloaded by invoking the refresh9+ API, and false means the opposite. |
Example
// 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)
Called when an SSL error occurs during resource loading.
NOTE
This API is supported since API version 8 and deprecated since API version 9. You are advised to use onSslErrorEventReceive9+ instead.
onFileSelectorShow(deprecated)
onFileSelectorShow(callback: (event?: { callback: Function, fileSelector: object }) => void)
Called to process an HTML form whose input type is file, in response to the tapping of the Select File button.
NOTE
This API is supported since API version 8 and deprecated since API version 9. You are advised to use onShowFileSelector9+ instead.
onRenderExited9+
onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void)
Called when the rendering process exits abnormally.
Parameters
| Name | Type | Description |
|---|---|---|
| renderExitReason | RenderExitReason | Cause for the abnormal exit of the rendering process. |
Example
// 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)
}
})
}
}
}
onShowFileSelector9+
onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => boolean)
Called to process an HTML form whose input type is file, in response to the tapping of the Select File button.
Parameters
| Name | Type | Description |
|---|---|---|
| result | FileSelectorResult | File selection result to be sent to the <Web> component. |
| fileSelector | FileSelectorParam | Information about the file selector. |
Return value
| Type | Description |
|---|---|
| boolean | The value true means that the pop-up window provided by the system is displayed. If the callback returns false, the <Web> component cannot trigger the system dialog box. |
Example
// 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 file to be loaded:
<!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>
onResourceLoad9+
onResourceLoad(callback: (event: {url: string}) => void)
Called to notify the <Web> component of the URL of the loaded resource file.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | URL of the loaded resource file. |
Example
// 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)
})
}
}
}
onScaleChange9+
onScaleChange(callback: (event: {oldScale: number, newScale: number}) => void)
Called when the display ratio of this page changes.
Parameters
| Name | Type | Description |
|---|---|---|
| oldScale | number | Display ratio of the page before the change. |
| newScale | number | Display ratio of the page after the change. |
Example
// 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)
Called when the <Web> component is about to access a URL. This API is used to determine whether to block the access, which is allowed by default. This API is deprecated since API version 10. You are advised to use onLoadIntercept10+ instead.
Parameters
| Name | Type | Description |
|---|---|---|
| data | string |WebResourceRequest | URL information. |
Return value
| Type | Description |
|---|---|
| boolean | Returns true if the access is blocked; returns false otherwise. |
Example
// 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
})
}
}
}
onInterceptRequest9+
onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebResourceResponse)
Called when the <Web> component is about to access a URL. This API is used to block the URL and return the response data.
Parameters
| Name | Type | Description |
|---|---|---|
| request | WebResourceRequest | Information about the URL request. |
Return value
| Type | Description |
|---|---|
| WebResourceResponse | If response data is returned, the data is loaded based on the response data. If no response data is returned, null is returned, indicating that the data is loaded in the original mode. |
Example
// 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
})
}
}
}
onHttpAuthRequest9+
onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, realm: string}) => boolean)
Called when an HTTP authentication request is received.
Parameters
| Name | Type | Description |
|---|---|---|
| handler | HttpAuthHandler | User operation. |
| host | string | Host to which HTTP authentication credentials apply. |
| realm | string | Realm to which HTTP authentication credentials apply. |
Return value
| Type | Description |
|---|---|
| boolean | Returns true if the authentication is successful; returns false otherwise. |
Example
// 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
})
}
}
}
onSslErrorEventReceive9+
onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslError }) => void)
Called when an SSL error occurs during resource loading.
Parameters
| Name | Type | Description |
|---|---|---|
| handler | SslErrorHandler | User operation. |
| error | SslError | Error code. |
Example
// 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()
}
})
})
}
}
}
onClientAuthenticationRequest9+
onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationHandler, host : string, port : number, keyTypes : Array
Called when an SSL client certificate request is received.
Parameters
| Name | Type | Description |
|---|---|---|
| handler | ClientAuthenticationHandler | User operation. |
| host | string | Host name of the server that requests a certificate. |
| port | number | Port number of the server that requests a certificate. |
| keyTypes | Array<string> | Acceptable asymmetric private key types. |
| issuers | Array<string> | Issuer of the certificate that matches the private key. |
Example This example shows two-way authentication when interconnection with certificate management is not supported.
// 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()
}
})
})
}
}
}
This example shows two-way authentication when interconnection with certificate management is supported.
- Construct the singleton object 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);
}
}
- Implement two-way authentication.
// 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;
// Note: Replace com.example.myapplication with the actual application name.
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);
}
// Note: Add GlobalContext.getContext().setObject("AbilityContext", this.context) to the onCreate function in the MainAbility.ts file.
let abilityContext = GlobalContext.getContext().getObject("AbilityContext") as common.UIAbilityContext
await abilityContext.startAbilityForResult(
{
bundleName: "com.ohos.certmanager",
abilityName: "MainAbility",
uri: "requestAuthorize",
parameters: {
appUid: this.appUid, // Pass the UID of the requesting application.
}
} as Want)
.then((data: common.AbilityResult) => {
if (!data.resultCode && data.want) {
if (data.want.parameters) {
this.authUri = data.want.parameters.authUri as string; // Obtain the returned authUri after successful authorization.
}
}
})
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 is used for debugging and observation.
certManager = CertManagerService.getInstance();
build() {
Row() {
Column() {
Row() {
// Step 1: Perform authorization to obtain the URI.
Button('GrantApp')
.onClick(() => {
this.certManager.grantAppPm((data) => {
this.message = data;
});
})
// Step 2: After the authorization, in two-way authentication, the onClientAuthenticationRequest callback is used to send the URI to the web server for authentication.
Button("ClientCertAuth")
.onClick(() => {
this.controller.loadUrl('https://www.example2.com'); // Server website that supports two-way authentication.
})
}
Web({ src: 'https://www.example1.com', controller: this.controller })
.fileAccess(true)
.javaScriptAccess(true)
.domStorageAccess(true)
.onlineImageAccess(true)
.onClientAuthenticationRequest((event) => {
AlertDialog.show({
title: 'ClientAuth',
message: 'Text',
confirm: {
value: 'Confirm',
action: () => {
event.handler.confirm(uri);
}
},
cancel: () => {
event.handler.cancel();
}
})
})
}
}
.width('100%')
.height('100%')
}
}
onPermissionRequest9+
onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
Called when a permission request is received.
Parameters
| Name | Type | Description |
|---|---|---|
| request | PermissionRequest | User operation. |
Example
// 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 file to be loaded:
<!-- 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 Camera" value="Enable Camera" onclick="getMedia()"/>
<script>
function getMedia()
{
let constraints = {
video: {width: 500, height: 500},
audio: true
};
// Obtain the video camera area.
let video = document.getElementByld("video");
// Returned Promise object
let promise = navigator.mediaDevices.getUserMedia(constraints);
// then() is asynchronous. Invoke the MediaStream object as a parameter.
promise.then(function (MediaStream) {
video.srcObject = MediaStream;
video.play();
});
}
</script>
</body>
</html>
onContextMenuShow9+
onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebContextMenuResult }) => boolean)
Called when a context menu is displayed after the user clicks the right mouse button or long presses a specific element, such as an image or a link.
Parameters
| Name | Type | Description |
|---|---|---|
| param | WebContextMenuParam | Parameters related to the context menu. |
| result | WebContextMenuResult | Result of the context menu. |
Return value
| Type | Description |
|---|---|
| boolean | The value true means a custom menu, and false means the default menu. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onContextMenuShow((event) => {
if (event) {
console.info("x coord = " + event.param.x())
console.info("link url = " + event.param.getLinkUrl())
}
return true
})
}
}
}
onScroll9+
onScroll(callback: (event: {xOffset: number, yOffset: number}) => void)
Called when the scrollbar of the page scrolls.
Parameters
| Name | Type | Description |
|---|---|---|
| xOffset | number | Position of the scrollbar on the x-axis relative to the leftmost of the web page. |
| yOffset | number | Position of the scrollbar on the y-axis relative to the top of the web page. |
Example
// 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)
Called when a request to obtain the geolocation information is received.
Parameters
| Name | Type | Description |
|---|---|---|
| origin | string | Index of the origin. |
| geolocation | JsGeolocation | User operation. |
Example
// 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 file to be loaded:
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p id="demo">Click to obtain your current coordinates (which may take some time): </p>
<button onclick="getLocation()">Click Me</button>
<script>
var x=document.grtElementByld("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="Cannot obtain geographical location with the current browser.";
}
}
function showPosition(position)
{
x.innerHTML="Latitude:" + position.coords.latitude + "Longitude:" + position.coords.longitude;
}
</script>
</body>
</html>
onGeolocationHide
onGeolocationHide(callback: () => void)
Called to notify the user that the request for obtaining the geolocation information received when onGeolocationShow is called has been canceled.
Parameters
| Name | Type | Description |
|---|---|---|
| callback | () => void | Callback invoked when the request for obtaining geolocation information has been canceled. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src:'www.example.com', controller:this.controller })
.geolocationAccess(true)
.onGeolocationHide(() => {
console.log("onGeolocationHide...")
})
}
}
}
onFullScreenEnter9+
onFullScreenEnter(callback: (event: { handler: FullScreenExitHandler }) => void)
Called when the component enters full screen mode.
Parameters
| Name | Type | Description |
|---|---|---|
| handler | FullScreenExitHandler | Function handle for exiting full screen mode. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
handler: FullScreenExitHandler|null = null
build() {
Column() {
Web({ src:'www.example.com', controller:this.controller })
.onFullScreenEnter((event) => {
console.log("onFullScreenEnter...")
this.handler = event.handler
})
}
}
}
onFullScreenExit9+
onFullScreenExit(callback: () => void)
Called when the component exits full screen mode.
Parameters
| Name | Type | Description |
|---|---|---|
| callback | () => void | Callback invoked when the component exits full screen mode. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
handler: FullScreenExitHandler|null = null
build() {
Column() {
Web({ src:'www.example.com', controller:this.controller })
.onFullScreenExit(() => {
console.log("onFullScreenExit...")
if (this.handler) {
this.handler.exitFullScreen()
}
})
.onFullScreenEnter((event) => {
this.handler = event.handler
})
}
}
}
onWindowNew9+
onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetUrl: string, handler: ControllerHandler}) => void)
Called when a new window is created. This API takes effect when multiWindowAccess is enabled. If the event.handler.setWebController API is not called, the render process will be blocked. If opening a new window is not needed, set the parameter to null when calling the event.handler.setWebController API.
Parameters
| Name | Type | Description |
|---|---|---|
| isAlert | boolean | Whether to open the target URL in a new window. The value true means to open the target URL in a new window, and false means to open the target URL in a new tab. |
| isUserTrigger | boolean | Whether the creation is triggered by the user. The value true means that the creation is triggered by the user, and false means the opposite. |
| targetUrl | string | Target URL. |
| handler | ControllerHandler | WebviewController instance for setting the new window. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
// There are two <Web> components on the same page. When the WebComponent object opens a new window, the NewWebViewComp object is displayed.
@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 needs to be enabled.
.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()
// Return the WebviewController object corresponding to the new window to the <Web> kernel.
// If opening a new window is not needed, set the parameter to null when calling the event.handler.setWebController API.
// If the event.handler.setWebController API is not called, the render process will be blocked.
event.handler.setWebController(popController)
})
}
}
}
onWindowExit9+
onWindowExit(callback: () => void)
Called when this window is closed.
Parameters
| Name | Type | Description |
|---|---|---|
| callback | () => void | Callback invoked when the window is closed. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src:'www.example.com', controller: this.controller })
.onWindowExit(() => {
console.log("onWindowExit...")
})
}
}
}
onSearchResultReceive9+
onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMatches: number, isDoneCounting: boolean}) => void): WebAttribute
Called to notify the caller of the search result on the web page.
Parameters
| Name | Type | Description |
|---|---|---|
| activeMatchOrdinal | number | Sequence number of the current match, which starts from 0. |
| numberOfMatches | number | Total number of matches. |
| isDoneCounting | boolean | Whether the search operation on the current page is complete. This API may be called multiple times until isDoneCounting is true. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onSearchResultReceive(ret => {
if (ret) {
console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
"[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting)
}
})
}
}
}
onDataResubmitted9+
onDataResubmitted(callback: (event: {handler: DataResubmissionHandler}) => void)
Called when the web form data is resubmitted.
Parameters
| Name | Type | Description |
|---|---|---|
| handler | DataResubmissionHandler | Handler for resubmitting web form data. |
Example
// 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() {
// After you click Submit on the web page, you can click Refresh to trigger the function again.
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 file to be loaded:
<!-- 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="Submit">
</form>
</body>
</html>
onPageVisible9+
onPageVisible(callback: (event: {url: string}) => void)
Called when the old page is not displayed and the new page is about to be visible.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | URL of the new page that is able to be visible when the old page is not displayed. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src:'www.example.com', controller: this.controller })
.onPageVisible((event) => {
console.log('onPageVisible url:' + event.url)
})
}
}
}
onInterceptKeyEvent9+
onInterceptKeyEvent(callback: (event: KeyEvent) => boolean)
Called when the key event is intercepted and before it is consumed by the webview.
Parameters
| Name | Type | Description |
|---|---|---|
| event | KeyEvent | Key event that is triggered. |
Return value
| Type | Description |
|---|---|
| boolean | Whether to continue to transfer the key event to the webview kernel. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src:'www.example.com', controller: this.controller })
.onInterceptKeyEvent((event) => {
if (event.keyCode == 2017||event.keyCode == 2018) {
console.info(`onInterceptKeyEvent get event.keyCode ${event.keyCode}`)
return true;
}
return false;
})
}
}
}
onTouchIconUrlReceived9+
onTouchIconUrlReceived(callback: (event: {url: string, precomposed: boolean}) => void)
Called when an apple-touch-icon URL is received.
Parameters
| Name | Type | Description |
|---|---|---|
| url | string | Received apple-touch-icon URL. |
| precomposed | boolean | Whether the apple-touch-icon is precomposed. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src:'www.baidu.com', controller: this.controller })
.onTouchIconUrlReceived((event) => {
console.log('onTouchIconUrlReceived:' + JSON.stringify(event))
})
}
}
}
onFaviconReceived9+
onFaviconReceived(callback: (event: {favicon: image.PixelMap}) => void)
Called when this web page receives a new favicon.
Parameters
| Name | Type | Description |
|---|---|---|
| favicon | PixelMap | PixelMap object of the received favicon. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
import image from "@ohos.multimedia.image"
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State icon: image.PixelMap|undefined = undefined;
build() {
Column() {
Web({ src:'www.example.com', controller: this.controller })
.onFaviconReceived((event) => {
console.log('onFaviconReceived');
this.icon = event.favicon;
})
}
}
}
onAudioStateChanged10+
onAudioStateChanged(callback: (event: { playing: boolean }) => void)
Called when the audio playback status changes on the web page.
Parameters
| Name | Type | Description |
|---|---|---|
| playing | boolean | Audio playback status on the current page. The value true means that audio is being played, and false means the opposite. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
@State playing: boolean = false
build() {
Column() {
Web({ src:'www.example.com', controller: this.controller })
.onAudioStateChanged(event => {
this.playing = event.playing
console.debug('onAudioStateChanged playing: ' + this.playing)
})
}
}
}
onFirstContentfulPaint10+
onFirstContentfulPaint(callback: (event?: { navigationStartTick: number, firstContentfulPaintMs: number }) => void)
Called when the web page content is first rendered.
Parameters
| Name | Type | Description |
|---|---|---|
| navigationStartTick | number | Navigation start time, in microseconds. |
| firstContentfulPaintMs | number | Time between navigation and when the content is first rendered, in milliseconds. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src:'www.example.com', controller: this.controller })
.onFirstContentfulPaint(event => {
if (event) {
console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" +
event.navigationStartTick + ", [firstContentfulPaintMs]:" +
event.firstContentfulPaintMs)
}
})
}
}
}
onLoadIntercept10+
onLoadIntercept(callback: (event?: { data: WebResourceRequest }) => boolean)
Called when the <Web> component is about to access a URL. This API is used to determine whether to block the access, which is allowed by default.
Parameters
| Name | Type | Description |
|---|---|---|
| request | WebResourceRequest | Information about the URL request. |
Return value
| Type | Description |
|---|---|
| boolean | Returns true if the access is blocked; returns false otherwise. |
Example
// 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)
Called when the <Web> component obtains the focus.
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onRequestSelected(() => {
console.log('onRequestSelected')
})
}
}
}
onScreenCaptureRequest10+
onScreenCaptureRequest(callback: (event?: { handler: ScreenCaptureHandler }) => void)
Called when a screen capture request is received.
Parameters
| Name | Type | Description |
|---|---|---|
| handler | ScreenCaptureHandler | User operation. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onScreenCaptureRequest((event) => {
if (event) {
AlertDialog.show({
title: 'title: ' + event.handler.getOrigin(),
message: 'text',
primaryButton: {
value: 'deny',
action: () => {
event.handler.deny()
}
},
secondaryButton: {
value: 'onConfirm',
action: () => {
event.handler.grant({ captureMode: WebCaptureMode.HOME_SCREEN })
}
},
cancel: () => {
event.handler.deny()
}
})
}
})
}
}
}
onOverScroll10+
onOverScroll(callback: (event: {xOffset: number, yOffset: number}) => void)
Called to indicate the offset by which the web page overscrolls.
Parameters
| Name | Type | Description |
|---|---|---|
| xOffset | number | Horizontal overscroll offset based on the leftmost edge of the web page. |
| yOffset | number | Vertical overscroll offset based on the top edge of the web page. |
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.onOverScroll((event) => {
console.info("x = " + event.xOffset)
console.info("y = " + event.yOffset)
})
}
}
}
onControllerAttached10+
onControllerAttached(callback: () => void)
Called when the controller is successfully bound to the <Web> component. The controller must be WebviewController.
As the web page is not yet loaded when this callback is called, APIs for operating the web page cannot be used in the callback, for example, zoomIn and zoomOut. Other APIs, such as loadUrl and getWebId, which do not involve web page operations, can be used properly.
Example
The following example uses loadUrl in the callback to load the web page.
// 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"));
})
}
}
}
The following example uses getWebId in the callback
// 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 file to be loaded:
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
</body>
</html>
ConsoleMessage
Implements the ConsoleMessage object. For the sample code, see onConsole.
getLineNumber
getLineNumber(): number
Obtains the number of rows in this console message.
Return value
| Type | Description |
|---|---|
| number | Number of rows in the console message. |
getMessage
getMessage(): string
Obtains the log information of this console message.
Return value
| Type | Description |
|---|---|
| string | Log information of the console message. |
getMessageLevel
getMessageLevel(): MessageLevel
Obtains the level of this console message.
Return value
| Type | Description |
|---|---|
| MessageLevel | Level of the console message. |
getSourceId
getSourceId(): string
Obtains the path and name of the web page source file.
Return value
| Type | Description |
|---|---|
| string | Path and name of the web page source file. |
JsResult
Implements the JsResult object, which indicates the result returned to the <Web> component to indicate the user operation performed in the dialog box. For the sample code, see onAlert Event.
handleCancel
handleCancel(): void
Notifies the <Web> component of the user's cancel operation in the dialog box.
handleConfirm
handleConfirm(): void
Notifies the <Web> component of the user's confirm operation in the dialog box.
handlePromptConfirm9+
handlePromptConfirm(result: string): void
Notifies the <Web> component of the user's confirm operation in the dialog box as well as the dialog box content.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| result | string | Yes | - | User input in the dialog box. |
FullScreenExitHandler9+
Implements a FullScreenExitHandler object for listening for exiting full screen mode. For the sample code, see onFullScreenEnter.
exitFullScreen9+
exitFullScreen(): void
Exits full screen mode.
ControllerHandler9+
Implements a WebviewController object for new <Web> components. For the sample code, see onWindowNew.
setWebController9+
setWebController(controller: WebviewController): void
Sets a WebviewController object. If opening a new window is not needed, set the parameter to null.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| controller | WebviewController | Yes | - | WebviewController object of the <Web> component. If opening a new window is not needed, set it to null. |
WebResourceError
Implements the WebResourceError object. For the sample code, see onErrorReceive.
getErrorCode
getErrorCode(): number
Obtains the error code for resource loading.
Return value
| Type | Description |
|---|---|
| number | Error code for resource loading. |
getErrorInfo
getErrorInfo(): string
Obtains error information about resource loading.
Return value
| Type | Description |
|---|---|
| string | Error information about resource loading. |
WebResourceRequest
Implements the WebResourceRequest object. For the sample code, see onErrorReceive.
getRequestHeader
getResponseHeader() : Array<Header>
Obtains the information about the resource request header.
Return value
| Type | Description |
|---|---|
| Array<Header> | Information about the resource request header. |
getRequestUrl
getRequestUrl(): string
Obtains the URL of the resource request.
Return value
| Type | Description |
|---|---|
| string | URL of the resource request. |
isMainFrame
isMainFrame(): boolean
Checks whether the resource request is in the main frame.
Return value
| Type | Description |
|---|---|
| boolean | Whether the resource request is in the main frame. |
isRedirect
isRedirect(): boolean
Checks whether the resource request is redirected by the server.
Return value
| Type | Description |
|---|---|
| boolean | Whether the resource request is redirected by the server. |
isRequestGesture
isRequestGesture(): boolean
Checks whether the resource request is associated with a gesture (for example, a tap).
Return value
| Type | Description |
|---|---|
| boolean | Whether the resource request is associated with a gesture (for example, a tap). |
getRequestMethod9+
getRequestMethod(): string
Obtains the request method.
Return value
| Type | Description |
|---|---|
| string | Request method. |
Header
Describes the request/response header returned by the <Web> component.
| Name | Type | Description |
|---|---|---|
| headerKey | string | Key of the request/response header. |
| headerValue | string | Value of the request/response header. |
WebResourceResponse
Implements the WebResourceResponse object. For the sample code, see onHttpErrorReceive.
getReasonMessage
getReasonMessage(): string
Obtains the status code description of the resource response.
Return value
| Type | Description |
|---|---|
| string | Status code description of the resource response. |
getResponseCode
getResponseCode(): number
Obtains the status code of the resource response.
Return value
| Type | Description |
|---|---|
| number | Status code of the resource response. |
getResponseData
getResponseData(): string
Obtains the data in the resource response.
Return value
| Type | Description |
|---|---|
| string | Data in the resource response. |
getResponseEncoding
getResponseEncoding(): string
Obtains the encoding string of the resource response.
Return value
| Type | Description |
|---|---|
| string | Encoding string of the resource response. |
getResponseHeader
getResponseHeader() : Array<Header>
Obtains the resource response header.
Return value
| Type | Description |
|---|---|
| Array<Header> | Resource response header. |
getResponseMimeType
getResponseMimeType(): string
Obtains the MIME type of the resource response.
Return value
| Type | Description |
|---|---|
| string | MIME type of the resource response. |
setResponseData9+
setResponseData(data: string|number |Resource)
Sets the data in the resource response.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| data | string |number |Resource10+ | Yes | - | Resource response data to set. When set to a string, the value indicates a string in HTML format. When set to a number, the value indicates a file handle, which is closed by the system <Web> component. When set to a Resource object, the value indicates the file resources in the rawfile directory of the application. |
setResponseEncoding9+
setResponseEncoding(encoding: string)
Sets the encoding string of the resource response.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| encoding | string | Yes | - | Encoding string to set. |
setResponseMimeType9+
setResponseMimeType(mimeType: string)
Sets the MIME type of the resource response.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| mimeType | string | Yes | - | MIME type to set. |
setReasonMessage9+
setReasonMessage(reason: string)
Sets the status code description of the resource response.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| reason | string | Yes | - | Status code description to set. |
setResponseHeader9+
setResponseHeader(header: Array<Header>)
Sets the resource response header.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| header | Array<Header> | Yes | - | Resource response header to set. |
setResponseCode9+
setResponseCode(code: number)
Sets the status code of the resource response.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| code | number | Yes | - | Status code to set. |
setResponseIsReady9+
setResponseIsReady(IsReady: boolean)
Sets whether the resource response data is ready.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| IsReady | boolean | Yes | true | Whether the resource response data is ready. |
FileSelectorResult9+
Notifies the <Web> component of the file selection result. For the sample code, see onShowFileSelector.
handleFileList9+
handleFileList(fileList: Array<string>): void
Instructs the <Web> component to select a file.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| fileList | Array<string> | Yes | - | List of files to operate. |
FileSelectorParam9+
Implements the FileSelectorParam object. For the sample code, see onShowFileSelector.
getTitle9+
getTitle(): string
Obtains the title of this file selector.
Return value
| Type | Description |
|---|---|
| string | Title of the file selector. |
getMode9+
getMode(): FileSelectorMode
Obtains the mode of the file selector.
Return value
| Type | Description |
|---|---|
| FileSelectorMode | Mode of the file selector. |
getAcceptType9+
getAcceptType(): Array<string>
Obtains the file filtering type.
Return value
| Type | Description |
|---|---|
| Array<string> | File filtering type. |
isCapture9+
isCapture(): boolean
Checks whether multimedia capabilities are invoked.
Return value
| Type | Description |
|---|---|
| boolean | Whether multimedia capabilities are invoked. |
HttpAuthHandler9+
Implements the HttpAuthHandler object. For the sample code, see onHttpAuthRequest.
cancel9+
cancel(): void
Cancels HTTP authentication as requested by the user.
confirm9+
confirm(userName: string, pwd: string): boolean
Performs HTTP authentication with the user name and password provided by the user.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| userName | string | Yes | - | HTTP authentication user name. |
| pwd | string | Yes | - | HTTP authentication password. |
Return value
| Type | Description |
|---|---|
| boolean | Returns true if the authentication is successful; returns false otherwise. |
isHttpAuthInfoSaved9+
isHttpAuthInfoSaved(): boolean
Uses the account name and password cached on the server for authentication.
Return value
| Type | Description |
|---|---|
| boolean | Returns true if the authentication is successful; returns false otherwise. |
SslErrorHandler9+
Implements an SslErrorHandler object. For the sample code, see onSslErrorEventReceive Event.
handleCancel9+
handleCancel(): void
Cancels this request.
handleConfirm9+
handleConfirm(): void
Continues using the SSL certificate.
ClientAuthenticationHandler9+
Implements a ClientAuthenticationHandler object returned by the <Web> component. For the sample code, see onClientAuthenticationRequest.
confirm9+
confirm(priKeyFile : string, certChainFile : string): void
Uses the specified private key and client certificate chain.
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| priKeyFile | string | Yes | File that stores the private key, which is a directory including the file name. |
| certChainFile | string | Yes | File that stores the certificate chain, which is a directory including the file name. |
confirm10+
confirm(authUri : string): void
Required permissions: ohos.permission.ACCESS_CERT_MANAGER
Instructs the <Web> component to use the specified credentials (obtained from the certificate management module).
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| authUri | string | Yes | Key value of the credentials. |
cancel9+
cancel(): void
Cancels the client certificate request sent by the same host and port server. No additional event will be reported for requests from the same host and port server.
ignore9+
ignore(): void
Ignores this request.
PermissionRequest9+
Implements the PermissionRequest object. For the sample code, see onPermissionRequest.
deny9+
deny(): void
Denies the permission requested by the web page.
getOrigin9+
getOrigin(): string
Obtains the origin of this web page.
Return value
| Type | Description |
|---|---|
| string | Origin of the web page that requests the permission. |
getAccessibleResource9+
getAccessibleResource(): Array<string>
Obtains the list of accessible resources requested for the web page. For details about the resource types, see ProtectedResourceType.
Return value
| Type | Description |
|---|---|
| Array<string> | List of accessible resources requested by the web page. |
grant9+
grant(resources: Array<string>): void
Grants the permission for resources requested by the web page.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| resources | Array<string> | Yes | - | List of resources that can be requested by the web page with the permission to grant. |
ScreenCaptureHandler10+
Implements the ScreenCaptureHandler object for accepting or rejecting a screen capture request. For the sample code, see onScreenCaptureRequest Event.
deny10+
deny(): void
Rejects this screen capture request.
getOrigin10+
getOrigin(): string
Obtains the origin of this web page.
Return value
| Type | Description |
|---|---|
| string | Origin of the web page that requests the permission. |
grant10+
grant(config: ScreenCaptureConfig): void
Required permissions: ohos.permission.MICROPHONE, ohos.permission.CAPTURE_SCREEN
Grants the screen capture permission.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| config | ScreenCaptureConfig | Yes | - | Screen capture configuration. |
ContextMenuSourceType9+
| Name | Description |
|---|---|
| None | Other event sources. |
| Mouse | Mouse event. |
| LongPress | Long press event. |
ContextMenuMediaType9+
| Name | Description |
|---|---|
| None | Non-special media or other media types. |
| Image | Image. |
ContextMenuInputFieldType9+
| Name | Description |
|---|---|
| None | Non-input field. |
| PlainText | Plain text field, such as the text, search, or email field. |
| Password | Password field. |
| Number | Numeric field. |
| Telephone | Phone number field. |
| Other | Field of any other type. |
ContextMenuEditStateFlags9+
| Name | Description |
|---|---|
| NONE | Editing is not allowed. |
| CAN_CUT | The cut operation is allowed. |
| CAN_COPY | The copy operation is allowed. |
| CAN_PASTE | The paste operation is allowed. |
| CAN_SELECT_ALL | The select all operation is allowed. |
WebContextMenuParam9+
Implements a context menu, which is displayed after the user clicks the right mouse button or long presses a specific element, such as an image or a link. For the sample code, see onContextMenuShow.
x9+
x(): number
Obtains the X coordinate of the context menu.
Return value
| Type | Description |
|---|---|
| number | If the display is normal, a non-negative integer is returned. Otherwise, -1 is returned. |
y9+
y(): number
Obtains the Y coordinate of the context menu.
Return value
| Type | Description |
|---|---|
| number | If the display is normal, a non-negative integer is returned. Otherwise, -1 is returned. |
getLinkUrl9+
getLinkUrl(): string
Obtains the URL of the destination link.
Return value
| Type | Description |
|---|---|
| string | If it is a link that is being long pressed, the URL that has passed the security check is returned. |
getUnfilteredLinkUrl9+
getUnfilteredLinkUrl(): string
Obtains the URL of the destination link.
Return value
| Type | Description |
|---|---|
| string | If it is a link that is being long pressed, the original URL is returned. |
getSourceUrl9+
getSourceUrl(): string
Obtain the source URL.
Return value
| Type | Description |
|---|---|
| string | If the selected element has the src attribute, the URL in the src is returned. |
existsImageContents9+
existsImageContents(): boolean
Checks whether image content exists.
Return value
| Type | Description |
|---|---|
| boolean | The value true means that there is image content in the element being long pressed, and false means the opposite. |
getMediaType9+
getMediaType(): ContextMenuMediaType
Obtains the media type of this web page element.
Return value
| Type | Description |
|---|---|
| ContextMenuMediaType | Media type of the web page element. |
getSelectionText9+
getSelectionText(): string
Obtains the selected text.
Return value
| Type | Description |
|---|---|
| string | Selected text for the context menu. If no text is selected, null is returned. |
getSourceType9+
getSourceType(): ContextMenuSourceType
Obtains the event source of the context menu.
Return value
| Type | Description |
|---|---|
| ContextMenuSourceType | Event source of the context menu. |
getInputFieldType9+
getInputFieldType(): ContextMenuInputFieldType
Obtains the input field type of this web page element.
Return value
| Type | Description |
|---|---|
| ContextMenuInputFieldType | Input field type. |
isEditable9+
isEditable(): boolean
Checks whether this web page element is editable.
Return value
| Type | Description |
|---|---|
| boolean | Returns true if the web page element is editable; returns false otherwise. |
getEditStateFlags9+
getEditStateFlags(): number
Obtains the edit state flag of this web page element.
Return value
| Type | Description |
|---|---|
| number | Edit state flag of the web page element. For details, see ContextMenuEditStateFlags. |
WebContextMenuResult9+
Implements a WebContextMenuResult object. For the sample code, see onContextMenuShow.
closeContextMenu9+
closeContextMenu(): void
Closes this context menu. This API must be called when no operations in WebContextMenuResult are performed.
copyImage9+
copyImage(): void
Copies the image specified in WebContextMenuParam.
copy9+
copy(): void
Performs the copy operation related to this context menu.
paste9+
paste(): void
Performs the paste operation related to this context menu.
cut9+
cut(): void
Performs the cut operation related to this context menu.
selectAll9+
selectAll(): void
Performs the select all operation related to this context menu.
JsGeolocation
Implements the PermissionRequest object. For the sample code, see onGeolocationShow Event.
invoke
invoke(origin: string, allow: boolean, retain: boolean): void
Sets the geolocation permission status of a web page.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| origin | string | Yes | - | Index of the origin. |
| allow | boolean | Yes | - | Geolocation permission status. |
| retain | boolean | Yes | - | Whether the geolocation permission status can be saved to the system. You can manage the geolocation permissions saved to the system through GeolocationPermissions9+. |
MessageLevel
| Name | Description |
|---|---|
| Debug | Debug level. |
| Error | Error level. |
| Info | Information level. |
| Log | Log level. |
| Warn | Warning level. |
RenderExitReason
Enumerates the reasons why the rendering process exits.
| Name | Description |
|---|---|
| ProcessAbnormalTermination | The rendering process exits abnormally. |
| ProcessWasKilled | The rendering process receives a SIGKILL message or is manually terminated. |
| ProcessCrashed | The rendering process crashes due to segmentation or other errors. |
| ProcessOom | The program memory is running low. |
| ProcessExitUnknown | Other reason. |
MixedMode
| Name | Description |
|---|---|
| All | HTTP and HTTPS hybrid content can be loaded. This means that all insecure content can be loaded. |
| Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. |
| None | HTTP and HTTPS hybrid content cannot be loaded. |
CacheMode
| Name | Description |
|---|---|
| Default | The cache that has not expired is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet. |
| None | The cache is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet. |
| Online | The cache is not used to load the resources. All resources are obtained from the Internet. |
| Only | The cache alone is used to load the resources. |
FileSelectorMode
| Name | Description |
|---|---|
| FileOpenMode | Open and upload a file. |
| FileOpenMultipleMode | Open and upload multiple files. |
| FileOpenFolderMode | Open and upload a folder. |
| FileSaveMode | Save a file. |
HitTestType
| Name | Description |
|---|---|
| EditText | Editable area. |
| Email address. | |
| HttpAnchor | Hyperlink whose src is http. |
| HttpAnchorImg | Image with a hyperlink, where src is http. |
| Img | HTML::img tag. |
| Map | Geographical address. |
| Phone | Phone number. |
| Unknown | Unknown content. |
SslError9+
Enumerates the error codes returned by onSslErrorEventReceive API.
| Name | Description |
|---|---|
| Invalid | Minor error. |
| HostMismatch | The host name does not match. |
| DateInvalid | The certificate has an invalid date. |
| Untrusted | The certificate issuer is not trusted. |
ProtectedResourceType9+
| Name | Description | Remarks |
|---|---|---|
| MidiSysex | MIDI SYSEX resource. | Currently, only permission events can be reported. MIDI devices are not yet supported. |
| VIDEO_CAPTURE10+ | Video capture resource, such as a camera. | |
| AUDIO_CAPTURE10+ | Audio capture resource, such as a microphone. |
WebDarkMode9+
| Name | Description |
|---|---|
| Off | The web dark mode is disabled. |
| On | The web dark mode is enabled. |
| Auto | The web dark mode setting follows the system settings. |
WebCaptureMode10+
| Name | Description |
|---|---|
| HOME_SCREEN | Capture of the home screen. |
WebMediaOptions10+
Describes the web-based media playback policy.
| Name | Type | Readable | Writable | Mandatory | Description |
|---|---|---|---|---|---|
| resumeInterval | number | Yes | Yes | No | Validity period for automatically resuming a paused web audio, in seconds. The maximum validity period is 60 seconds. Due to the approximate value, the validity period may have a deviation of less than 1 second. |
| audioExclusive | boolean | Yes | Yes | No | Whether the audio of multiple <Web> instances in an application is exclusive. |
ScreenCaptureConfig10+
Provides the web screen capture configuration.
| Name | Type | Readable | Writable | Mandatory | Description |
|---|---|---|---|---|---|
| captureMode | WebCaptureMode | Yes | Yes | Yes | Web screen capture mode. |
DataResubmissionHandler9+
Implements the DataResubmissionHandler object for resubmitting or canceling the web form data.
resend9+
resend(): void
Resends the web form data.
Example
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Column() {
Web({ src:'www.example.com', controller: this.controller })
.onDataResubmitted((event) => {
console.log('onDataResubmitted')
event.handler.resend();
})
}
}
}
cancel9+
cancel(): void
Cancels the resending of web form data.
Example
// 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
Implements a WebController to control the behavior of the <Web> component. A WebController can control only one <Web> component, and the APIs in the WebController can be invoked only after it has been bound to the target <Web> component.
This API is deprecated since API version 9. You are advised to use WebviewController9+ instead.
Creating an Object
let webController: WebController = new WebController()
getCookieManager9+
getCookieManager(): WebCookie
Obtains the cookie management object of the <Web> component.
Return value
| Type | Description |
|---|---|
| WebCookie | Cookie management object. For details, see WebCookie. |
Example
// 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()
Requests focus for this web page.
This API is deprecated since API version 9. You are advised to use requestFocus9+ instead.
Example
// 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
Checks whether going to the previous page can be performed on the current page.
This API is deprecated since API version 9. You are advised to use accessBackward9+ instead.
Return value
| Type | Description |
|---|---|
| boolean | Returns true if going to the previous page can be performed on the current page; returns false otherwise. |
Example
// 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
Checks whether going to the next page can be performed on the current page.
This API is deprecated since API version 9. You are advised to use accessForward9+ instead.
Return value
| Type | Description |
|---|---|
| boolean | Returns true if going to the next page can be performed on the current page; returns false otherwise. |
Example
// 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
Performs a specific number of steps forward or backward from the current page.
This API is deprecated since API version 9. You are advised to use accessStep9+ instead.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| step | number | Yes | - | Number of the steps to take. A positive number means to go forward, and a negative number means to go backward. |
Return value
| Type | Description |
|---|---|
| boolean | Whether going forward or backward from the current page is successful. |
Example
// 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
Goes to the previous page based on the history stack. This API is generally used together with accessBackward.
This API is deprecated since API version 9. You are advised to use backward9+ instead.
Example
// 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
Goes to the next page based on the history stack. This API is generally used together with accessForward.
This API is deprecated since API version 9. You are advised to use forward9+ instead.
Example
// 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)
Deletes a specific application JavaScript object that is registered with the window through registerJavaScriptProxy. The deletion takes effect immediately, with no need for invoking the refresh API.
This API is deprecated since API version 9. You are advised to use deleteJavaScriptRegister9+ instead.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| name | string | Yes | - | Name of the registered JavaScript object, which can be used to invoke the corresponding object on the application side from the web side. |
Example
// 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
Obtains the element type of the area being clicked.
This API is deprecated since API version 9. You are advised to use getHitTest9+ instead.
Return value
| Type | Description |
|---|---|
| HitTestType | Element type of the area being clicked. |
Example
// 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 })
Loads data. If baseUrl is empty, the specified character string will be loaded using the data protocol.
If baseUrl is set to a data URL, the encoded string will be loaded by the <Web> component using the data protocol.
If baseUrl is set to an HTTP or HTTPS URL, the encoded string will be processed by the <Web> component as a non-encoded string in a manner similar to loadUrl.
This API is deprecated since API version 9. You are advised to use loadData9+ instead.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| data | string | Yes | - | Character string obtained after being Base64 or URL encoded. |
| mimeType | string | Yes | - | Media type (MIME). |
| encoding | string | Yes | - | Encoding type, which can be Base64 or URL. |
| baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the <Web> component to window.origin. |
| historyUrl | string | No | - | Historical record URL. If this parameter is not empty, it can be managed in historical records to implement page going backward and forward. This parameter is invalid when baseUrl is left empty. |
Example
// 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> })
Loads a URL using the specified HTTP header.
The object injected through loadUrl is valid only in the current document. It will be invalid on a new page navigated to through loadUrl.
The object injected through registerJavaScriptProxy is still valid on a new page redirected through loadUrl.
This API is deprecated since API version 9. You are advised to use loadUrl9+ instead.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| url | string | Yes | - | URL to load. |
| headers | Array<Header> | No | [] | Additional HTTP request header of the URL. |
Example
// 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
Called when the <Web> component enters the active state.
This API is deprecated since API version 9. You are advised to use onActive9+ instead.
Example
// 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
Called when the <Web> component enters the inactive state.
This API is deprecated since API version 9. You are advised to use onInactive9+ instead.
Example
// 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
Sets a zoom factor for the current web page.
This API is deprecated since API version 9. You are advised to use zoom9+ instead.
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| factor | number | Yes | Zoom factor to set. A positive value indicates zoom-in, and a negative value indicates zoom-out. |
Example
// 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()
Called when the <Web> component refreshes the web page.
This API is deprecated since API version 9. You are advised to use refresh9+ instead.
Example
// 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> })
Registers a JavaScript object with the window. APIs of this object can then be invoked in the window. You must invoke the refresh API for the registration to take effect.
This API is deprecated since API version 9. You are advised to use registerJavaScriptProxy9+ instead.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| object | object | Yes | - | Application-side JavaScript object to be registered. Methods can be declared, but attributes cannot. The parameters and return value can only be of the string, number, or Boolean type. |
| name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side. |
| methodList | Array<string> | Yes | - | Methods of the JavaScript object to be registered at the application side. |
Example
// 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 file to be loaded:
<!-- 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 })
Executes a JavaScript script. This API uses an asynchronous callback to return the script execution result. runJavaScript can be invoked only after loadUrl is executed. For example, it can be invoked in onPageEnd.
This API is deprecated since API version 9. You are advised to use runJavaScript9+ instead.
Parameters
| Name | Type | Mandatory | Default Value | Description |
|---|---|---|---|---|
| script | string | Yes | - | JavaScript script. |
| callback | (result: string) => void | No | - | Callback used to return the result. Returns null if the JavaScript script fails to be executed or no value is returned. |
Example
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
@State webResult: string = ''
build() {
Column() {
Text(this.webResult).fontSize(20)
Web({ src: $rawfile('index.html'), controller: this.controller })
.javaScriptAccess(true)
.onPageEnd(e => {
this.controller.runJavaScript({
script: 'test()',
callback: (result: string)=> {
this.webResult = result
console.info(`The test() return value is: ${result}`)
}})
if (e) {
console.info('url: ', e.url)
}
})
}
}
}
HTML file to be loaded:
<!-- 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()
Stops page loading.
This API is deprecated since API version 9. You are advised to use stop9+ instead.
Example
// 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
Clears the browsing history.
This API is deprecated since API version 9. You are advised to use clearHistory9+ instead.
Example
// 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)
Manages behavior of cookies in <Web> components. All <Web> components in an application share a WebCookie. You can use the getCookieManager API in controller to obtain the WebCookie for subsequent cookie management.
setCookie(deprecated)
setCookie(): boolean
Sets the cookie. This API returns the result synchronously. Returns true if the operation is successful; returns false otherwise.
This API is deprecated since API version 9. You are advised to use setCookie9+ instead.
Return value
| Type | Description |
|---|---|
| boolean | Returns true if the operation is successful; returns false otherwise. |
saveCookie(deprecated)
saveCookie(): boolean
Saves the cookies in the memory to the drive. This API returns the result synchronously.
This API is deprecated since API version 9. You are advised to use saveCookieAsync9+ instead.
Return value
| Type | Description |
|---|---|
| boolean | Operation result. |
你可能感兴趣的鸿蒙文章
harmony 鸿蒙ArkTS-based Declarative Development Paradigm