Web

The <Web> component can be used to display web pages. It can be used with the @ohos.web.webview module, which provides APIs for web control.

NOTE

• This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
• You can preview how this component looks on a real device, but not in the DevEco Studio Previewer.

Required Permissions

To use online resources, the application must have the ohos.permission.INTERNET permission. For details about how to apply for a permission, see Declaring Permissions.

Child Components

Not supported

APIs

Web(options: { src: ResourceStr, controller: WebviewController | WebController})

NOTE

Transition animation is not supported.

<Web> components on a page must be bound to different WebviewControllers.

Parameters

Example

Example of loading online web pages:

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

Example of loading local web pages:

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      // Load a local resource file through $rawfile.
      Web({ src: $rawfile("index.html"), controller: this.controller })
    }
  }
}

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      // Load a local resource file through the resource protocol.
      Web({ src: "resource://rawfile/index.html", controller: this.controller })
    }
  }
}

Example of loading local resource files in the sandbox:

1. Obtain the sandbox path through the constructed singleton object GlobalContext.

     // GlobalContext.ts
     export class GlobalContext {
       private constructor() {}
       private static instance: GlobalContext;
       private _objects = new Map<string, Object>();
   
       public static getContext(): GlobalContext {
         if (!GlobalContext.instance) {
           GlobalContext.instance = new GlobalContext();
         }
         return GlobalContext.instance;
       }
   
       getObject(value: string): Object | undefined {
         return this._objects.get(value);
       }
   
       setObject(key: string, objectClass: Object): void {
         this._objects.set(key, objectClass);
       }
     }
   

    // xxx.ets
     import web_webview from '@ohos.web.webview'
     import { GlobalContext } from '../GlobalContext.ts'
   
     let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html'
   
     @Entry
     @Component
     struct WebComponent {
       controller: web_webview.WebviewController = new web_webview.WebviewController()
       build() {
         Column() {
           // Load the files in the sandbox.
           Web({ src: url, controller: this.controller })
         }
       }
     }
   

2. Modify the EntryAbility.ets file.

   The following uses filesDir as an example to describe how to obtain the path of the sandbox. For details about how to obtain other paths, see Obtaining Application File Paths.

     // xxx.ts
     import UIAbility from '@ohos.app.ability.UIAbility';
     import AbilityConstant from '@ohos.app.ability.AbilityConstant';
     import Want from '@ohos.app.ability.Want';
     import web_webview from '@ohos.web.webview';
     import { GlobalContext } from '../GlobalContext'
   
     export default class EntryAbility extends UIAbility {
         onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
             // Data synchronization between the UIAbility component and UI can be implemented by binding filesDir to the GlobalContext object.
             GlobalContext.getContext().setObject("filesDir", this.context.filesDir);
             console.log("Sandbox path is " + GlobalContext.getContext().getObject("filesDir"))
         }
     }
   

HTML file to be loaded:

  <!-- index.html -->
  <!DOCTYPE html>
  <html>
      <body>
          <p>Hello World</p>
      </body>
  </html>

Attributes

The following universal attributes are supported: aspectRatio, backdropBlur, bindContentCover, bindContextMenu, bindMenu, bindSheet, borderColor, borderRadius, borderStyle, borderWidth, clip, constraintSize, defaultFocus, focusable, tabIndex, groupDefaultFocus, focusOnTouch, displayPriority, enabled, flexBasis, flexGrow, flexShrink, layoutWeight, id, gridOffset, gridSpan, useSizeType, height, touchable, margin, markAnchor, offset, width, zIndex, visibility, rotate, transform, responseRegion, size, stateStyles, opacity, shadow, sharedTransition, and transition.

domStorageAccess

domStorageAccess(domStorageAccess: boolean)

Sets whether to enable the DOM Storage API. By default, this feature is disabled.

System capability: SystemCapability.Web.Webview.Core

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .domStorageAccess(true)
    }
  }
}

fileAccess

fileAccess(fileAccess: boolean)

Sets whether to enable access to the file system in the application. This setting does not affect the access to the files specified through $rawfile(filepath/filename).

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .fileAccess(true)
    }
  }
}

imageAccess

imageAccess(imageAccess: boolean)

Sets whether to enable automatic image loading. By default, this feature is enabled.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .imageAccess(true)
    }
  }
}

javaScriptProxy

javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array<string>, controller: WebviewController | WebController})

Registers a JavaScript object with the window. APIs of this object can then be invoked in the window. The parameters cannot be updated. Only one object can be registered through this API. To register multiple objects, use registerJavaScriptProxy⁹⁺.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

class TestObj {
  constructor() {
  }

  test(data1: string, data2: string, data3: string): string {
    console.log("data1:" + data1)
    console.log("data2:" + data2)
    console.log("data3:" + data3)
    return "AceString"
  }

  toString(): void {
    console.log('toString' + "interface instead.")
  }
}

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  testObj = new TestObj();
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .javaScriptAccess(true)
        .javaScriptProxy({
          object: this.testObj,
          name: "objName",
          methodList: ["test", "toString"],
          controller: this.controller,
      })
    }
  }
}

javaScriptAccess

javaScriptAccess(javaScriptAccess: boolean)

Sets whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .javaScriptAccess(true)
    }
  }
}

mixedMode

mixedMode(mixedMode: MixedMode)

Sets whether to enable loading of HTTP and HTTPS hybrid content can be loaded. By default, this feature is disabled.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State mode: MixedMode = MixedMode.All
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .mixedMode(this.mode)
    }
  }
}

onlineImageAccess

onlineImageAccess(onlineImageAccess: boolean)

Sets whether to enable access to online images through HTTP and HTTPS. By default, this feature is enabled.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onlineImageAccess(true)
    }
  }
}

zoomAccess

zoomAccess(zoomAccess: boolean)

Sets whether to enable zoom gestures. By default, this feature is enabled.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .zoomAccess(true)
    }
  }
}

overviewModeAccess

overviewModeAccess(overviewModeAccess: boolean)

Sets whether to load web pages by using the overview mode. By default, this feature is enabled. Currently, only mobile devices are supported.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .overviewModeAccess(true)
    }
  }
}

databaseAccess

databaseAccess(databaseAccess: boolean)

Sets whether to enable database access. By default, this feature is disabled.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .databaseAccess(true)
    }
  }
}

geolocationAccess

geolocationAccess(geolocationAccess: boolean)

Sets whether to enable geolocation access. By default, this feature is enabled.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .geolocationAccess(true)
    }
  }
}

mediaPlayGestureAccess

mediaPlayGestureAccess(access: boolean)

Sets whether video playback must be started by user gestures. This API is not applicable to videos that do not have an audio track or whose audio track is muted.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State access: boolean = true
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .mediaPlayGestureAccess(this.access)
    }
  }
}

multiWindowAccess⁹⁺

multiWindowAccess(multiWindow: boolean)

Sets whether to enable the multi-window permission. By default, this feature is disabled. Enabling the multi-window permission requires implementation of the onWindowNew event. For the sample code, see onWindowNew.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
      .multiWindowAccess(false)
    }
  }
}

horizontalScrollBarAccess⁹⁺

horizontalScrollBarAccess(horizontalScrollBar: boolean)

Sets whether to display the horizontal scrollbar, including the default system scrollbar and custom scrollbar. By default, the horizontal scrollbar is displayed.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
      .horizontalScrollBarAccess(true)
    }
  }
}

HTML file to be loaded:

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
      body {
        width:3000px;
        height:3000px;
        padding-right:170px;
        padding-left:170px;
        border:5px solid blueviolet
      }
    </style>
</head>
<body>
Scroll Test
</body>
</html>

verticalScrollBarAccess⁹⁺

verticalScrollBarAccess(verticalScrollBar: boolean)

