The <web> component displays web page content.
This component is supported since API version 6. Updates will be marked with a superscript to indicate their earliest API version.
Constraints
The <web> component does not follow the transition animation. A page allows only one <web> component.
Attributes
| Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
| src | string | - | No | Address of the web page to be displayed. The domain name of the address must use the HTTPS protocol and have completed ICP filing. If not set, no web page is displayed. |
| id | string | - | No | Unique ID of the component. It is required when you need to call component methods (such as reload) through JavaScript code. If not set, a component instance cannot be obtained through $element. |
Events
Only the following events are supported.
| Name | Parameter | Description |
|---|---|---|
| pagestart | {url: string} | Triggered when web page loading starts. |
| pagefinish | {url: string} | Triggered when web page loading is completed. |
| error | {url: string, errorCode: number, description: string} | Triggered when an error occurs while loading a web page or opening a web page. For details about the error codes, see Webview Error Codes and Universal Error Codes. |
Example
<!-- xxx.hml -->
<div style="height: 500px; width: 500px; flex-direction: column;">
<button onclick="reloadWeb">click to reload</button>
<web src="www.example.com" id="web" onpagestart="pageStart" onpagefinish="pageFinish" on:error="pageError"></web>
</div> // xxx.js
export default {
reloadWeb() {
this.$element('web').reload()
},
pageStart: function(e) {
console.info('web pageStart: ' + e.url)
},
pageFinish: function(e) {
console.info('web pageFinish: ' + e.url)
},
pageError: function(e) {
console.info('web pageError url: ' + e.url)
console.info('web pageError errorCode: ' + e.errorCode)
console.info('web pageError description: ' + e.description)
}
}