HarmonyOS 鸿蒙Next 在web中获取H5中的div的高度

发布于 1周前 作者 htzhanglong 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 在web中获取H5中的div的高度

.onPageEnd((event) => {
  console.log("pageEnd" + JSON.stringify(event))
  this.controller.runJavaScript("document.querySelector('.main').clientHeight", (error, data) => {
    if (error) {
      console.log("webPageEndResult:" + JSON.stringify(error))
    } else {
      console.log("webPageEndResult:" + "数据:" + JSON.stringify(data))
    }
  })
})

获取的data是1，实际是174.


更多关于HarmonyOS 鸿蒙Next 在web中获取H5中的div的高度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

可先检查下以下两点： 1.document.querySelector(’.main’) 获取的是第一个class name为main的div元素，请确保获取的元素正确； 2.onPageEnd 网页加载完成时触发该回调，且只在主frame触发。检查下网页加载完成 ‘.main’ 元素是否已经在DOM树上生成，或’.main’ 元素是否存在深层嵌套子iframe问题

//index2.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试页面</title>
    <script>
        async function test1000() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve(1)
                }, 1000)
            })
        }
        function startFn() {
            (async () => {
                var result = await test1000();
                document.getElementById("conent").innerText = result
            })();
        }
    </script>
</head>

<body>
        <div class="main" style="height: 500px;background-color: aqua;"> </div>
    <div align="center" >
        <button type="button" id="btn_navi" onclick="startFn()">跳转应用市场</button>
    </div>
</body>

</html>

//index.ets

import { webview } from '@kit.ArkWeb';

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

  build() {
    Column() {
      Web({ src: $rawfile('index2.html'), controller: this.controller })
        .onPageEnd((event) => {
          console.log("pageEnd" + JSON.stringify(event))
          this.controller.runJavaScript("document.querySelector('.main').clientHeight", (error, data) => {
            if (error) {
              console.log("webPageEndResult:" + JSON.stringify(error))
            } else {
              console.log("webPageEndResult:" + "数据：" + JSON.stringify(data))
            }
          })
        })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next 在web中获取H5中的div的高度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next环境中，如果你需要在Web应用中获取H5页面中某个div元素的高度，可以通过JavaScript实现。以下是一个基本的步骤和方法：

  1. 确保元素已加载：首先，确保你要获取高度的div元素已经加载到DOM中。可以通过将JavaScript代码放在文档的底部或使用DOMContentLoaded事件来确保这一点。

  2. 选择元素：使用document.getElementById、document.querySelector等方法选择目标div元素。

  3. 获取高度：通过offsetHeight、clientHeight或getBoundingClientRect().height属性获取元素的高度。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
    var divElement = document.getElementById('yourDivId'); // 替换'yourDivId'为你的div的ID
    if (divElement) {
        var height = divElement.offsetHeight; // 或者使用clientHeight, getBoundingClientRect().height
        console.log('Div的高度是: ' + height + 'px');
    }
});

确保yourDivId替换为你实际使用的div元素的ID。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部