动态实时创建iframe, 实现类似sandbox的在线编程效果

原创
2020/11/21 15:55
阅读数 54

 

原文链接: 动态实时创建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
}

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部