Sets whether to display the vertical scrollbar, including the default system scrollbar and custom scrollbar. By default, the vertical scrollbar is displayed.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
      .verticalScrollBarAccess(true)
    }
  }
}

HTML file to be loaded:

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
      body {
        width:3000px;
        height:3000px;
        padding-right:170px;
        padding-left:170px;
        border:5px solid blueviolet
      }
    </style>
</head>
<body>
Scroll Test
</body>
</html>

password^(deprecated)

password(password: boolean)

Sets whether the password should be saved. This API is a void API.

NOTE

This API is deprecated since API version 10, and no new API is provided as a substitute.

cacheMode

cacheMode(cacheMode: CacheMode)

Sets the cache mode.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State mode: CacheMode = CacheMode.None
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .cacheMode(this.mode)
    }
  }
}

textZoomAtio^(deprecated)

textZoomAtio(textZoomAtio: number)

Sets the text zoom ratio of the page. The default value is 100, which indicates 100%.

This API is deprecated since API version 9. You are advised to use textZoomRatio⁹⁺ instead.

Parameters

Example

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @State atio: number = 150
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .textZoomAtio(this.atio)
    }
  }
}

textZoomRatio⁹⁺

textZoomRatio(textZoomRatio: number)

Sets the text zoom ratio of the page. The default value is 100, which indicates 100%.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State atio: number = 150
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .textZoomRatio(this.atio)
    }
  }
}

initialScale⁹⁺

initialScale(percent: number)

Sets the scale factor of the entire page. The default value is 100%.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State percent: number = 100
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .initialScale(this.percent)
    }
  }
}

userAgent^(deprecated)

userAgent(userAgent: string)

Sets the user agent.

NOTE

This API is supported since API version 8 and deprecated since API version 10. You are advised to use setCustomUserAgent¹⁰⁺ instead.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36'
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .userAgent(this.userAgent)
    }
  }
}

blockNetwork⁹⁺

blockNetwork(block: boolean)

Sets whether to block online downloads.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State block: boolean = true
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .blockNetwork(this.block)
    }
  }
}

defaultFixedFontSize⁹⁺

defaultFixedFontSize(size: number)

Sets the default fixed font size for the web page.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State fontSize: number = 16
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .defaultFixedFontSize(this.fontSize)
    }
  }
}

defaultFontSize⁹⁺

defaultFontSize(size: number)

Sets the default font size for the web page.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State fontSize: number = 13
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .defaultFontSize(this.fontSize)
    }
  }
}

minFontSize⁹⁺

minFontSize(size: number)

Sets the minimum font size for the web page.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State fontSize: number = 13
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .minFontSize(this.fontSize)
    }
  }
}

minLogicalFontSize⁹⁺

minLogicalFontSize(size: number)

Sets the minimum logical font size for the web page.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State fontSize: number = 13
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .minLogicalFontSize(this.fontSize)
    }
  }
}

webFixedFont⁹⁺

webFixedFont(family: string)

Sets the fixed font family for the web page.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State family: string = "monospace"
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .webFixedFont(this.family)
    }
  }
}

webSansSerifFont⁹⁺

webSansSerifFont(family: string)

Sets the sans serif font family for the web page.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State family: string = "sans-serif"
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .webSansSerifFont(this.family)
    }
  }
}

webSerifFont⁹⁺

webSerifFont(family: string)

Sets the serif font family for the web page.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State family: string = "serif"
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .webSerifFont(this.family)
    }
  }
}

webStandardFont⁹⁺

webStandardFont(family: string)

Sets the standard font family for the web page.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State family: string = "sans-serif"
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .webStandardFont(this.family)
    }
  }
}

webFantasyFont⁹⁺

webFantasyFont(family: string)

Sets the fantasy font family for the web page.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State family: string = "fantasy"
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .webFantasyFont(this.family)
    }
  }
}

webCursiveFont⁹⁺

webCursiveFont(family: string)

Sets the cursive font family for the web page.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State family: string = "cursive"
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .webCursiveFont(this.family)
    }
  }
}

darkMode⁹⁺

darkMode(mode: WebDarkMode)

Sets the web dark mode. By default, web dark mode is disabled. When it is enabled, the <Web> component enables the dark theme defined for web pages if the theme has been defined in prefers-color-scheme of a media query, and remains unchanged otherwise. To enable the forcible dark mode, use this API with forceDarkAccess.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State mode: WebDarkMode = WebDarkMode.On
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .darkMode(this.mode)
    }
  }
}

forceDarkAccess⁹⁺

forceDarkAccess(access: boolean)

Sets whether to enable forcible dark mode for the web page. By default, this feature is turned off. This API is applicable only when dark mode is enabled in darkMode.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State mode: WebDarkMode = WebDarkMode.On
  @State access: boolean = true
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .darkMode(this.mode)
        .forceDarkAccess(this.access)
    }
  }
}

tableData^(deprecated)

tableData(tableData: boolean)

Sets whether form data should be saved. This API is a void API.

NOTE

This API is deprecated since API version 10, and no new API is provided as a substitute.

wideViewModeAccess^(deprecated)

wideViewModeAccess(wideViewModeAccess: boolean)

Sets whether to support the viewport attribute of the HTML <meta> tag. This API is a void API.

NOTE

This API is deprecated since API version 10, and no new API is provided as a substitute.

pinchSmooth⁹⁺

pinchSmooth(isEnabled: boolean)

Sets whether to enable smooth pinch mode for the web page.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .pinchSmooth(true)
    }
  }
}

allowWindowOpenMethod¹⁰⁺

allowWindowOpenMethod(flag: boolean)

Sets whether to allow a new window to automatically open through JavaScript.

When flag is set to true, a new window can automatically open through JavaScript. When flag is set to false, a new window can still automatically open through JavaScript for user behavior, but cannot for non-user behavior. The user behavior here refers to that a user requests to open a new window (window.open) within 5 seconds.

This API takes effect only when javaScriptAccess is enabled.

This API opens a new window when multiWindowAccess is enabled and opens a local window when multiWindowAccess is disabled.

The default value of flag is subject to the settings of the persist.web.allowWindowOpenMethod.enabled system attribute. If this attribute is not set, the default value of flag is false.

To check the settings of persist.web.allowWindowOpenMethod.enabled,

run the hdc shell param get persist.web.allowWindowOpenMethod.enabled command. If the attribute is set to 0 or does not exist, you can run the hdc shell param set persist.web.allowWindowOpenMethod.enabled 1 command to enable it.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
// There are two <Web> components on the same page. When the WebComponent object opens a new window, the NewWebViewComp object is displayed. 
@CustomDialog
struct NewWebViewComp {
controller?: CustomDialogController
webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
build() {
    Column() {
      Web({ src: "", controller: this.webviewController1 })
        .javaScriptAccess(true)
        .multiWindowAccess(false)
        .onWindowExit(()=> {
          console.info("NewWebViewComp onWindowExit")
          if (this.controller) {
            this.controller.close()
          }
        })
      }
  }
}

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  dialogController: CustomDialogController | null = null
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .javaScriptAccess(true)
        // MultiWindowAccess needs to be enabled.
        .multiWindowAccess(true)
        .allowWindowOpenMethod(true)
        .onWindowNew((event) => {
          if (this.dialogController) {
            this.dialogController.close()
          }
          let popController:web_webview.WebviewController = new web_webview.WebviewController()
          this.dialogController = new CustomDialogController({
            builder: NewWebViewComp({webviewController1: popController})
          })
          this.dialogController.open()
          // Return the WebviewController object corresponding to the new window to the <Web> kernel.
          // If opening a new window is not needed, set the parameter to null when calling the event.handler.setWebController API.
          // If the event.handler.setWebController API is not called, the render process will be blocked.
          event.handler.setWebController(popController)
        })
    }
  }
}

