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 哪些差异引起的......