iframe和HTML5 blob实现JS,CSS,HTML直接当前页预览 （转载）

Posted 2020-10-06 崔希迎

 

所以此技术只适用于对兼容性没有严格要求的一些项目。

三、结束语

其实很多效果，我们直接在结束当前页面的window上下文预览也没什么，但是有一些效果就不行，例如，预览针对响应式布局的media屏幕宽度查询下的效果，必须是真实的窗体宽度才会触发CSS查询语句的执行，此时，只能在<iframe>中预览，我们只要把<iframe>元素宽度设置到我们需要的大小就可以了，例如，需要预览类似如下CSS代码效果：

@media screen and (max-width:480px) {
    img { max-width: 100%; }
}

只要设置<iframe>元素宽度为480像素就可以了。