mediaOptions¹⁰⁺

mediaOptions(options: WebMediaOptions)

Sets the web-based media playback policy, including the validity period for automatically resuming a paused web audio, and whether the audio of multiple <Web> instances in an application is exclusive.

NOTE

• Audios in the same <Web> instance are considered as the same audio.
• The media playback policy controls videos with an audio track.
• After the parameter settings are updated, the playback must be started again for the settings to take effect.
• It is recommended that you set the same audioExclusive value for all <Web> components.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State options: WebMediaOptions = {resumeInterval: 10, audioExclusive: true}
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .mediaOptions(this.options)
    }
  }
}

Events

The following universal events are supported: onAppear, onDisAppear, onBlur, onFocus, onDragEnd. onDragEnter, onDragStart, onDragMove, onDragLeave, onDrop, onHover, onMouse, onKeyEvent, onTouch, and onVisibleAreaChange.

onAlert

onAlert(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)

Called when alert() is invoked to display an alert dialog box on the web page.

Parameters

Return value

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: $rawfile("index.html"), controller: this.controller })
        .onAlert((event) => {
          if (event) {
            console.log("event.url:" + event.url)
            console.log("event.message:" + event.message)
            AlertDialog.show({
              title: 'onAlert',
              message: 'text',
              primaryButton: {
                value: 'cancel',
                action: () => {
                  event.result.handleCancel()
                }
              },
              secondaryButton: {
                value: 'ok',
                action: () => {
                  event.result.handleConfirm()
                }
              },
              cancel: () => {
                event.result.handleCancel()
              }
            })
          }
          return true
        })
    }
  }
}

HTML file to be loaded:

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>
<body>
  <h1>WebView onAlert Demo</h1>
  <button onclick="myFunction()">Click here</button>
  <script>
    function myFunction() {
      alert("Hello World");
    }
  </script>
</body>
</html>

onBeforeUnload

onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)

Called when this page is about to exit after the user refreshes or closes the page. This API takes effect only when the page has obtained focus.

Parameters

Return value

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: $rawfile("index.html"), controller: this.controller })
        .onBeforeUnload((event) => {
          if (event) {
            console.log("event.url:" + event.url)
            console.log("event.message:" + event.message)
            AlertDialog.show({
              title: 'onBeforeUnload',
              message: 'text',
              primaryButton: {
                value: 'cancel',
                action: () => {
                  event.result.handleCancel()
                }
              },
              secondaryButton: {
                value: 'ok',
                action: () => {
                  event.result.handleConfirm()
                }
              },
              cancel: () => {
                event.result.handleCancel()
              }
            })
          }
          return true
        })
    }
  }
}

HTML file to be loaded:

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>
<body onbeforeunload="return myFunction()">
  <h1>WebView onBeforeUnload Demo</h1>
  <a href="https://www.example.com">Click here</a>
  <script>
    function myFunction() {
      return "onBeforeUnload Event";
    }
  </script>
</body>
</html>

onConfirm

onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)

Called when confirm() is invoked by the web page.

Parameters

Return value

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: $rawfile("index.html"), controller: this.controller })
        .onConfirm((event) => {
          if (event) {
            console.log("event.url:" + event.url)
            console.log("event.message:" + event.message)
            AlertDialog.show({
              title: 'onConfirm',
              message: 'text',
              primaryButton: {
                value: 'cancel',
                action: () => {
                  event.result.handleCancel()
                }
              },
              secondaryButton: {
                value: 'ok',
                action: () => {
                  event.result.handleConfirm()
                }
              },
              cancel: () => {
                event.result.handleCancel()
              }
            })
          }
          return true
        })
    }
  }
}

HTML file to be loaded:

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>

<body>
  <h1>WebView onConfirm Demo</h1>
  <button onclick="myFunction()">Click here</button>
  <p id="demo"></p>
  <script>
    function myFunction() {
      let x;
      let r = confirm("click button!");
      if (r == true) {
        x = "ok";
      } else {
        x = "cancel";
      }
      document.getElementById("demo").innerHTML = x;
    }
  </script>
</body>
</html>

onPrompt⁹⁺

onPrompt(callback: (event?: { url: string; message: string; value: string; result: JsResult }) => boolean)

Triggered when prompt() is invoked by the web page.

Parameters

Return value

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: $rawfile("index.html"), controller: this.controller })
        .onPrompt((event) => {
          if (event) {
            console.log("url:" + event.url)
            console.log("message:" + event.message)
            console.log("value:" + event.value)
            AlertDialog.show({
              title: 'onPrompt',
              message: 'text',
              primaryButton: {
                value: 'cancel',
                action: () => {
                  event.result.handleCancel()
                }
              },
              secondaryButton: {
                value: 'ok',
                action: () => {
                  event.result.handlePromptConfirm(event.value)
                }
              },
              cancel: () => {
                event.result.handleCancel()
              }
            })
          }
          return true
        })
    }
  }
}

HTML file to be loaded:

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>

<body>
  <h1>WebView onPrompt Demo</h1>
  <button onclick="myFunction()">Click here</button>
  <p id="demo"></p>
  <script>
    function myFunction() {
      let message = prompt("Message info", "Hello World");
      if (message != null && message != "") {
        document.getElementById("demo").innerHTML = message;
      }
    }
  </script>
</body>
</html>

onConsole

onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)

Called to notify the host application of a JavaScript console message.

Parameters

Return value

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onConsole((event) => {
          if (event) {
            console.log('getMessage:' + event.message.getMessage())
            console.log('getSourceId:' + event.message.getSourceId())
            console.log('getLineNumber:' + event.message.getLineNumber())
            console.log('getMessageLevel:' + event.message.getMessageLevel())
          }
          return false
        })
    }
  }
}

onDownloadStart

onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void)

Instructs the main application to start downloading a file.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onDownloadStart((event) => {
          if (event) {
            console.log('url:' + event.url)
            console.log('userAgent:' + event.userAgent)
            console.log('contentDisposition:' + event.contentDisposition)
            console.log('contentLength:' + event.contentLength)
            console.log('mimetype:' + event.mimetype)
          }
        })
    }
  }
}

onErrorReceive

onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResourceError }) => void)

Called when an error occurs during web page loading. For better results, simplify the implementation logic in the callback. This API is called when there is no network connection.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onErrorReceive((event) => {
          if (event) {
            console.log('getErrorInfo:' + event.error.getErrorInfo())
            console.log('getErrorCode:' + event.error.getErrorCode())
            console.log('url:' + event.request.getRequestUrl())
            console.log('isMainFrame:' + event.request.isMainFrame())
            console.log('isRedirect:' + event.request.isRedirect())
            console.log('isRequestGesture:' + event.request.isRequestGesture())
            console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString())
            let result = event.request.getRequestHeader()
            console.log('The request header result size is ' + result.length)
            for (let i of result) {
              console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue)
            }
          }
        })
    }
  }
}

onHttpErrorReceive

onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: WebResourceResponse }) => void)

Called when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onHttpErrorReceive((event) => {
          if (event) {
            console.log('url:' + event.request.getRequestUrl())
            console.log('isMainFrame:' + event.request.isMainFrame())
            console.log('isRedirect:' + event.request.isRedirect())
            console.log('isRequestGesture:' + event.request.isRequestGesture())
            console.log('getResponseData:' + event.response.getResponseData())
            console.log('getResponseEncoding:' + event.response.getResponseEncoding())
            console.log('getResponseMimeType:' + event.response.getResponseMimeType())
            console.log('getResponseCode:' + event.response.getResponseCode())
            console.log('getReasonMessage:' + event.response.getReasonMessage())
            let result = event.request.getRequestHeader()
            console.log('The request header result size is ' + result.length)
            for (let i of result) {
              console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
            }
            let resph = event.response.getResponseHeader()
            console.log('The response header result size is ' + resph.length)
            for (let i of resph) {
              console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
            }
          }
        })
    }
  }
}

