webview组件控制

通过创建webviewContext提供从小程序向web-view发送消息的能力。

my.createWebViewContext(webviewId)

创建并返回 web-view 上下文 webViewContext 对象。

入参

参数类型必填说明
webviewIdString是要创建的web-view所对应的id属性

webViewContext

webViewContext 通过 webviewId 跟一个 web-view 组件绑定，通过它可以实现一些功能。webViewContext对象的方法列表：

方法参数描述兼容性
postMessageObject小程序向web-view组件发送消息，配合web-view.js中提供的my.postMessage可以实现小程序和web-view网页的双向通信1.8.0

代码示例

  1. <view>
  2.   <web-view id="web-view-1" src="..." onMessage="onMessage"></web-view>
  3. </view>
  1. Page({
  2.   onLoad() {
  3.     this.webViewContext = my.createWebViewContext('web-view-1');
  4.   },
  5.   // 接收来自H5的消息
  6.   onMessage(e) {
  7.       console.log(e); //{'sendToMiniProgram': '0'}
  8.     // 向H5发送消息
  9.     this.webViewContext.postMessage({'sendToWebView': '1'});
  10.   }
  11. })
  1. // H5的js代码中需要先定义my.onMessage 用于接收来自小程序的消息。
  2. my.onMessage = function(e) {
  3.     console.log(e); //{'sendToWebView': '1'}
  4. }
  5. // H5向小程序发送消息
  6. my.postMessage({'sendToMiniProgram': '0'});

Tips:

以上的双向通信能力的流程是H5先发消息给小程序，小程序接收到消息后再发消息给H5。

原文: https://docs.alipay.com/mini/api/webview-context