feat:修复碳证中心部分问题

txw-mhzc-web/src/pages/index/utils/tzzx-iframe.js

@@ -1,10 +1,8 @@
+/** 与 tzzx 页 VIEWPORT_HEIGHT_OFFSET 保持一致 */
+const VIEWPORT_HEIGHT_OFFSET = 100;
+
 export function getViewportIframeFallbackHeight() {
-  const navOffset = parseInt(
+  return Math.max(window.innerHeight - VIEWPORT_HEIGHT_OFFSET, 480);
-    getComputedStyle(document.documentElement).getPropertyValue('--page-offset-top'),
-    10
-  );
-  const offset = Number.isFinite(navOffset) ? navOffset : 76;
-  return Math.max(window.innerHeight - offset, 480);
 }
 
 export function isAllowedIframeMessageOrigin(origin) {

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

@@ -1,504 +1,249 @@
 <template>
-
   <div class="tzzx-page">
-
     <div v-if="loading" class="loading">加载中...</div>
-
     <template v-else-if="iframeUrl">
-
       <iframe
-
         ref="tzzxIframe"
-
         :src="iframeUrl"
-
         class="tzzx-iframe"
-
         frameborder="0"
-
+        scrolling="auto"
-        :scrolling="iframeScrolling"
-
         :style="iframeStyle"
-
         @load="onIframeLoad"
-
       ></iframe>
-
     </template>
-
     <div v-else class="empty">链接错误</div>
-
   </div>
-
 </template>
 
-
-
 <script>
-
 import {
-
-  getViewportIframeFallbackHeight,
-
   isAllowedIframeMessageOrigin,
-
 } from '@/pages/index/utils/tzzx-iframe';
 
-
+/** 视口降级时 iframe 高度 = 视口高度 - 该偏移（预留顶栏/底边距） */
-
+const VIEWPORT_HEIGHT_OFFSET = 100;
-const DEFAULT_IFRAME_HEIGHT = 800;
-
-
 
 export default {
-
   name: 'tzzx',
-
   data() {
-
     return {
-
       iframeUrl: '',
-
       loading: true,
-
+      iframeHeight: 0,
-      iframeHeight: DEFAULT_IFRAME_HEIGHT,
-
-      iframeScrolling: 'no',
-
       heightMode: 'default',
-
       resizeObserver: null,
-
       heightCheckTimer: null,
-
       _messageHandler: null,
-
       _iframeLoadGeneration: 0,
-
     };
-
   },
-
   computed: {
-
     iframeStyle() {
-
+      const base = {
-      return {
-
         width: '100%',
-
-        height: `${this.iframeHeight}px`,
-
         border: 'none',
-
         display: 'block',
-
       };
-
+      if (this.heightMode === 'same-origin' || this.heightMode === 'post-message') {
+        return {
+          ...base,
+          height: `${this.iframeHeight}px`,
+        };
+      }
+      return {
+        ...base,
+        height: `calc(100vh - ${VIEWPORT_HEIGHT_OFFSET}px)`,
+        minHeight: '480px',
+      };
     },
-
   },
-
   mounted() {
-
     this.fetchPage();
-
     this.$watch(() => this.$route.query.page, () => this.fetchPage());
-
-    window.addEventListener('resize', this.onWindowResize);
-
   },
-
   activated() {
-
     this.fetchPage();
-
   },
-
   beforeDestroy() {
-
-    window.removeEventListener('resize', this.onWindowResize);
-
     this.cleanup();
-
   },
-
   deactivated() {
-
     this.cleanup();
-
   },
-
   methods: {
-
     fetchPage() {
-
       const rawPage = this.$route.query.page;
-
       const page = Array.isArray(rawPage) ? rawPage[0] : rawPage;
-
       const nextUrl = page ? String(page).trim() : '';
 
-
-
       if (nextUrl === this.iframeUrl && !this.loading) {
-
         return;
-
       }
 
-
-
       this.cleanup();
-
       this.resetIframeMetrics();
 
-
-
       if (nextUrl) {
-
         this.iframeUrl = nextUrl;
-
         this.loading = false;
-
       } else {
-
         this.iframeUrl = '';
-
         this.loading = false;
-
       }
-
     },
 
-
-
     resetIframeMetrics() {
-
+      this.iframeHeight = 0;
-      this.iframeHeight = DEFAULT_IFRAME_HEIGHT;
-
-      this.iframeScrolling = 'no';
-
       this.heightMode = 'default';
-
       this._iframeLoadGeneration += 1;
-
     },
 
-
-
-    onWindowResize() {
-
-      if (this.heightMode === 'viewport-fallback') {
-
-        this.iframeHeight = getViewportIframeFallbackHeight();
-
-      }
-
-    },
-
-
-
     onIframeLoad() {
-
       const iframe = this.$refs.tzzxIframe;
-
       if (!iframe) return;
 
-
-
       const loadGeneration = this._iframeLoadGeneration;
-
       this.cleanupObserversOnly();
 
-
-
       const isSameOrigin = this.trySameOrigin(iframe, loadGeneration);
-
       if (!isSameOrigin) {
-
         this.setupPostMessage(iframe, loadGeneration);
-
       }
-
     },
 
-
-
     trySameOrigin(iframe, loadGeneration) {
-
       try {
-
         const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
-
         if (!iframeDoc || !iframeDoc.body) {
-
           return false;
-
         }
 
-
-
         const updateHeight = () => {
-
           if (loadGeneration !== this._iframeLoadGeneration) return;
 
-
-
           const height = Math.max(
-
             iframeDoc.body.scrollHeight,
-
             iframeDoc.body.offsetHeight,
-
             iframeDoc.documentElement.scrollHeight,
-
             iframeDoc.documentElement.offsetHeight
-
           );
-
           if (height > 0) {
-
             this.iframeHeight = height + 20;
-
             this.heightMode = 'same-origin';
-
-            this.iframeScrolling = 'no';
-
           }
-
         };
 
-
-
         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, loadGeneration) {
-
       this._messageHandler = (event) => {
-
         if (loadGeneration !== this._iframeLoadGeneration) return;
-
         if (!isAllowedIframeMessageOrigin(event.origin)) return;
-
         if (event.source !== iframe.contentWindow) return;
 
-
-
         const data = event.data;
-
         if (!data || data.type !== 'iframeHeight') return;
 
-
-
         const height = Number(data.height);
-
         if (!Number.isFinite(height) || height <= 0) return;
 
-
-
         this.iframeHeight = height + 20;
-
         this.heightMode = 'post-message';
-
-        this.iframeScrolling = 'no';
-
       };
 
       window.addEventListener('message', this._messageHandler);
 
-
-
       const requestHeight = () => {
-
         if (loadGeneration !== this._iframeLoadGeneration) return;
-
         try {
-
           iframe.contentWindow.postMessage({ type: 'REQUEST_HEIGHT' }, '*');
-
         } catch (e) {}
-
       };
 
-
-
       requestHeight();
 
-
-
       let retryCount = 0;
-
       this.heightCheckTimer = setInterval(() => {
-
         requestHeight();
-
         retryCount += 1;
-
         if (retryCount >= 5) {
-
           clearInterval(this.heightCheckTimer);
-
           this.heightCheckTimer = null;
-
           if (loadGeneration === this._iframeLoadGeneration && this.heightMode === 'default') {
-
             this.applyViewportFallback();
-
           }
-
         }
-
       }, 1000);
-
     },
 
-
-
     applyViewportFallback() {
-
-      this.iframeHeight = getViewportIframeFallbackHeight();
-
       this.heightMode = 'viewport-fallback';
-
-      this.iframeScrolling = 'auto';
-
     },
 
-
-
     cleanupObserversOnly() {
-
       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;
-
       }
-
     },
 
-
-
     cleanup() {
-
       this.cleanupObserversOnly();
-
     },
-
   },
-
 };
-
 </script>
 
-
-
 <style lang="less" scoped>
-
 .tzzx-page {
-
   width: 100%;
 
-
-
   .tzzx-iframe {
-
     display: block;
-
     width: 100%;
-
   }
 
-
-
   .loading,
-
   .empty {
-
     display: flex;
-
     align-items: center;
-
     justify-content: center;
-
     width: 100%;
-
     min-height: 480px;
-
     font-size: 16px;
-
     color: #999;
-
   }
-
 }
-
 </style>
-