志愿商城的iframe实现

src/views/modules/volunteer/mall/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <!-- 隐藏 iframe，等子页面加载完成并修改后再显示 -->
+    <iframe
+      id="childIframe"
+      ref="childIframe"
+      :src="iframeSrc"
+      width="100%"
+      height="1000px"
+      frameborder="0"
+      style="display: none;"
+      @load="onIframeLoad"
+    ></iframe>
+  </div>
+</template>
+
+<script>
+import http from "@/utils/request";
+export default {
+  data() {
+    return {
+      // 嵌入的网页地址
+      iframeSrc: '', // 初始时 iframeSrc 为空，等接口获取到地址后再赋值
+    };
+  },
+  created() {
+    // 此处请求后端,获取一个ticket票据
+    http.get("/auth/sso/getTicket")
+        .then(({data: res}) => {
+        let ticket = res.data
+        console.log('ticket:', ticket)
+        this.iframeSrc = "../../../epmet-voluntary-mall-admin/pms/product?target=_blank&ticket=" + ticket
+      })
+  },
+  methods: {
+    // 监听 iframe 加载完成事件
+    onIframeLoad() {
+      // 获取 iframe 的内容窗口
+      const iframe = this.$refs.childIframe;
+      const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+      
+      if (iframeDocument) {
+        const styleElement = iframeDocument.createElement('style');
+        styleElement.type = 'text/css';
+        
+        const newStyles = `
+          #app .main-container {
+            margin-left: 0px !important;
+          }
+          #app .sidebar-container {
+              display: none !important;
+          }
+          .navbar {
+              display: none !important;
+          }
+        `;
+        
+        styleElement.appendChild(iframeDocument.createTextNode(newStyles));
+        
+        iframeDocument.head.appendChild(styleElement);
+
+        // 显示 iframe
+        iframe.style.display = 'block';
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+</style>