onPageBegin

onPageBegin(callback: (event?: { url: string }) => void)

Called when the web page starts to be loaded. This API is called only for the main frame content, and not for the iframe or frameset content.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onPageBegin((event) => {
          if (event) {
            console.log('url:' + event.url)
          }
        })
    }
  }
}

onPageEnd

onPageEnd(callback: (event?: { url: string }) => void)

Called when the web page loading is complete. This API takes effect only for the main frame content.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onPageEnd((event) => {
          if (event) {
            console.log('url:' + event.url)
          }
        })
    }
  }
}

onProgressChange

onProgressChange(callback: (event?: { newProgress: number }) => void)

Called when the web page loading progress changes.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onProgressChange((event) => {
          if (event) {
            console.log('newProgress:' + event.newProgress)
          }
        })
    }
  }
}

onTitleReceive

onTitleReceive(callback: (event?: { title: string }) => void)

Called when the document title of the web page is changed.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onTitleReceive((event) => {
          if (event) {
            console.log('title:' + event.title)
          }
        })
    }
  }
}

onRefreshAccessedHistory

onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void)

Called when loading of the web page is complete. This API is used by an application to update the historical link it accessed.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onRefreshAccessedHistory((event) => {
          if (event) {
            console.log('url:' + event.url + ' isReload:' + event.isRefreshed)
          }
        })
    }
  }
}

onSslErrorReceive^(deprecated)

onSslErrorReceive(callback: (event?: { handler: Function, error: object }) => void)

Called when an SSL error occurs during resource loading.

NOTE

This API is supported since API version 8 and deprecated since API version 9. You are advised to use onSslErrorEventReceive⁹⁺ instead.

onFileSelectorShow^(deprecated)

onFileSelectorShow(callback: (event?: { callback: Function, fileSelector: object }) => void)

Called to process an HTML form whose input type is file, in response to the tapping of the Select File button.

NOTE

This API is supported since API version 8 and deprecated since API version 9. You are advised to use onShowFileSelector⁹⁺ instead.

onRenderExited⁹⁺

onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void)

Called when the rendering process exits abnormally.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'chrome://crash/', controller: this.controller })
        .onRenderExited((event) => {
          if (event) {
            console.log('reason:' + event.renderExitReason)
          }
        })
    }
  }
}

onShowFileSelector⁹⁺

onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector: FileSelectorParam }) => boolean)

Called to process an HTML form whose input type is file, in response to the tapping of the Select File button.

Parameters

Return value

Example

// xxx.ets
import web_webview from '@ohos.web.webview';
import picker from '@ohos.file.picker';
import { BusinessError } from '@ohos.base';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .onShowFileSelector((event) => {
          console.log('MyFileUploader onShowFileSelector invoked')
          const documentSelectOptions = new picker.DocumentSelectOptions();
          let uri: string | null = null;
          const documentViewPicker = new picker.DocumentViewPicker();
          documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
            uri = documentSelectResult[0];
            console.info('documentViewPicker.select to file succeed and uri is:' + uri);
            if (event) {
              event.result.handleFileList([uri]);
            }
          }).catch((err: BusinessError) => {
            console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
          })
          return true
        })
    }
  }
}

HTML file to be loaded:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>
<body>
  <form id="upload-form" enctype="multipart/form-data">
    <input type="file" id="upload" name="upload"/>
    </form>
</body>
</html>

onResourceLoad⁹⁺

onResourceLoad(callback: (event: {url: string}) => void)

Called to notify the <Web> component of the URL of the loaded resource file.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onResourceLoad((event) => {
          console.log('onResourceLoad: ' + event.url)
        })
    }
  }
}

onScaleChange⁹⁺

onScaleChange(callback: (event: {oldScale: number, newScale: number}) => void)

Called when the display ratio of this page changes.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onScaleChange((event) => {
          console.log('onScaleChange changed from ' + event.oldScale + ' to ' + event.newScale)
        })
    }
  }
}

onUrlLoadIntercept^(deprecated)

onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => boolean)

Called when the <Web> component is about to access a URL. This API is used to determine whether to block the access, which is allowed by default. This API is deprecated since API version 10. You are advised to use onLoadIntercept¹⁰⁺ instead.

Parameters

Return value

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onUrlLoadIntercept((event) => {
          if (event) {
            console.log('onUrlLoadIntercept ' + event.data.toString())
          }
          return true
        })
    }
  }
}

onInterceptRequest⁹⁺

onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebResourceResponse)

Called when the <Web> component is about to access a URL. This API is used to block the URL and return the response data.

Parameters

Return value

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  responseweb: WebResourceResponse = new WebResourceResponse()
  heads:Header[] = new Array()
  @State webdata: string = "<!DOCTYPE html>\n" +
  "<html>\n"+
  "<head>\n"+
  "<title>intercept test</title>\n"+
  "</head>\n"+
  "<body>\n"+
  "<h1>intercept test</h1>\n"+
  "</body>\n"+
  "</html>"
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onInterceptRequest((event) => {
          if (event) {
            console.log('url:' + event.request.getRequestUrl())
          }
          let head1:Header = {
            headerKey:"Connection",
            headerValue:"keep-alive"
          }
          let head2:Header = {
            headerKey:"Cache-Control",
            headerValue:"no-cache"
          }
          let length = this.heads.push(head1)
          length = this.heads.push(head2)
          this.responseweb.setResponseHeader(this.heads)
          this.responseweb.setResponseData(this.webdata)
          this.responseweb.setResponseEncoding('utf-8')
          this.responseweb.setResponseMimeType('text/html')
          this.responseweb.setResponseCode(200)
          this.responseweb.setReasonMessage('OK')
          return this.responseweb
        })
    }
  }
}

onHttpAuthRequest⁹⁺

onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, realm: string}) => boolean)

Called when an HTTP authentication request is received.

Parameters

Return value

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  httpAuth: boolean = false

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onHttpAuthRequest((event) => {
          if (event) {
            AlertDialog.show({
              title: 'onHttpAuthRequest',
              message: 'text',
              primaryButton: {
                value: 'cancel',
                action: () => {
                  event.handler.cancel()
                }
              },
              secondaryButton: {
                value: 'ok',
                action: () => {
                  this.httpAuth = event.handler.isHttpAuthInfoSaved()
                  if (this.httpAuth == false) {
                    web_webview.WebDataBase.saveHttpAuthCredentials(
                      event.host,
                      event.realm,
                      "2222",
                      "2222"
                    )
                    event.handler.cancel()
                  }
                }
              },
              cancel: () => {
                event.handler.cancel()
              }
            })
          }
          return true
        })
    }
  }
}

onSslErrorEventReceive⁹⁺

onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslError }) => void)

Called when an SSL error occurs during resource loading.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onSslErrorEventReceive((event) => {
          AlertDialog.show({
            title: 'onSslErrorEventReceive',
            message: 'text',
            primaryButton: {
              value: 'confirm',
              action: () => {
                event.handler.handleConfirm()
              }
            },
            secondaryButton: {
              value: 'cancel',
              action: () => {
                event.handler.handleCancel()
              }
            },
            cancel: () => {
              event.handler.handleCancel()
            }
          })
        })
    }
  }
}

onClientAuthenticationRequest⁹⁺

onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationHandler, host : string, port : number, keyTypes : Array, issuers : Array}) => void)

Called when an SSL client certificate request is received.

Parameters

Example This example shows two-way authentication when interconnection with certificate management is not supported.

