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 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. WebController 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() {
      Web({ src: $rawfile("index.html"), controller: this.controller })
    }
  }
}

Example of loading local resource files in the sandbox:

  1. Use globalthis to obtain the path of the sandbox.

    // xxx.ets
    import web_webview from '@ohos.web.webview'
    let url = 'file://' + globalThis.filesDir + '/xxx.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 })
        }
      }
    }
    
  2. Modify the MainAbility.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 the Application Development Path.

    // xxx.ts
    import UIAbility from '@ohos.app.ability.UIAbility';
    import web_webview from '@ohos.web.webview';
    
    export default class EntryAbility extends UIAbility {
        onCreate(want, launchParam) {
            // Bind filesDir to the globalThis object to implement data synchronization between the UIAbility component and the UI.
            globalThis.filesDir = this.context.filesDir
            console.log("Sandbox path is " + globalThis.filesDir)
        }
    }
    
    <!-- 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. WebController is deprecated since API version 9. You are advised to use WebviewController instead.

Example

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

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  testObj = {
    test: (data1, data2, data3) => {
      console.log("data1:" + data1)
      console.log("data2:" + data2)
      console.log("data3:" + data3)
      return "AceString"
    },
    toString: () => {
      console.log('toString' + "interface instead.")
    }
  }
  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.

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: 'www.example.com', controller: this.controller })
      .horizontalScrollBarAccess(true)
    }
  }
}
<!--xxx.html-->
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
      body {
        width:3000px;
        height:3000px;
        padding-right:170px;
        padding-left:170px;
        border:5px solid blueviolet
      }
    </style>
</head>
<body>
Scroll Test
</body>
</html>

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: 'www.example.com', controller: this.controller })
      .verticalScrollBarAccess(true)
    }
  }
}
<!--xxx.html-->
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
      body {
        width:3000px;
        height:3000px;
        padding-right:170px;
        padding-left:170px;
        border:5px solid blueviolet
      }
    </style>
</head>
<body>
Scroll Test
</body>
</html>

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.

Example

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

@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.

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

userAgent(userAgent: string)

Sets the user agent.

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

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

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: 'www.example.com', controller: this.controller })
        .onAlert((event) => {
          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
        })
    }
  }
}

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: 'www.example.com', controller: this.controller })
        .onBeforeUnload((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
        })
    }
  }
}

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: 'www.example.com', controller: this.controller })
        .onConfirm((event) => {
          console.log("event.url:" + event.url)
          console.log("event.message:" + event.message)
          console.log("event.result:" + event.result)
          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
        })
    }
  }
}

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: 'www.example.com', controller: this.controller })
        .onPrompt((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.handleConfirm()
              }
            },
            cancel: () => {
              event.result.handleCancel()
            }
          })
          return true
        })
    }
  }
}

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) => {
          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)

Parameters

Name Type Description
url string URL for the download task.
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 contentLength 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) => {
          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) => {
          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) => {
          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) => {
          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) => {
          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) => {
          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) => {
          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) => {
          console.log('url:' + event.url + ' isReload:' + event.isRefreshed)
        })
    }
  }
}

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) => {
          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'

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

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onShowFileSelector((event) => {
          AlertDialog.show({
            title: event.fileSelector.getTitle(),
            message: 'isCapture:' + event.fileSelector.isCapture() + " mode:" + event.fileSelector.getMode() + 'acceptType:' + event.fileSelector.getAcceptType(),
            confirm: {
              value: 'upload',
              action: () => {
                let fileList: Array<string> = [
                  '/data/storage/el2/base/test',
                ]
                event.result.handleFileList(fileList)
              }
            },
            cancel: () => {
              let fileList: Array<string> = []
              event.result.handleFileList(fileList)
            }
          })
          return true
        })
    }
  }
}

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.

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) => {
          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) => {
          console.log('url:' + event.request.getRequestUrl())
          var head1:Header = {
            headerKey:"Connection",
            headerValue:"keep-alive"
          }
          var head2:Header = {
            headerKey:"Cache-Control",
            headerValue:"no-cache"
          }
          var 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) => {
          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()
            }
          })
          return true
        })
    }
  }
}

onClientAuthenticationRequest9+

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

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 Acceptable asymmetric private key types.
issuers Array Issuer of the certificate that matches the private key.

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

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: 'www.example.com', controller: this.controller })
        .onPermissionRequest((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()
            }
          })
        })
    }
  }
}

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) => {
          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:'www.example.com', controller:this.controller })
      .geolocationAccess(true)
      .onGeolocationShow((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)
          }
        })
      })
    }
  }
}

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
  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
  build() {
    Column() {
      Web({ src:'www.example.com', controller:this.controller })
      .onFullScreenExit(() => {
        console.log("onFullScreenExit...")
        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
build() {
    Column() {
      Web({ src: "", controller: this.webviewController1 })
        .javaScriptAccess(true)
        .multiWindowAccess(false)
        .onWindowExit(()=> {
          console.info("NewWebViewComp onWindowExit")
          this.controller.close()
        })
      }
  }
}

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

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;
  build() {
    Column() {
      Web({ src:'www.example.com', controller: this.controller })
       .onFaviconReceived((event) => {
        console.log('onFaviconReceived');
        this.icon = event.favicon;
      })
    }
  }
}

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

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.

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.

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)

Sets the data in the resource response.

Parameters

Name Type Mandatory Default Value Description
data string | number Yes - Resource response data to set. When set to a number, the value indicates a file handle.

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.

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.

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

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.

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+.

Creating an Object

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+.

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+.

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+.

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+.

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+.

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+.

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 therefresh API.

This API is deprecated since API version 9. You are advised to use deleteJavaScriptRegister9+.

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+.

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+.

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+.

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+.

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+.

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+.

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+.

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+.

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
@Entry
@Component
struct Index {
  controller: WebController = new WebController()
  testObj = {
    test: (data) => {
      return "ArkUI Web Component"
    },
    toString: () => {
      console.log('Web Component toString')
    }
  }
  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)
    }
  }
}
<!-- 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+.

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}`)
          }})
        console.info('url: ', e.url)
      })
    }
  }
}
<!-- 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+.

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+.

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(url: string, value: string): 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.

Parameters

Name Type Mandatory Default Value Description
url string Yes - URL of the cookie to set. A complete URL is recommended.
value string Yes - Value of the cookie to set.

Return value

Type Description
boolean Returns true if the operation is successful; returns false otherwise.

Example

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

  build() {
    Column() {
      Button('setCookie')
        .onClick(() => {
          let result = this.controller.getCookieManager().setCookie("https://www.example.com", "a=b")
          console.log("result: " + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

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.

Example

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

  build() {
    Column() {
      Button('saveCookie')
        .onClick(() => {
          let result = this.controller.getCookieManager().saveCookie()
          console.log("result: " + result)
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}