feat: 碳证中心页面调整高度，添加footer

txw-mhzc-web/src/pages/index/views/tzzx/index.vue

@@ -1,43 +1,47 @@
 <template>
   <div class="tzzx-page">
     <div v-if="loading" class="loading">加载中...</div>
-    <iframe
-      v-else-if="iframeUrl"
-      :src="iframeUrl"
-      width="100%"
-      height="100%"
-      frameborder="0"
-      scrolling="yes"
-    ></iframe>
+    <template v-else-if="iframeUrl">
+      <iframe
+        ref="tzzxIframe"
+        :src="iframeUrl"
+        width="100%"
+        :height="iframeHeight"
+        frameborder="0"
+        scrolling="no"
+        @load="onIframeLoad"
+      ></iframe>
+      <Footer />
+    </template>
     <div v-else class="empty">链接错误</div>
   </div>
 </template>
 
 <script>
+import Footer from '@/pages/index/components/footer/index.vue';
+
 export default {
   name: 'tzzx',
+  components: { Footer },
   data() {
     return {
       iframeUrl: '',
       loading: true,
+      iframeHeight: 800,
+      resizeObserver: null,
+      heightCheckTimer: null,
     };
   },
   mounted() {
     this.fetchPage();
-    // 监听路由变化
-    this.$watch(
-      () => this.$route.query,
-      () => this.fetchPage()
-    );
+    this.$watch(() => this.$route.query, () => this.fetchPage());
   },
-  beforeRouteUpdate(to, from, next) {
-    this.fetchPage();
-    next();
+  beforeDestroy() {
+    this.cleanup();
   },
   methods: {
     fetchPage() {
       const { page } = this.$route.query;
-      console.log('page:', page);
       if (page) {
         this.iframeUrl = page;
         this.loading = false;
@@ -46,6 +50,107 @@ export default {
         this.loading = false;
       }
     },
+
+    onIframeLoad() {
+      const iframe = this.$refs.tzzxIframe;
+      if (!iframe) return;
+
+      const isSameOrigin = this.trySameOrigin(iframe);
+
+      if (!isSameOrigin) {
+        this.setupPostMessage(iframe);
+      }
+    },
+
+    trySameOrigin(iframe) {
+      try {
+        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+
+        if (!iframeDoc || !iframeDoc.body) {
+          return false;
+        }
+
+        const updateHeight = () => {
+          const height = Math.max(
+            iframeDoc.body.scrollHeight,
+            iframeDoc.body.offsetHeight,
+            iframeDoc.documentElement.scrollHeight,
+            iframeDoc.documentElement.offsetHeight
+          );
+          if (height > 0) {
+            this.iframeHeight = height + 20;
+          }
+        };
+
+        updateHeight();
+
+        if (window.ResizeObserver) {
+          this.resizeObserver = new ResizeObserver(updateHeight);
+          this.resizeObserver.observe(iframeDoc.body);
+          this.resizeObserver.observe(iframeDoc.documentElement);
+        } else {
+          this.heightCheckTimer = setInterval(updateHeight, 500);
+        }
+
+        const images = iframeDoc.querySelectorAll('img');
+        images.forEach(img => {
+          if (!img.complete) {
+            img.addEventListener('load', updateHeight);
+            img.addEventListener('error', updateHeight);
+          }
+        });
+
+        return true;
+      } catch (e) {
+        console.log('[tzzx] 检测到跨域iframe，将使用postMessage方案');
+        return false;
+      }
+    },
+
+    setupPostMessage(iframe) {
+      this._messageHandler = (event) => {
+        if (event.data && event.data.type === 'iframeHeight') {
+          this.iframeHeight = event.data.height;
+        }
+      };
+      window.addEventListener('message', this._messageHandler);
+
+      const requestHeight = () => {
+        try {
+          iframe.contentWindow.postMessage(
+            { type: 'REQUEST_HEIGHT' },
+            '*'
+          );
+        } catch (e) {}
+      };
+
+      requestHeight();
+
+      let retryCount = 0;
+      this.heightCheckTimer = setInterval(() => {
+        requestHeight();
+        retryCount++;
+        if (retryCount > 5) {
+          clearInterval(this.heightCheckTimer);
+          this.heightCheckTimer = null;
+        }
+      }, 1000);
+    },
+
+    cleanup() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        this.resizeObserver = null;
+      }
+      if (this.heightCheckTimer) {
+        clearInterval(this.heightCheckTimer);
+        this.heightCheckTimer = null;
+      }
+      if (this._messageHandler) {
+        window.removeEventListener('message', this._messageHandler);
+        this._messageHandler = null;
+      }
+    },
   },
 };
 </script>
@@ -53,16 +158,22 @@ export default {
 <style lang="less" scoped>
 .tzzx-page {
   width: 100%;
-  height: 100%;
+
+  iframe {
+    display: block;
+    width: 100%;
+    border: none;
+  }
+
   .loading,
   .empty {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
-    height: 100%;
+    height: 100vh;
     font-size: 16px;
     color: #999;
   }
 }
-</style>
+</style>