• 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| -------- |  -------- | -------- |
31| pagestart      | {url: string} | 加载网页时触发。 |
32| pagefinish  | {url: string} |  网页加载结束时触发。  |
33| error  | {url: string, errorCode: number, description: string} |  加载网页出现错误时触发或打开网页出错时触发。  |
34
35## 方法
36仅支持如下方法：
37
38| 名称 | 参数 | 描述 |
39| -------- |  -------- | -------- |
40| reload      | - | 重新加载页面。 |
41
42## 示例
43```html
44<!-- xxx.hml -->
45<div style="height: 500px; width: 500px; flex-direction: column;">
46    <button onclick="reloadWeb">click to reload</button>
47    <web src="www.example.com" id="web" onpagestart="pageStart" onpagefinish="pageFinish" on:error="pageError"></web>
48</div>
49```
50
51```js
52// xxx.js
53export default {
54    reloadWeb() {
55        this.$element('web').reload()
56    },
57
58    pageStart: function(e) {
59        console.info('web pageStart: ' + e.url)
60    },
61
62    pageFinish: function(e) {
63        console.info('web pageFinish: ' + e.url)
64    },
65
66    pageError: function(e) {
67        console.info('web pageError url: ' + e.url)
68        console.info('web pageError errorCode: ' + e.errorCode)
69        console.info('web pageError description: ' + e.description)
70    }
71}
72```