@dolphinweex/weex-harmony 0.1.74 → 0.1.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dolphinweex/weex-harmony",
-  "version": "0.1.74",
+  "version": "0.1.76",
   "description": "weex harmony adapter",
   "main": "index.js",
   "files": [

package/src/components/midea-common-weex-view.vue

@@ -38,6 +38,8 @@ export default {
         Date.now().toString(36) + Math.random().toString(36).substring(2)
       }`,
       height: '0px',
+      _resizeObserver: null,
+      _heightCheckTimer: null,
     };
   },
   components: {
@@ -126,20 +128,6 @@ export default {
     this._rafId = null;
     this._pendingGesture = null;
     this._onMessage = (event) => {
-      if(event.data.type==='IFRAME_CONTENT_HEIGHT'){
-        const h = Number(event.data.height) || 0;
-        if (!h) {
-          this.height = '100%'
-          return;
-        }
-        if (this._wrapperEl) {
-          this._wrapperEl.style.height = `${h}px`;
-        }
-        this.height = `${h / weex.config.env.scale}px`;
-        return
-      }else{
-        document.getElementsByTagName('iframe')[0].height = event.data.height
-      }
       // 处理iframe手势跨窗口传递冒泡
       if (event.data.type === 'IFRAME_GESTURE') {
         const gestureData = event.data;
@@ -173,6 +161,135 @@ export default {
           JSON.stringify(window.$midea_harmony_native),
           "*"
         );
+        
+        // 启动 weex-root 第一个子元素的高度监听
+        this.startWeexRootHeightMonitoring();
+      }
+    },
+    
+    // 监听 iframe 内 .weex-root 第一个子元素或 .weex-scroller-inner 的高度
+    startWeexRootHeightMonitoring() {
+      // 尝试多次查找元素（因为 iframe 内容可能还在加载）
+      let attempts = 0;
+      const maxAttempts = 20; // 最多尝试 20 次
+      
+      this._heightCheckTimer = setInterval(() => {
+        attempts++;
+        
+        const iframe = document.getElementById(this.embedId);
+        if (!iframe) {
+          if (attempts >= maxAttempts) {
+            clearInterval(this._heightCheckTimer);
+            console.warn(`未找到 iframe: ${this.embedId}`);
+          }
+          return;
+        }
+        
+        try {
+          const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+          let targetElement = null;
+          let elementDesc = '';
+          
+          // 查找 .weex-root 的第一个子元素
+          const weexRoot = iframeDocument.querySelector('.weex-root');
+          const weexRootFirstChild = (weexRoot && weexRoot.children.length > 0) ? weexRoot.children[0] : null;
+          
+          // 查找 .weex-scroller-inner
+          const weexScrollerInner = iframeDocument.querySelector('.weex-scroller-inner');
+          
+          // 如果两个都找到了，比较高度，谁大用谁
+          if (weexRootFirstChild && weexScrollerInner) {
+            const rootHeight = weexRootFirstChild.offsetHeight || weexRootFirstChild.clientHeight || 0;
+            const scrollerHeight = weexScrollerInner.offsetHeight || weexScrollerInner.clientHeight || 0;
+            
+            if (rootHeight >= scrollerHeight) {
+              targetElement = weexRootFirstChild;
+              elementDesc = `.weex-root 的第一个子元素 (高度: ${rootHeight}px)`;
+            } else {
+              targetElement = weexScrollerInner;
+              elementDesc = `.weex-scroller-inner (高度: ${scrollerHeight}px)`;
+            }
+          } else if (weexRootFirstChild) {
+            // 只找到 .weex-root 的第一个子元素
+            targetElement = weexRootFirstChild;
+            elementDesc = '.weex-root 的第一个子元素';
+          } else if (weexScrollerInner) {
+            // 只找到 .weex-scroller-inner
+            targetElement = weexScrollerInner;
+            elementDesc = '.weex-scroller-inner';
+          }
+          
+          // 找到目标元素，开始监听
+          if (targetElement) {
+            console.log(`找到 ${elementDesc}，开始监听高度变化`, targetElement);
+            
+            // 清除定时器，找到了就不再尝试
+            clearInterval(this._heightCheckTimer);
+            
+            // 立即更新一次高度
+            this.updateIframeHeightFromElement(targetElement);
+            
+            // 使用 ResizeObserver 监听元素高度变化
+            this._resizeObserver = new ResizeObserver(() => {
+              this.updateIframeHeightFromElement(targetElement);
+            });
+            this._resizeObserver.observe(targetElement);
+            
+          } else if (attempts >= maxAttempts) {
+            clearInterval(this._heightCheckTimer);
+            console.warn('未找到 .weex-root 的第一个子元素 或 .weex-scroller-inner');
+          }
+        } catch (e) {
+          if (attempts >= maxAttempts) {
+            clearInterval(this._heightCheckTimer);
+            console.warn('无法访问 iframe 内容（可能跨域）:', e.message);
+          }
+        }
+      }, 200); // 每 200ms 尝试一次
+    },
+    
+    // 根据元素高度更新 iframe 高度
+    updateIframeHeightFromElement(element) {
+      if (!element) return;
+      
+      // 获取元素的实际高度
+      const elementHeight = element.offsetHeight || element.clientHeight || element.scrollHeight;
+      
+      if (elementHeight > 0) {
+        // 限制最大高度，防止死循环
+        // 策略：使用 window.innerHeight 减去 iframe 距离视口顶部的距离
+        let maxHeight = window.innerHeight;
+        
+        if (this.$refs.iframe) {
+          try {
+            const rect = this.$refs.iframe.getBoundingClientRect();
+            // 如果 top > 0，说明 iframe 顶部在视口下方或视口内，减去 top 得到剩余可用高度
+            // 如果 top <= 0，说明 iframe 顶部已滚出视口上方，此时最大高度限制为 window.innerHeight (防止无限增高)
+            if (rect.top > 0) {
+              maxHeight = window.innerHeight - rect.top;
+            }
+          } catch (e) {
+            console.warn('获取 iframe 位置失败:', e);
+          }
+        }
+        
+        // 确保 maxHeight 不为负数
+        maxHeight = Math.max(maxHeight, 0);
+
+        // 如果计算出的高度超过了最大限制，则使用最大限制
+        const finalHeight = elementHeight > maxHeight ? maxHeight : elementHeight;
+
+        // 更新包装器高度
+        if (this._wrapperEl) {
+          this._wrapperEl.style.height = `${finalHeight}px`;
+        }
+        
+        // 更新 iframe 高度（考虑 weex scale）
+        const newHeight = `${finalHeight / weex.config.env.scale}px`;
+        if (this.height !== newHeight) {
+          this.height = newHeight;
+          console.log(`iframe 高度已更新: ${finalHeight}px -> ${newHeight} (embedId: ${this.embedId}, max: ${maxHeight}px)`);
+        }
       }
     },
     handleGestureBubble(gestureData) {
@@ -220,11 +337,24 @@ export default {
     },
   },
   beforeDestroy() {
+    // 清理 ResizeObserver
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
+    
+    // 清理定时器
+    if (this._heightCheckTimer) {
+      clearInterval(this._heightCheckTimer);
+      this._heightCheckTimer = null;
+    }
+    
     // 清理RAF避免内存泄漏
     if (this._rafId) {
       cancelAnimationFrame(this._rafId);
       this._rafId = null;
     }
+    
     // 清理消息监听
     if (this._onMessage) {
       window.removeEventListener("message", this._onMessage, false);