harmony 鸿蒙web

  • 2022-08-09
  • 浏览 (839)

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

harmony 鸿蒙Data Type Attributes

harmony 鸿蒙button

harmony 鸿蒙chart

harmony 鸿蒙divider

harmony 鸿蒙image-animator

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙label

harmony 鸿蒙marquee

0  赞