Files
oxygen-ui/src/components/Playground/Output/Preview/iframe.html
2024-01-25 15:35:52 +08:00

54 lines
1.5 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Preview</title>
<!-- es-module-shims -->
</head>
<body>
<script>
window.addEventListener("error", (e) => {
window.parent.postMessage({ type: "ERROR", msg: e.message });
});
window.addEventListener("load", () => {
window.parent.postMessage({ type: "LOADED", msg: "" });
});
window.addEventListener("message", ({ data }) => {
if (data?.type === "UPDATE") {
// Record old styles that need to be removed
const appStyleElement = document.querySelectorAll("style[id^=\"style_\"]") || [];
// Remove old app
const appSrcElement = document.querySelector("#appSrc");
const oldSrc = appSrcElement.getAttribute("src");
appSrcElement.remove();
// Add new app
const script = document.createElement("script");
script.src = URL.createObjectURL(
new Blob([data.data.compiledCode], {
type: "application/javascript"
})
);
script.id = "appSrc";
script.type = "module";
script.onload = () => {
// Remove old style
appStyleElement.forEach(element => {
element.remove();
});
};
document.body.appendChild(script);
URL.revokeObjectURL(oldSrc);
window.parent.postMessage({ type: "DONE", msg: "" });
}
});
</script>
<script type="module" id="appSrc"></script>
<div id="root"></div>
</body>
</html>