优化页面内嵌iframe切换tab不刷新数据

2022-08-23 20:47:41 +08:00
parent 2952cb2c4f
commit 439b134c9b
6 changed files with 101 additions and 35 deletions
--- a/src/layout/components/InnerLink/index.vue
+++ b/src/layout/components/InnerLink/index.vue
@ -1,30 +1,43 @@
-<script>
-export default {
-  setup() {
-    const route = useRoute();
-    const link = route.meta.link;
-    if (link === "") {
-      return "404";
-    }
-    let url = link;
-    const height = document.documentElement.clientHeight - 94.5 + "px";
-    const style = { height: height };
+<template>
+  <div :style="'height:' + height" v-loading="loading" element-loading-text="正在加载页面，请稍候！">
+    <iframe
+      :id="iframeId"
+      style="width: 100%; height: 100%"
+      :src="src"
+      frameborder="no"
+    ></iframe>
+  </div>
+</template>

-    // 返回渲染函数
-    return () =>
-      h(
-        "div",
-        {
-          style: style,
-        },
-        h("iframe", {
-          src: url,
-          frameborder: "no",
-          width: "100%",
-          height: "100%",
-          scrolling: "auto",
-        })
-      );
+<script setup>
+const props = defineProps({
+  src: {
+    type: String,
+    default: "/"
  },
-};
+  iframeId: {
+    type: String
+  }
+});
+
+const height = ref(document.documentElement.clientHeight - 94.5 + "px");
+const loading = ref(false);
+
+onMounted(() => {
+    const { proxy } = getCurrentInstance()
+    const iframeId = ("#" + props.iframeId).replace(/\//g, "\\/");
+    const iframe = document.querySelector(iframeId);
+    // iframe页面loading控制
+    if (iframe.attachEvent) {
+      loading.value = true;
+      iframe.attachEvent("onload", function () {
+        proxy.loading = false;
+      });
+    } else {
+      loading.value = true;
+      iframe.onload = function () {
+        proxy.loading = false;
+      };
+    }
+})
 </script>