• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# web
2
3The **\<web>** component displays web page content.
4
5> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE** This component is supported since API version 6. Updates will be marked with a superscript to indicate their earliest API version.
6
7## Required Permissions
8
9ohos.permission.INTERNET, required only for accessing online web pages.
10
11## Constraints
12
13The **\<web>** component does not follow the transition animation. A page allows only one **\<web>** component.
14
15## Child Components
16
17Not supported
18
19## Attributes
20
21| Name | Type   | Default Value | Mandatory | Description                                                  |
22| ---- | ------ | ------------- | --------- | ------------------------------------------------------------ |
23| src  | string | -             | No        | Address of the web page to be displayed. The domain name of the website must compile with the HTTPS protocol and have received an ICP license. |
24| id   | string | -             | No        | Unique ID of the component.                                  |
25
26## Styles
27
28Universal style settings are not supported.
29
30## Events
31
32The following events are supported.
33
34| Name       | Parameter                                             | Description                                                  |
35| ---------- | ----------------------------------------------------- | ------------------------------------------------------------ |
36| pagestart  | {url: string}                                         | Triggered when web page loading starts.                      |
37| pagefinish | {url: string}                                         | Triggered when web page loading is completed.                |
38| error      | {url: string, errorCode: number, description: string} | Triggered when an error occurs during web page loading or opening. |
39
40## Methods
41
42The following methods are supported.
43
44| Name   | Parameter | Description     |
45| ------ | --------- | --------------- |
46| reload | -         | Reloads a page. |
47
48## Example
49
50```
51<!-- xxx.hml -->
52<div style="height: 500px; width: 500px; flex-direction: column;">
53    <button onclick="reloadWeb">click to reload</button>
54    <web src="www.example.com" id="web" onpagestart="pageStart" onpagefinish="pageFinish" on:error="pageError"></web>
55</div>
56// xxx.js
57export default {
58    reloadWeb() {
59        this.$element('web').reload()
60    },
61
62    pageStart: function(e) {
63        console.info('web pageStart: ' + e.url)
64    },
65
66    pageFinish: function(e) {
67        console.info('web pageFinish: ' + e.url)
68    },
69
70    pageError: function(e) {
71        console.info('web pageError url: ' + e.url)
72        console.info('web pageError errorCode: ' + e.errorCode)
73        console.info('web pageError description: ' + e.description)
74    }
75}
76```