改用blob载入html输出

This commit is contained in:
fofolee 2022-04-26 10:51:34 +08:00
parent 94ad624fb8
commit 80ec98be2e

View File

@ -3,7 +3,7 @@
<iframe <iframe
ref="iframe" ref="iframe"
sandbox="allow-scripts allow-forms" sandbox="allow-scripts allow-forms"
:srcdoc="frameStyle + runResult" :src="src"
:height="frameHeight" :height="frameHeight"
frameborder="0" frameborder="0"
@load="frameLoad" @load="frameLoad"
@ -39,6 +39,7 @@ const frameStyle = `<style>::-webkit-scrollbar {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
} }
body { body {
padding: 10px 20px;
margin: 0; margin: 0;
color: ${utools.isDarkColors() ? "white" : "unset"} color: ${utools.isDarkColors() ? "white" : "unset"}
} }
@ -63,6 +64,15 @@ export default {
showFrame() { showFrame() {
return this.enableHtml && this.runResultStatus; return this.enableHtml && this.runResultStatus;
}, },
src() {
return this.showFrame
? window.URL.createObjectURL(
new Blob([this.frameStyle, this.runResult], {
type: "text/html",
})
)
: "";
},
}, },
mounted() { mounted() {
this.frameInit(); this.frameInit();
@ -78,7 +88,9 @@ export default {
Object.assign(this.cfw, ctx); Object.assign(this.cfw, ctx);
this.cfw.onload = () => { this.cfw.onload = () => {
this.frameHeight = Math.min( this.frameHeight = Math.min(
this.cfw.document.documentElement.getBoundingClientRect().height, this.cfw.document.body.innerText
? this.cfw.document.documentElement.getBoundingClientRect().height
: 0,
this.maxHeight this.maxHeight
); );
this.$emit("frameLoad", this.frameHeight); this.$emit("frameLoad", this.frameHeight);