HarmonyOS 鸿蒙Next如何再原生端获取到用户点击的H5页面标签属性

发布于 1周前 作者 vueper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何再原生端获取到用户点击的H5页面标签属性

1.混合开发，原生组件web，加载 线上链接的H5，H5内中的某个模块使用到 input标签,并且设置 capture 属性为 camera。  <input type="file" accept="image/*"  capture="camera" style="position: absolute; visibility: hidden; z-index: -999; width: 0px; height: 0px; top: 0px; left: 0px;">    

2.进行调试时，点击input 标签，原生端，该如何获取 点击的input 标签capture属性  3.原生端，获取到 标签属性之后，展示弹框（相册/拍照）。进而做后续的操作  Web({ src:'xxxx' }).onShowFileSelector((event) => { ActionSheet.show({ title: '', subtitle: '', message: '', autoCancel: true, alignment:DialogAlignment.Bottom, offset: {dx: 0, dy: "-20vp"}, sheets: [ { title: '拍照', icon: $r('app.media.camera'), action: async () => { // 调用 拍照 } }, { title: '相册', icon: $r('app.media.picker'), action: () => { // 打开相册的操作 } } ], isModal: true, }) return true })   ### 希望能在原生端，获取到用户点击的H5 页面标签属性

Harmonyos Next教程
1 回复

在HarmonyOS鸿蒙Next原生端获取用户点击的H5页面标签属性，可以通过以下步骤实现：

  1. 事件监听：首先，在H5页面中为需要获取属性的标签添加点击事件监听器。可以使用JavaScript的addEventListener方法，监听click事件。

  2. 获取标签属性：在事件处理函数中，通过事件对象event获取触发事件的标签元素，然后利用element.getAttribute方法获取所需属性。

  3. 数据传递：将获取到的标签属性通过某种方式传递给原生端。常见的方法包括使用postMessage在WebView与原生端之间通信，或者通过URL参数、存储等方式间接传递。

  4. 原生端接收：在原生端设置相应的接收机制，如监听WebView的message事件或解析URL参数，以获取H5页面传递过来的标签属性。

请注意，实现过程中需确保WebView已正确配置，且原生端与H5页面之间的通信机制已建立。此外，不同版本的HarmonyOS鸿蒙系统可能对WebView的支持和API调用有所差异，需根据具体版本进行适配。

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

回到顶部