// xxx.ets API9
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onClientAuthenticationRequest((event) => {
          AlertDialog.show({
            title: 'onClientAuthenticationRequest',
            message: 'text',
            primaryButton: {
              value: 'confirm',
              action: () => {
                event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem")
              }
            },
            secondaryButton: {
              value: 'cancel',
              action: () => {
                event.handlqq
                er.cancel()
              }
            },
            cancel: () => {
              event.handler.ignore()
            }
          })
        })
    }
  }
}

This example shows two-way authentication when interconnection with certificate management is supported.

1. Construct the singleton object GlobalContext.

// GlobalContext.ts
  export class GlobalContext {
    private constructor() {}
    private static instance: GlobalContext;
    private _objects = new Map<string, Object>();

    public static getContext(): GlobalContext {
      if (!GlobalContext.instance) {
        GlobalContext.instance = new GlobalContext();
      }
      return GlobalContext.instance;
    }

    getObject(value: string): Object | undefined {
      return this._objects.get(value);
    }

    setObject(key: string, objectClass: Object): void {
      this._objects.set(key, objectClass);
    }
  }

2. Implement two-way authentication.

// xxx.ets API10
  import common from '@ohos.app.ability.common';
  import Want from '@ohos.app.ability.Want';
  import web_webview from '@ohos.web.webview'
  import { BusinessError } from '@ohos.base';
  import bundleManager from '@ohos.bundle.bundleManager'
  import { GlobalContext } from '../GlobalContext'

  let uri = "";

  export default class CertManagerService {
    private static sInstance: CertManagerService;
    private authUri = "";
    private appUid = "";

    public static getInstance(): CertManagerService {
      if (CertManagerService.sInstance == null) {
        CertManagerService.sInstance = new CertManagerService();
      }
      return CertManagerService.sInstance;
    }

    async grantAppPm(callback: (message: string) => void) {
      let message = '';
      let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT | bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION;
      // Note: Replace com.example.myapplication with the actual application name.
      try {
        bundleManager.getBundleInfoForSelf(bundleFlags).then((data) => {
          console.info('getBundleInfoForSelf successfully. Data: %{public}s', JSON.stringify(data));
          this.appUid = data.appInfo.uid.toString();
        }).catch((err: BusinessError) => {
          console.error('getBundleInfoForSelf failed. Cause: %{public}s', err.message);
        });
      } catch (err) {
        let message = (err as BusinessError).message;
        console.error('getBundleInfoForSelf failed: %{public}s', message);
      }

      // Note: Add GlobalContext.getContext().setObject("AbilityContext", this.context) to the onCreate function in the MainAbility.ts file.
      let abilityContext = GlobalContext.getContext().getObject("AbilityContext") as common.UIAbilityContext
      await abilityContext.startAbilityForResult(
        {
          bundleName: "com.ohos.certmanager",
          abilityName: "MainAbility",
          uri: "requestAuthorize",
          parameters: {
            appUid: this.appUid, // Pass the UID of the requesting application.
          }
        } as Want)
        .then((data: common.AbilityResult) => {
          if (!data.resultCode && data.want) {
            if (data.want.parameters) {
              this.authUri = data.want.parameters.authUri as string; // Obtain the returned authUri after successful authorization.
            }
          }
        })
      message += "after grantAppPm authUri: " + this.authUri;
      uri = this.authUri;
      callback(message)
    }
  }

  @Entry
  @Component
  struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController();
    @State message: string = 'Hello World' // message is used for debugging and observation.
    certManager = CertManagerService.getInstance();

    build() {
      Row() {
        Column() {
          Row() {
            // Step 1: Perform authorization to obtain the URI.
            Button('GrantApp')
              .onClick(() => {
                this.certManager.grantAppPm((data) => {
                  this.message = data;
                });
              })
            // Step 2: After the authorization, in two-way authentication, the onClientAuthenticationRequest callback is used to send the URI to the web server for authentication.
            Button("ClientCertAuth")
              .onClick(() => {
                this.controller.loadUrl('https://www.example2.com'); // Server website that supports two-way authentication.
              })
          }

          Web({ src: 'https://www.example1.com', controller: this.controller })
            .fileAccess(true)
            .javaScriptAccess(true)
            .domStorageAccess(true)
            .onlineImageAccess(true)

          .onClientAuthenticationRequest((event) => {
            AlertDialog.show({
              title: 'ClientAuth',
              message: 'Text',
              confirm: {
                value: 'Confirm',
                action: () => {
                  event.handler.confirm(uri);
                }
              },
              cancel: () => {
                event.handler.cancel();
              }
            })
          })
        }
      }
      .width('100%')
      .height('100%')
    }
  }

onPermissionRequest⁹⁺

onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)

Called when a permission request is received.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .onPermissionRequest((event) => {
          if (event) {
            AlertDialog.show({
              title: 'title',
              message: 'text',
              primaryButton: {
                value: 'deny',
                action: () => {
                  event.request.deny()
                }
              },
              secondaryButton: {
                value: 'onConfirm',
                action: () => {
                  event.request.grant(event.request.getAccessibleResource())
                }
              },
              cancel: () => {
                event.request.deny()
              }
            })
          }
        })
    }
  }
}

HTML file to be loaded:

 <!-- index.html -->
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
 </head>
 <body>
 <video id="video" width="500px" height="500px" autoplay="autoplay"></video>
 <canvas id="canvas" width="500px" height="500px"></canvas>
 <br>
 <input type="button" title="HTML5 Camera" value="Enable Camera" onclick="getMedia()"/>
 <script>
   function getMedia()
   {
     let constraints = {
       video: {width: 500, height: 500},
       audio: true
     };
     // Obtain the video camera area.
     let video = document.getElementByld("video");
     // Returned Promise object
     let promise = navigator.mediaDevices.getUserMedia(constraints);
     // then() is asynchronous. Invoke the MediaStream object as a parameter.
     promise.then(function (MediaStream) {
       video.srcObject = MediaStream;
       video.play();
     });
   }
 </script>
 </body>
 </html>

onContextMenuShow⁹⁺

onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebContextMenuResult }) => boolean)

Called when a context menu is displayed after the user clicks the right mouse button or long presses a specific element, such as an image or a link.

Parameters

Return value

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
import pasteboard from '@ohos.pasteboard'
const TAG = 'ContextMenu';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  private result: WebContextMenuResult | undefined = undefined;
  @State linkUrl: string = '';
  @State offsetX: number = 0;
  @State offsetY: number = 0;
  @State showMenu: boolean = false;
  @Builder
  // Build and trigger a custom menu.
  MenuBuilder(){
    // A component that is used to present a vertical list of items to the user.
    Menu(){
      // A component that is used to represent an item in a menu.
      MenuItem({
        content: 'Copy Image',
      })
      .width(100)
      .height(50)
      .onClick(() => {
        this.result?.copyImage();
        this.showMenu = false;
      })
      MenuItem({
        content: 'Cut',
      })
      .width(100)
      .height(50)
      .onClick(() => {
        this.result?.cut();
        this.showMenu = false;
      })
      MenuItem({
        content: 'Copy',
      })
      .width(100)
      .height(50)
      .onClick(() => {
        this.result?.copy();
        this.showMenu = false;
      })
      MenuItem({
        content: 'Paste',
      })
      .width(100)
      .height(50)
      .onClick(() => {
        this.result?.paste();
        this.showMenu = false;
      })
      MenuItem({
        content: 'Copy Link',
      })
      .width(100)
      .height(50)
      .onClick(() => {
        let pasteData = pasteboard.createData('text/plain', this.linkUrl);
        pasteboard.getSystemPasteboard().setData(pasteData, (error)=>{
          if(error){
            return;
          }
        })
        this.showMenu = false;
      })
      MenuItem({
        content: 'Select All',
      })
      .width(100)
      .height(50)
      .onClick(() => {
        this.result?.selectAll();
        this.showMenu = false;
      })
    }
    .width(150)
    .height(300)
  }

  build() {
    Column() {
      Web({ src: $rawfile("index.html"), controller: this.controller })
        // Trigger a custom dialog box.
        .onContextMenuShow((event) => {
          if (event) {
            this.result = event.result
            console.info("x coord = " + event.param.x())
            console.info("link url = " + event.param.getLinkUrl())
            this.linkUrl = event.param.getLinkUrl()
          }
          console.info(TAG, `x: ${this.offsetX}, y: ${this.offsetY}`);
          this.showMenu = true;
          this.offsetX = 250;
          this.offsetY = Math.max(px2vp(event?.param.y() ?? 0) - 0, 0);
          return true
      })
      .bindPopup(this.showMenu,
      {
        builder: this.MenuBuilder(),
        enableArrow: false,
        placement: Placement.LeftTop,
        offset: { x: this.offsetX, y: this.offsetY},
        mask: false,
        onStateChange: (e) => {
          if(!e.isVisible){
            this.showMenu = false;
            this.result!.closeContextMenu();
          }
        }
      })
    }
  }
}

