• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# web
2展示网页内容的组件。
3>![](../../public_sys-resources/icon-note.gif) **说明：**
4>   该组件从API version 6开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
5
6## 权限列表
7访问在线网页时需添加网络权限：ohos.permission.INTERNET
8
9## 约束
10web组件不跟随转场动画。一个页面仅支持一个web组件。
11
12## 子组件
13不支持。
14
15## 属性
16
17| 名称 | 参数类型 | 默认值 | 必填 | 描述 |
18| -------- | -------- | -------- | -------- | -------- |
19| src      | string |   -    |   否     |设置需要显示网页的地址，网址的域名必须为https协议且经过ICP备案。|
20| id  | string | -  | 否  |  组件的唯一标识。  |
21
22
23## 样式
24不支持通用样式设置。
25
26## 事件
27仅支持如下事件：
28| 名称 | 参数 | 描述 |
29| -------- |  -------- | -------- |
30| pagestart      | {url: string} | 加载网页时触发。 |
31| pagefinish  | {url: string} |  网页加载结束时触发。  |
32| error  | {url: string, errorCode: number, description: string} |  加载网页出现错误时触发或打开网页出错时触发。  |
33
34## 方法
35仅支持如下方法：
36| 名称 | 参数 | 描述 |
37| -------- |  -------- | -------- |
38| reload      | - | 重新加载页面。 |
39
40## 示例
41```
42<!-- xxx.hml -->
43<div style="height: 500px; width: 500px; flex-direction: column;">
44    <button onclick="reloadWeb">click to reload</button>
45    <web src="www.example.com" id="web" onpagestart="pageStart" onpagefinish="pageFinish" on:error="pageError"></web>
46</div>
47```
48
49```
50// xxx.js
51export default {
52    reloadWeb() {
53        this.$element('web').reload()
54    },
55
56    pageStart: function(e) {
57        console.info('web pageStart: ' + e.url)
58    },
59
60    pageFinish: function(e) {
61        console.info('web pageFinish: ' + e.url)
62    },
63
64    pageError: function(e) {
65        console.info('web pageError url: ' + e.url)
66        console.info('web pageError errorCode: ' + e.errorCode)
67        console.info('web pageError description: ' + e.description)
68    }
69}
70```