iframe 自动高度

src/components/CommandRunResult.vue

@@ -19,6 +19,8 @@
             <iframe
               ref="iframe"
               :srcdoc="runResult"
+              :height="frameHeight"
+              @load="frameLoad"
               frameborder="0"
               v-if="htmlOutput"
             ></iframe>
@@ -41,7 +43,9 @@
       <iframe
         ref="iframe"
         :srcdoc="runResult"
+        :height="frameHeight"
         frameborder="0"
+        @load="frameLoad"
         v-if="htmlOutput"
       ></iframe>
       <pre
@@ -75,6 +79,7 @@ export default {
       history: [],
       historyIdx: null,
       htmlOutput: false,
+      frameHeight: 0,
     };
   },
   props: {
@@ -94,8 +99,8 @@ export default {
     needTempPayload() {
       return ["edit", "new", "config"].includes(this.action.type);
     },
-    iframeCtw() {
+    maxHeight() {
-      return this.$refs?.iframe?.contentWindow;
+      return this.fromUtools ? 600 : 300;
     },
   },
   methods: {
@@ -221,7 +226,7 @@ export default {
     // 显示运行结果
     showRunResult(content, isSuccess, action) {
       this.isResultShow = true;
-      this.setIframe();
+      this.frameInit();
       this.runResultStatus = isSuccess;
       let contlength = content?.length || 0;
       if (contlength > this.resultMaxLength)
@@ -233,22 +238,23 @@ export default {
           content.slice(contlength - 100);
       let pretreatment = action(content);
       pretreatment && (this.runResult += pretreatment);
-      this.fromUtools &&
+      this.outputAutoHeight();
-        this.$nextTick(() => {
-          this.outputAutoHeight();
-        });
     },
     // 根据输出自动滚动及调整 utools 高度
     outputAutoHeight(autoScroll = true, autoHeight = true) {
-      let clientHeight = document.body.clientHeight;
+      if (!this.fromUtools) return;
-      let pluginHeight = clientHeight < 600 ? clientHeight : 600;
+      this.$nextTick(() => {
-      autoHeight && utools.setExpendHeight(pluginHeight);
+        let clientHeight = document.body.clientHeight;
-      autoScroll &&
+        let pluginHeight =
-        window.scroll({
+          clientHeight < this.maxHeight ? clientHeight : this.maxHeight;
-          top: clientHeight,
+        autoHeight && utools.setExpendHeight(pluginHeight);
-          left: 0,
+        autoScroll &&
-          behavior: "smooth",
+          window.scroll({
-        });
+            top: clientHeight,
+            left: 0,
+            behavior: "smooth",
+          });
+      });
     },
     stopRun() {
       this.runResult = "";
@@ -258,17 +264,30 @@ export default {
         document.removeEventListener("keydown", this.listener, true);
       }
     },
-    setIframe() {
+    // 初始化时覆盖变量
+    frameInit() {
       this.$nextTick(() => {
-        if (!this.iframeCtw) return;
+        let cfw = this.$refs?.iframe?.contentWindow;
+        if (!cfw) return;
         let ctx = {
           quickcommand,
           utools,
           parent: undefined,
         };
-        Object.assign(this.iframeCtw, _.cloneDeep(ctx));
+        Object.assign(cfw, _.cloneDeep(ctx));
       });
     },
+    // 加载时更改样式
+    frameLoad() {
+      let cfw = this.$refs?.iframe?.contentWindow;
+      if (this.$q.dark.isActive) cfw.document.body.style.color = "white";
+      cfw.document.body.style.margin = "0";
+      this.frameHeight = Math.min(
+        cfw.document.body.scrollHeight,
+        this.maxHeight
+      );
+      this.outputAutoHeight();
+    },
   },
   unmounted() {
     this.stopRun();
@@ -285,6 +304,5 @@ export default {
 }
 iframe {
   width: 100%;
-  height: 550px;
 }
 </style>