原文链接: 动态实时创建iframe, 实现类似sandbox的在线编程效果
效果如下
dom结构
js 也是可以执行的
https://en.wikipedia.org/wiki/MIME
https://developer.mozilla.org/en-US/docs/Web/API/Blob
https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/srcdoc
主要思想, 将html使用srcdoc 传入, js和css使用blob转化为url后注入
使用iframe模拟一个页面实现类似在线编程的效果
这里用了最简单的字符串替换生成html模板, 注意转换后的类型要使用对于mime类型
export const getHTML = (str, js = "", css = "") => {
const jsUrl = stringToUrl(js, "text/javascript")
const cssUrl = stringToUrl(css, "text/css")
const html = INIT_HTML_TEMPLATE.replace("__HTML__", str)
.replace("__JS__", jsUrl)
.replace("__CSS__", cssUrl)
return html
}