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