harmony 鸿蒙web
web
NOTE
This component is supported since API version 6. Updates will be marked with a superscript to indicate their earliest API version.
The <web> component displays web page content.
Required Permissions
ohos.permission.INTERNET, required only for accessing online web pages.
Constraints
The <web> component does not follow the transition animation. A page allows only one <web> component.
Child Components
Not supported
Attributes
Name | Type | Default Value | Mandatory | Description |
---|---|---|---|---|
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. |
id | string | - | No | Unique ID of the component. |
Styles
Universal style settings are not supported.
Events
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 during web page loading or opening. |
Methods
The following methods are supported.
Name | Parameter | Description |
---|---|---|
reload | - | Reloads a page. |
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)
}
}
你可能感兴趣的鸿蒙文章
harmony 鸿蒙JavaScript-compatible Web-like Development Paradigm
0
赞
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