iframe为什么不建议使用？快速速点进来

由于 iframe 的特殊性很适合作为一个沙箱环境来使用，除了内嵌网页外，还可以用于预览动态生成 HTML 片段，由于 HTML 片段可能来自用户输入，放在 iframe 是一种比较安的全处理方式。

实际上我们也是这样用的，最近在进行在线网页编辑器undefined的开发，需要所见即所得响应用户的操作，iframe 用于页面实时预览。最终我们会生成一份完整的页面 HTML 文件与一张预览图。这次问题也就是出在这个预览图上。

用户保存时我们需要实时生成页面的预览图，前端出图是个老生常谈的问题了，趁手的工具库不多，这里推荐一个出图库 html-to-image，也是这次故事的主角。

html-to-image 的实现是将 HTML 片段嵌入 svg 的 中生成一张 svg 图片后绘制到 canvas 实现的，内嵌 HTML 片段时还需要处理各种依赖样式与静态资源，需要将图片字体一类的资源转成 base64 的内联形式。

在使用 html-to-image 遇到了一个问题，针对 iframe 中 HTML 片段进行前端出图时图片元素是空白的，但父级窗口的图片元素导出又是正常的。所以肯定是 iframe 哪些差异引起的......

标签： iframe为什么不建议使用 老生常谈 趁手的工具库不多 哪些差异引起的