HTML file to be loaded:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<body>
  <h1>onContextMenuShow</h1>
  <a href="http://www.example.com" style="font-size:27px">URL www.example.com</a>
  // Place any image in the rawfile directory and name it example.png.
  <div><img src="example.png"></div>
  <p>Right-click text to display the context menu</p>
</body>
</html>

onScroll⁹⁺

onScroll(callback: (event: {xOffset: number, yOffset: number}) => void)

Called when the scrollbar of the page scrolls.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
      .onScroll((event) => {
          console.info("x = " + event.xOffset)
          console.info("y = " + event.yOffset)
      })
    }
  }
}

onGeolocationShow

onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocation }) => void)

Called when a request to obtain the geolocation information is received.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src:$rawfile('index.html'), controller:this.controller })
      .geolocationAccess(true)
      .onGeolocationShow((event) => {
        if (event) {
          AlertDialog.show({
            title: 'title',
            message: 'text',
            confirm: {
              value: 'onConfirm',
              action: () => {
                event.geolocation.invoke(event.origin, true, true)
              }
            },
            cancel: () => {
              event.geolocation.invoke(event.origin, false, true)
            }
          })
        }
      })
    }
  }
}

HTML file to be loaded:

<!DOCTYPE html>
<html>
<body>
<p id="locationInfo">Location information</p>
<button onclick="getLocation()">Get Location</button>
<script>
var locationInfo=document.getElementById("locationInfo");
function getLocation(){
  if (navigator.geolocation) {
    <!-- Access to the device location by the frontend page -->
    navigator.geolocation.getCurrentPosition(showPosition);
  }
}
function showPosition(position){
  locationInfo.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>

onGeolocationHide

onGeolocationHide(callback: () => void)

Called to notify the user that the request for obtaining the geolocation information received when onGeolocationShow is called has been canceled.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src:'www.example.com', controller:this.controller })
      .geolocationAccess(true)
      .onGeolocationHide(() => {
        console.log("onGeolocationHide...")
      })
    }
  }
}

onFullScreenEnter⁹⁺

onFullScreenEnter(callback: (event: { handler: FullScreenExitHandler }) => void)

Called when the component enters full screen mode.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  handler: FullScreenExitHandler | null = null
  build() {
    Column() {
      Web({ src:'www.example.com', controller:this.controller })
      .onFullScreenEnter((event) => {
        console.log("onFullScreenEnter...")
        this.handler = event.handler
      })
    }
  }
}

onFullScreenExit⁹⁺

onFullScreenExit(callback: () => void)

Called when the component exits full screen mode.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  handler: FullScreenExitHandler | null = null
  build() {
    Column() {
      Web({ src:'www.example.com', controller:this.controller })
      .onFullScreenExit(() => {
        console.log("onFullScreenExit...")
        if (this.handler) {
          this.handler.exitFullScreen()
        }
      })
      .onFullScreenEnter((event) => {
        this.handler = event.handler
      })
    }
  }
}

onWindowNew⁹⁺

onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetUrl: string, handler: ControllerHandler}) => void)

Called when a new window is created. This API takes effect when multiWindowAccess is enabled. If the event.handler.setWebController API is not called, the render process will be blocked. If opening a new window is not needed, set the parameter to null when calling the event.handler.setWebController API.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

// There are two <Web> components on the same page. When the WebComponent object opens a new window, the NewWebViewComp object is displayed. 
@CustomDialog
struct NewWebViewComp {
controller?: CustomDialogController
webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
build() {
    Column() {
      Web({ src: "", controller: this.webviewController1 })
        .javaScriptAccess(true)
        .multiWindowAccess(false)
        .onWindowExit(()=> {
          console.info("NewWebViewComp onWindowExit")
          if (this.controller) {
            this.controller.close()
          }
        })
      }
  }
}

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  dialogController: CustomDialogController | null = null
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .javaScriptAccess(true)
        // MultiWindowAccess needs to be enabled.
        .multiWindowAccess(true)
        .allowWindowOpenMethod(true)
        .onWindowNew((event) => {
          if (this.dialogController) {
            this.dialogController.close()
          }
          let popController:web_webview.WebviewController = new web_webview.WebviewController()
          this.dialogController = new CustomDialogController({
            builder: NewWebViewComp({webviewController1: popController})
          })
          this.dialogController.open()
          // Return the WebviewController object corresponding to the new window to the <Web> kernel.
          // If opening a new window is not needed, set the parameter to null when calling the event.handler.setWebController API.
          // If the event.handler.setWebController API is not called, the render process will be blocked.
          event.handler.setWebController(popController)
        })
    }
  }
}

onWindowExit⁹⁺

onWindowExit(callback: () => void)

Called when this window is closed.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src:'www.example.com', controller: this.controller })
      .onWindowExit(() => {
        console.log("onWindowExit...")
      })
    }
  }
}

onSearchResultReceive⁹⁺

onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMatches: number, isDoneCounting: boolean}) => void): WebAttribute

Called to notify the caller of the search result on the web page.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
   	  .onSearchResultReceive(ret => {
   	    if (ret) {
          console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
            "[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting)
   	    }
   	  })
    }
  }
}

onDataResubmitted⁹⁺

onDataResubmitted(callback: (event: {handler: DataResubmissionHandler}) => void)

Called when the web form data is resubmitted.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
import business_error from '@ohos.base';
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      // After you click Submit on the web page, you can click Refresh to trigger the function again.
      Button('refresh')
      .onClick(() => {
        try {
          this.controller.refresh();
        } catch (error) {
          let e: business_error.BusinessError = error as business_error.BusinessError;
          console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
        }
      })
      Web({ src:$rawfile('index.html'), controller: this.controller })
       .onDataResubmitted((event) => {
        console.log('onDataResubmitted')
        event.handler.resend();
      })
    }
  }
}

HTML file to be loaded:

 <!-- index.html -->
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
 </head>
 <body>
   <form action="http://httpbin.org/post" method="post">
     <input type="text" name="username">
     <input type="submit" name="Submit">
   </form>
 </body>
 </html>

onPageVisible⁹⁺

onPageVisible(callback: (event: {url: string}) => void)

Called when the old page is not displayed and the new page is about to be visible.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src:'www.example.com', controller: this.controller })
       .onPageVisible((event) => {
        console.log('onPageVisible url:' + event.url)
      })
    }
  }
}

onInterceptKeyEvent⁹⁺

onInterceptKeyEvent(callback: (event: KeyEvent) => boolean)

Called when the key event is intercepted and before it is consumed by the webview.

