Control the web-view component

You can create a webviewContext to send messages from a Mini Program to a web-view component.

my.createWebViewContext(webviewId)

This API creates and returns a webViewContext object to send messages from a Mini Program to a web-view component.

Parameters

Return value

A webViewContext object.

A webViewContext object is attached to a web-view component by the component's webviewId. You can use the webViewContext object to implement features.

The methods of the webViewContext object are as follows:

Code examples

<view>
  <web-view id="web-view-1" src="..." onMessage="onMessage"></web-view>
</view>

Page({
  onLoad() {
    this.webViewContext = my.createWebViewContext('web-view-1');
  },
  // Receive messages from the H5 page
  onMessage(e) {
      console.log(e); //{'sendToMiniProgram': '0'}
    // Send a message to the H5 page
    this.webViewContext.postMessage({'sendToWebView': '1'});
  }
})

// In the JavaScript code of the H5 page, define my.onMessage to receive messages from the Mini Program.
my.onMessage = function(e) {
    console.log(e); //{'sendToWebView': '1'}
}
// The H5 page sends a message to the Mini Program.
my.postMessage({'sendToMiniProgram': '0'});