js获取uniapp获取webview内容高度

js获取uniapp获取webview内容高度

---

• 在uni-app中，如果你想要获取webview的内容高度，可以使用uni-app提供的bindload事件来监听webview的加载，然后通过调用webview的invokeMethod方法来获取内容的高度。

• 以下是一个示例代码：

  <template>
    <view>
      <web-view src="https://www.example.com" @message="onMessage" @load="onLoad"></web-view>
    </view>
  </template>
   
  <script>
    export default {
      methods: {
        onLoad(e) {
          // 当webview加载完成时，发送消息获取内容高度
          this.getWebViewHeight(e.detail.webviewId);
        },
        onMessage(e) {
          // 接收从webview发送的消息
          console.log('WebView content height:', e.detail.data);
        },
        getWebViewHeight(webviewId) {
          // 发送消息给webview，获取内容高度
          uni.postMessage({
            data: 'getHeight',
            webviewId: webviewId
          });
        }
      }
    }
  </script>
  

• 在web端页面中，你需要监听消息事件，并在接收到特定消息时（例如’getHeight’），使用document.body.scrollHeight或其他适当的方式来获取内容高度，并将其发送回uni-app端。

  // 假设你的web页面是这样的
  window.addEventListener('message', function(event) {
    if (event.data === 'getHeight') {
      // 获取内容高度
      var height = document.body.scrollHeight;
      // 发送内容高度到uni-app
      event.source.postMessage({ height: height }, event.origin);
    }
  });
  

这样，当uni-app的onMessage事件被触发时，你将能够接收到webview内容的高度，并可以根据需要进行处理。