feat:修复页脚问题

txw-mhzc-web/src/pages/index/components/nav/index2.vue

@@ -474,10 +474,16 @@ export default {
       }
     },
     updateIframeUrl(menus) {
-      if (!menus || !this.kxurl) return;
+      if (!menus) return;
       menus.forEach(menu => {
         if (menu.path) {
-          menu.iframeUrl = `${this.kxurl}${menu.path}`;
+          // 门户内嵌碳证中心：走同源 /web/ 反代（测试/生产 nginx），便于 iframe 高度自适应
+          const portalEmbed = menu.iframeUrl && String(menu.iframeUrl).startsWith('/web/');
+          if (portalEmbed) {
+            menu.iframeUrl = `/web${menu.path}`;
+          } else if (this.kxurl) {
+            menu.iframeUrl = `${this.kxurl}${menu.path}`;
+          }
         }
         if (menu.child && menu.child.length > 0) {
           this.updateIframeUrl(menu.child);

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

@@ -0,0 +1,65 @@
+/**
+ * 碳证中心 iframe 地址归一化：门户内嵌统一走同源 /web/ 反代（如 carbon.liantu.tech/web/...）
+ */
+export function normalizeTzzxPageUrl(page) {
+  if (!page || typeof page !== 'string') return '';
+
+  let url = page.trim();
+  if (!url) return '';
+
+  if (url.startsWith('http://') || url.startsWith('https://')) {
+    try {
+      const parsed = new URL(url);
+      if (parsed.origin === window.location.origin) {
+        url = parsed.pathname + parsed.search + parsed.hash;
+      }
+    } catch (e) {
+      return url;
+    }
+  }
+
+  if (url.startsWith('/web/')) {
+    return url;
+  }
+
+  const kxtfwzxMarker = '/view/kxtfwzx';
+  const kxtIdx = url.indexOf(kxtfwzxMarker);
+  if (kxtIdx !== -1) {
+    const rest = url.slice(kxtIdx + kxtfwzxMarker.length);
+    return `/web${rest.startsWith('/') ? rest : `/${rest}`}`;
+  }
+
+  const carbonPathMatch = url.match(/\/(carbon[\w-]*|trustedCarbon[\w-/]*)(?:\?.*)?$/i);
+  if (carbonPathMatch) {
+    const pathStart = url.indexOf(carbonPathMatch[0]);
+    const subPath = url.slice(pathStart);
+    return subPath.startsWith('/web/') ? subPath : `/web${subPath.startsWith('/') ? subPath : `/${subPath}`}`;
+  }
+
+  if (url.startsWith('/') && !url.startsWith('/web/')) {
+    return `/web${url}`;
+  }
+
+  return url;
+}
+
+export function getViewportIframeFallbackHeight() {
+  const navOffset = parseInt(
+    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) {
+  if (!origin) return false;
+  if (origin === window.location.origin) return true;
+  try {
+    const host = window.location.hostname;
+    if (host === 'localhost' || host === '127.0.0.1') return true;
+  } catch (e) {
+    return false;
+  }
+  return false;
+}

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

@@ -128,10 +128,10 @@ export default {
         window.location.href = `/view/mhzc/login`;
         return;
       }
-      // this.iframeUrl = iframeUrl;
       this.$router.push({
-        path: `/tzzx?page=${iframeUrl}`
+        path: '/tzzx',
-      })
+        query: { page: iframeUrl },
+      });
     },
 
 

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

@@ -5,45 +5,81 @@
       <iframe
         ref="tzzxIframe"
         :src="iframeUrl"
-        width="100%"
+        class="tzzx-iframe"
-        :height="iframeHeight"
         frameborder="0"
-        scrolling="no"
+        :scrolling="iframeScrolling"
+        :style="iframeStyle"
         @load="onIframeLoad"
       ></iframe>
-      <Footer />
     </template>
     <div v-else class="empty">链接错误</div>
   </div>
 </template>
 
 <script>
-import Footer from '@/pages/index/components/footer/index.vue';
+import {
+  normalizeTzzxPageUrl,
+  getViewportIframeFallbackHeight,
+  isAllowedIframeMessageOrigin,
+} from '@/pages/index/utils/tzzx-iframe';
+
+const DEFAULT_IFRAME_HEIGHT = 800;
 
 export default {
   name: 'tzzx',
-  components: { Footer },
   data() {
     return {
       iframeUrl: '',
       loading: true,
-      iframeHeight: 800,
+      iframeHeight: DEFAULT_IFRAME_HEIGHT,
+      iframeScrolling: 'no',
+      heightMode: 'default',
       resizeObserver: null,
       heightCheckTimer: null,
+      _messageHandler: null,
+      _iframeLoadGeneration: 0,
     };
   },
+  computed: {
+    iframeStyle() {
+      return {
+        width: '100%',
+        height: `${this.iframeHeight}px`,
+        border: 'none',
+        display: 'block',
+      };
+    },
+  },
   mounted() {
     this.fetchPage();
-    this.$watch(() => this.$route.query, () => 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 { page } = this.$route.query;
+      const rawPage = this.$route.query.page;
-      if (page) {
+      const page = Array.isArray(rawPage) ? rawPage[0] : rawPage;
-        this.iframeUrl = page;
+      const nextUrl = normalizeTzzxPageUrl(page);
+
+      if (nextUrl === this.iframeUrl && !this.loading) {
+        return;
+      }
+
+      this.cleanup();
+      this.resetIframeMetrics();
+
+      if (nextUrl) {
+        this.iframeUrl = nextUrl;
         this.loading = false;
       } else {
         this.iframeUrl = '';
@@ -51,26 +87,42 @@ export default {
       }
     },
 
+    resetIframeMetrics() {
+      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 isSameOrigin = this.trySameOrigin(iframe);
+      const loadGeneration = this._iframeLoadGeneration;
+      this.cleanupObserversOnly();
 
+      const isSameOrigin = this.trySameOrigin(iframe, loadGeneration);
       if (!isSameOrigin) {
-        this.setupPostMessage(iframe);
+        this.setupPostMessage(iframe, loadGeneration);
       }
     },
 
-    trySameOrigin(iframe) {
+    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,
@@ -79,6 +131,8 @@ export default {
           );
           if (height > 0) {
             this.iframeHeight = height + 20;
+            this.heightMode = 'same-origin';
+            this.iframeScrolling = 'no';
           }
         };
 
@@ -93,7 +147,7 @@ export default {
         }
 
         const images = iframeDoc.querySelectorAll('img');
-        images.forEach(img => {
+        images.forEach((img) => {
           if (!img.complete) {
             img.addEventListener('load', updateHeight);
             img.addEventListener('error', updateHeight);
@@ -102,25 +156,33 @@ export default {
 
         return true;
       } catch (e) {
-        console.log('[tzzx] 检测到跨域iframe，将使用postMessage方案');
+        console.log('[tzzx] 检测到跨域 iframe，将使用 postMessage / 视口降级方案');
         return false;
       }
     },
 
-    setupPostMessage(iframe) {
+    setupPostMessage(iframe, loadGeneration) {
       this._messageHandler = (event) => {
-        if (event.data && event.data.type === 'iframeHeight') {
+        if (loadGeneration !== this._iframeLoadGeneration) return;
-          this.iframeHeight = event.data.height;
+        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(
+          iframe.contentWindow.postMessage({ type: 'REQUEST_HEIGHT' }, '*');
-            { type: 'REQUEST_HEIGHT' },
-            '*'
-          );
         } catch (e) {}
       };
 
@@ -129,15 +191,24 @@ export default {
       let retryCount = 0;
       this.heightCheckTimer = setInterval(() => {
         requestHeight();
-        retryCount++;
+        retryCount += 1;
-        if (retryCount > 5) {
+        if (retryCount >= 5) {
           clearInterval(this.heightCheckTimer);
           this.heightCheckTimer = null;
+          if (loadGeneration === this._iframeLoadGeneration && this.heightMode === 'default') {
+            this.applyViewportFallback();
+          }
         }
       }, 1000);
     },
 
-    cleanup() {
+    applyViewportFallback() {
+      this.iframeHeight = getViewportIframeFallbackHeight();
+      this.heightMode = 'viewport-fallback';
+      this.iframeScrolling = 'auto';
+    },
+
+    cleanupObserversOnly() {
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();
         this.resizeObserver = null;
@@ -151,6 +222,10 @@ export default {
         this._messageHandler = null;
       }
     },
+
+    cleanup() {
+      this.cleanupObserversOnly();
+    },
   },
 };
 </script>
@@ -159,10 +234,9 @@ export default {
 .tzzx-page {
   width: 100%;
 
-  iframe {
+  .tzzx-iframe {
     display: block;
     width: 100%;
-    border: none;
   }
 
   .loading,
@@ -171,7 +245,7 @@ export default {
     align-items: center;
     justify-content: center;
     width: 100%;
-    height: 100vh;
+    min-height: 480px;
     font-size: 16px;
     color: #999;
   }