Parameters

Return value

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src:'www.example.com', controller: this.controller })
       .onInterceptKeyEvent((event) => {
        if (event.keyCode == 2017 || event.keyCode == 2018) {
          console.info(`onInterceptKeyEvent get event.keyCode ${event.keyCode}`)
          return true;
        }
        return false;
      })
    }
  }
}

onTouchIconUrlReceived⁹⁺

onTouchIconUrlReceived(callback: (event: {url: string, precomposed: boolean}) => void)

Called when an apple-touch-icon URL is received.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src:'www.baidu.com', controller: this.controller })
       .onTouchIconUrlReceived((event) => {
        console.log('onTouchIconUrlReceived:' + JSON.stringify(event))
      })
    }
  }
}

onFaviconReceived⁹⁺

onFaviconReceived(callback: (event: {favicon: image.PixelMap}) => void)

Called when this web page receives a new favicon.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
import image from "@ohos.multimedia.image"
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State icon: image.PixelMap | undefined = undefined;
  build() {
    Column() {
      Web({ src:'www.example.com', controller: this.controller })
       .onFaviconReceived((event) => {
        console.log('onFaviconReceived');
        this.icon = event.favicon;
      })
    }
  }
}

onAudioStateChanged¹⁰⁺

onAudioStateChanged(callback: (event: { playing: boolean }) => void)

Called when the audio playback status changes on the web page.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State playing: boolean = false
  build() {
    Column() {
      Web({ src:'www.example.com', controller: this.controller })
        .onAudioStateChanged(event => {
          this.playing = event.playing
          console.debug('onAudioStateChanged playing: ' + this.playing)
        })
    }
  }
}

onFirstContentfulPaint¹⁰⁺

onFirstContentfulPaint(callback: (event?: { navigationStartTick: number, firstContentfulPaintMs: number }) => void)

Called when the web page content is first rendered.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src:'www.example.com', controller: this.controller })
        .onFirstContentfulPaint(event => {
          if (event) {
            console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" +
            event.navigationStartTick + ", [firstContentfulPaintMs]:" +
            event.firstContentfulPaintMs)
          }
        })
    }
  }
}

onLoadIntercept¹⁰⁺

onLoadIntercept(callback: (event: { data: WebResourceRequest }) => boolean)

Called when the <Web> component is about to access a URL. This API is used to determine whether to block the access, which is allowed by default.

Parameters

Return value

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onLoadIntercept((event) => {
          console.log('url:' + event.data.getRequestUrl())
          console.log('isMainFrame:' + event.data.isMainFrame())
          console.log('isRedirect:' + event.data.isRedirect())
          console.log('isRequestGesture:' + event.data.isRequestGesture())
          return true
        })
    }
  }
}

onRequestSelected

onRequestSelected(callback: () => void)

Called when the <Web> component obtains the focus.

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onRequestSelected(() => {
          console.log('onRequestSelected')
        })
    }
  }
}

onScreenCaptureRequest¹⁰⁺

onScreenCaptureRequest(callback: (event?: { handler: ScreenCaptureHandler }) => void)

Called when a screen capture request is received.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onScreenCaptureRequest((event) => {
          if (event) {
            AlertDialog.show({
              title: 'title: ' + event.handler.getOrigin(),
              message: 'text',
              primaryButton: {
                value: 'deny',
                action: () => {
                  event.handler.deny()
                }
              },
              secondaryButton: {
                value: 'onConfirm',
                action: () => {
                  event.handler.grant({ captureMode: WebCaptureMode.HOME_SCREEN })
                }
              },
              cancel: () => {
                event.handler.deny()
              }
            })
          }
        })
    }
  }
}

onOverScroll¹⁰⁺

onOverScroll(callback: (event: {xOffset: number, yOffset: number}) => void)

Called to indicate the offset by which the web page overscrolls.

Parameters

Example

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
      .onOverScroll((event) => {
          console.info("x = " + event.xOffset)
          console.info("y = " + event.yOffset)
      })
    }
  }
}

onControllerAttached¹⁰⁺

onControllerAttached(callback: () => void)

Called when the controller is successfully bound to the <Web> component. The controller must be WebviewController. As the web page is not yet loaded when this callback is called, APIs for operating the web page cannot be used in the callback, for example, zoomIn and zoomOut. Other APIs, such as loadUrl and getWebId, which do not involve web page operations, can be used properly.

Example

The following example uses loadUrl in the callback to load the web page.

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: '', controller: this.controller })
        .onControllerAttached(() => {
          this.controller.loadUrl($rawfile("index.html"));
        })
    }
  }
}

The following example uses getWebId in the callback

// xxx.ets
import web_webview from '@ohos.web.webview'
import { BusinessError } from '@ohos.base';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Web({ src: $rawfile("index.html"), controller: this.controller })
        .onControllerAttached(() => {
          try {
            let id = this.controller.getWebId();
            console.log("id: " + id);
          } catch (error) {
            let code = (error as BusinessError).code;
            let message = (error as BusinessError).message;
            console.error(`ErrorCode: ${code},  Message: ${message}`);
          }
        })
    }
  }
}

HTML file to be loaded:

<!-- index.html -->
<!DOCTYPE html>
<html>
    <body>
        <p>Hello World</p>
    </body>
</html>

ConsoleMessage

Implements the ConsoleMessage object. For the sample code, see onConsole.

getLineNumber

getLineNumber(): number

Obtains the number of rows in this console message.

Return value

getMessage

getMessage(): string

Obtains the log information of this console message.

Return value

getMessageLevel

getMessageLevel(): MessageLevel

Obtains the level of this console message.

Return value

getSourceId

getSourceId(): string

Obtains the path and name of the web page source file.

Return value

JsResult

Implements the JsResult object, which indicates the result returned to the <Web> component to indicate the user operation performed in the dialog box. For the sample code, see onAlert Event.

handleCancel

handleCancel(): void

Notifies the <Web> component of the user's cancel operation in the dialog box.

handleConfirm

handleConfirm(): void

Notifies the <Web> component of the user's confirm operation in the dialog box.

handlePromptConfirm⁹⁺

handlePromptConfirm(result: string): void

Notifies the <Web> component of the user's confirm operation in the dialog box as well as the dialog box content.

Parameters

FullScreenExitHandler⁹⁺

Implements a FullScreenExitHandler object for listening for exiting full screen mode. For the sample code, see onFullScreenEnter.

constructor⁹⁺

constructor()

exitFullScreen⁹⁺

exitFullScreen(): void

Exits full screen mode.

ControllerHandler⁹⁺

Implements a WebviewController object for new <Web> components. For the sample code, see onWindowNew.

setWebController⁹⁺

setWebController(controller: WebviewController): void

Sets a WebviewController object. If opening a new window is not needed, set the parameter to null.

Parameters

WebResourceError

Implements the WebResourceError object. For the sample code, see onErrorReceive.

getErrorCode

getErrorCode(): number

Obtains the error code for resource loading.

Return value

getErrorInfo

getErrorInfo(): string

Obtains error information about resource loading.

Return value

WebResourceRequest

Implements the WebResourceRequest object. For the sample code, see onErrorReceive.

getRequestHeader

getRequestHeader(): Array<Header>

Obtains the information about the resource request header.

Return value

getRequestUrl

getRequestUrl(): string

Obtains the URL of the resource request.

Return value

isMainFrame

isMainFrame(): boolean

Checks whether the resource request is in the main frame.

Return value

isRedirect

isRedirect(): boolean

Checks whether the resource request is redirected by the server.

Return value

isRequestGesture

isRequestGesture(): boolean

Checks whether the resource request is associated with a gesture (for example, a tap).

Return value

getRequestMethod⁹⁺

getRequestMethod(): string

Obtains the request method.

