iframe 自动高度

This commit is contained in:
fofolee 2022-04-22 00:27:36 +08:00
parent 3ede4cdd73
commit 3e1e72b7bc

View File

@ -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() {
return this.$refs?.iframe?.contentWindow;
maxHeight() {
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.$nextTick(() => {
this.outputAutoHeight();
});
this.outputAutoHeight();
},
// utools
outputAutoHeight(autoScroll = true, autoHeight = true) {
let clientHeight = document.body.clientHeight;
let pluginHeight = clientHeight < 600 ? clientHeight : 600;
autoHeight && utools.setExpendHeight(pluginHeight);
autoScroll &&
window.scroll({
top: clientHeight,
left: 0,
behavior: "smooth",
});
if (!this.fromUtools) return;
this.$nextTick(() => {
let clientHeight = document.body.clientHeight;
let pluginHeight =
clientHeight < this.maxHeight ? clientHeight : this.maxHeight;
autoHeight && utools.setExpendHeight(pluginHeight);
autoScroll &&
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>