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-appevent.source.postMessage({ height: height }, event.origin);}
  });
  

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