Return value

Header

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

WebResourceResponse

Implements the WebResourceResponse object. For the sample code, see onHttpErrorReceive.

getReasonMessage

getReasonMessage(): string

Obtains the status code description of the resource response.

Return value

getResponseCode

getResponseCode(): number

Obtains the status code of the resource response.

Return value

getResponseData

getResponseData(): string

Obtains the data in the resource response.

Return value

getResponseEncoding

getResponseEncoding(): string

Obtains the encoding string of the resource response.

Return value

getResponseHeader

getResponseHeader() : Array<Header>

Obtains the resource response header.

Return value

getResponseMimeType

getResponseMimeType(): string

Obtains the MIME type of the resource response.

Return value

setResponseData⁹⁺

setResponseData(data: string | number | Resource)

Sets the data in the resource response.

Parameters

setResponseEncoding⁹⁺

setResponseEncoding(encoding: string)

Sets the encoding string of the resource response.

Parameters

setResponseMimeType⁹⁺

setResponseMimeType(mimeType: string)

Sets the MIME type of the resource response.

Parameters

setReasonMessage⁹⁺

setReasonMessage(reason: string)

Sets the status code description of the resource response.

Parameters

setResponseHeader⁹⁺

setResponseHeader(header: Array<Header>)

Sets the resource response header.

Parameters

setResponseCode⁹⁺

setResponseCode(code: number)

Sets the status code of the resource response.

Parameters

setResponseIsReady⁹⁺

setResponseIsReady(IsReady: boolean)

Sets whether the resource response data is ready.

Parameters

FileSelectorResult⁹⁺

Notifies the <Web> component of the file selection result. For the sample code, see onShowFileSelector.

handleFileList⁹⁺

handleFileList(fileList: Array<string>): void

Instructs the <Web> component to select a file.

Parameters

FileSelectorParam⁹⁺

Implements the FileSelectorParam object. For the sample code, see onShowFileSelector.

getTitle⁹⁺

getTitle(): string

Obtains the title of this file selector.

Return value

getMode⁹⁺

getMode(): FileSelectorMode

Obtains the mode of the file selector.

Return value

getAcceptType⁹⁺

getAcceptType(): Array<string>

Obtains the file filtering type.

Return value

isCapture⁹⁺

isCapture(): boolean

Checks whether multimedia capabilities are invoked.

Return value

HttpAuthHandler⁹⁺

Implements the HttpAuthHandler object. For the sample code, see onHttpAuthRequest.

cancel⁹⁺

cancel(): void

Cancels HTTP authentication as requested by the user.

confirm⁹⁺

confirm(userName: string, pwd: string): boolean

Performs HTTP authentication with the user name and password provided by the user.

Parameters

Return value

isHttpAuthInfoSaved⁹⁺

isHttpAuthInfoSaved(): boolean

Uses the account name and password cached on the server for authentication.

Return value

SslErrorHandler⁹⁺

Implements an SslErrorHandler object. For the sample code, see onSslErrorEventReceive Event.

handleCancel⁹⁺

handleCancel(): void

Cancels this request.

handleConfirm⁹⁺

handleConfirm(): void

Continues using the SSL certificate.

ClientAuthenticationHandler⁹⁺

Implements a ClientAuthenticationHandler object returned by the <Web> component. For the sample code, see onClientAuthenticationRequest.

confirm⁹⁺

confirm(priKeyFile : string, certChainFile : string): void

Uses the specified private key and client certificate chain.

Parameters

confirm¹⁰⁺

confirm(authUri : string): void

Required permissions: ohos.permission.ACCESS_CERT_MANAGER

Instructs the <Web> component to use the specified credentials (obtained from the certificate management module).

Parameters

cancel⁹⁺

cancel(): void

Cancels the client certificate request sent by the same host and port server. No additional event will be reported for requests from the same host and port server.

ignore⁹⁺

ignore(): void

Ignores this request.

PermissionRequest⁹⁺

Implements the PermissionRequest object. For the sample code, see onPermissionRequest.

deny⁹⁺

deny(): void

Denies the permission requested by the web page.

getOrigin⁹⁺

getOrigin(): string

Obtains the origin of this web page.

Return value

getAccessibleResource⁹⁺

getAccessibleResource(): Array<string>

Obtains the list of accessible resources requested for the web page. For details about the resource types, see ProtectedResourceType.

Return value

grant⁹⁺

grant(resources: Array<string>): void

Grants the permission for resources requested by the web page.

Parameters

ScreenCaptureHandler¹⁰⁺

Implements the ScreenCaptureHandler object for accepting or rejecting a screen capture request. For the sample code, see onScreenCaptureRequest Event.

deny¹⁰⁺

deny(): void

Rejects this screen capture request.

getOrigin¹⁰⁺

getOrigin(): string

Obtains the origin of this web page.

Return value

grant¹⁰⁺

grant(config: ScreenCaptureConfig): void

Required permissions: ohos.permission.MICROPHONE, ohos.permission.CAPTURE_SCREEN

Grants the screen capture permission.

Parameters

ContextMenuSourceType⁹⁺

ContextMenuMediaType⁹⁺

ContextMenuInputFieldType⁹⁺

ContextMenuEditStateFlags⁹⁺

WebContextMenuParam⁹⁺

Implements a context menu, which is displayed after the user clicks the right mouse button or long presses a specific element, such as an image or a link. For the sample code, see onContextMenuShow.

x⁹⁺

x(): number

Obtains the X coordinate of the context menu.

Return value

y⁹⁺

y(): number

Obtains the Y coordinate of the context menu.

Return value

getLinkUrl⁹⁺

getLinkUrl(): string

Obtains the URL of the destination link.

Return value

getUnfilteredLinkUrl⁹⁺

getUnfilteredLinkUrl(): string

Obtains the URL of the destination link.

Return value

getSourceUrl⁹⁺

getSourceUrl(): string

Obtain the source URL.

Return value

existsImageContents⁹⁺

existsImageContents(): boolean

Checks whether image content exists.

Return value

getMediaType⁹⁺

getMediaType(): ContextMenuMediaType

Obtains the media type of this web page element.

Return value

getSelectionText⁹⁺

getSelectionText(): string

Obtains the selected text.

Return value

getSourceType⁹⁺

getSourceType(): ContextMenuSourceType

Obtains the event source of the context menu.

Return value

getInputFieldType⁹⁺

getInputFieldType(): ContextMenuInputFieldType

Obtains the input field type of this web page element.

Return value

isEditable⁹⁺

isEditable(): boolean

Checks whether this web page element is editable.

Return value

getEditStateFlags⁹⁺

getEditStateFlags(): number

Obtains the edit state flag of this web page element.

Return value

WebContextMenuResult⁹⁺

Implements a WebContextMenuResult object. For the sample code, see onContextMenuShow.

closeContextMenu⁹⁺

closeContextMenu(): void

Closes this context menu. This API must be called when no operations in WebContextMenuResult are performed.

copyImage⁹⁺

copyImage(): void

Copies the image specified in WebContextMenuParam.

copy⁹⁺

copy(): void

Performs the copy operation related to this context menu.

paste⁹⁺

paste(): void

Performs the paste operation related to this context menu.

cut⁹⁺

cut(): void

Performs the cut operation related to this context menu.

selectAll⁹⁺

selectAll(): void

Performs the select all operation related to this context menu.

JsGeolocation

Implements the PermissionRequest object. For the sample code, see onGeolocationShow Event.

invoke

invoke(origin: string, allow: boolean, retain: boolean): void

Sets the geolocation permission status of a web page.

Parameters

MessageLevel

RenderExitReason⁹⁺

Enumerates the reasons why the rendering process exits.

MixedMode

CacheMode⁹⁺

FileSelectorMode⁹⁺