Web

NOTE This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

The <Web> component can be used to display web pages.

Required Permissions

ohos.permission.INTERNET, required only for accessing online web pages.

Child Components

None

APIs

• Web(options: { src: string, controller?: WebController })

  Table 1 Parameters of options

NOTE

• Transition animation is not supported.
• Multi-instance is not supported.
• Only local audio and video are supported for playback.

Attributes

NOTE

Only the following universal attributes are supported: width, height, padding, margin, and border.

• MixedMode

Events

Universal events are not supported.

ConsoleMessage

• APIs

• MessageLevel enums

JsResult

Represents the result returned to the <Web> component to indicate the operation performed in the dialog box.

• APIs

WebResourceError

• APIs

WebResourceRequest

• APIs

Header

Describes the request/response header object returned by the <Web> component.

• Parameters

WebResourceResponse

• APIs

WebController

Defines a WebController to control the behavior of the <Web> component. A WebController can control only one <Web> component, and the APIs in the WebController can be invoked only after it has been bound to the target <Web> component.

Creating an Object

webController: WebController = new WebController()

accessBackward

accessBackward(): boolean

Checks whether going to the previous page can be performed on the current page.

accessForward

accessForward(): boolean

Checks whether going to the next page can be performed on the current page.

accessStep

accessStep(step: number): boolean

Indicates whether a specific number of steps forward or backward can be performed on the current page.

• Parameters

• Return value

backward

backward(): void

Goes to the previous page based on the history stack. This API is generally used together with accessBackward.

deleteJavaScriptRegister

deleteJavaScriptRegister(name: string): void

Deletes a specific application JavaScript object that is registered with the window through registerJavaScriptProxy.

• Parameters

forward

forward(): void

Goes to the next page based on the history stack. This API is generally used together with accessForward.

getHitTest

getHitTest(): HitTestType

Obtains the element type of the area being clicked.

• HitTestType enums

loadData

loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string }): void

Loads data. If baseUrl is empty, the specified character string will be loaded using the data protocol.

If baseUrl is set to a data URL, the encoded string will be loaded by the <Web> component using the data protocol.

If baseUrl is set to an HTTP or HTTPS URL, the encoded string will be processed by the <Web> component as a non-encoded string in a manner similar to loadUrl.

• options

loadUrl

loadUrl(options:{ url: string, headers?: Array<Header> }): void

Loads a URL using the specified HTTP header.

The object injected through loadUrl is valid only in the current document. It will be invalid on a new page navigated to through loadUrl.

Objects injected through registerJavaScriptProxy are still valid on a new page navigated to through loadUrl.

• options

onActive

onActive(): void

Invoked to instruct the <Web> component to enter the foreground, active state.

onInactive

onInactive(): void

Invoked to instruct the <Web> component to enter the inactive state.

refresh

refresh(): void

Invoked to instruct the <Web> component to refresh the web page.

registerJavaScriptProxy

registerJavaScriptProxy(options: { object: object, name: string, methodList: Array<string> }): void

Injects a JavaScript object into the window and invokes the methods of the object in the window. After the registration, the refresh API must be invoked for the registration to take effect.

• options

runJavaScript

runJavaScript(options: { script: string, callback?: (result: string) => void }): void

Asynchronously executes a JavaScript script. This API uses a callback to return the script execution result.runJavaScript can be invoked only after loadUrl is executed. For example, it can be executed in onPageEnd.

• options

stop

stop(): void

Stops page loading.

Example

// webComponent.ets
@Entry
@Component
struct WebComponent {
  @State javaScriptAccess: boolean = true;
  @State fileAccess: boolean = true;
  controller: WebController = new WebController();
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
      .javaScriptAccess(this.javaScriptAccess)
      .fileAccess(this.fileAccess)
      .onPageEnd(e => {
        // test() has been defined in index.html.
        this.controller.runJavaScript({ script: 'test()' });
        console.log("url: ", e.url);
      })
    }
  }
}

<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
    Hello world!
</body>
<script type="text/javascript">
	function test() {
		console.log('Ark WebComponent');
	}
</script>
</html>