本文作者:IMWeb 何璇 原文出处:IMWeb社区 未经同意,禁止转载
最近接了个需求,要实现一个FAQ页面。我心想那不简单嘛,就一个Tab加内容展示,结果最后排期还挺紧的,着实蛋疼了一小下。下面分享一些小心得:
一开始实现这个页面都是怎么简单怎么来,监听Tab点击,然后向CGI请求到文章数据后,直接用Jquery渲染到页面上$('article').html(content)
。很快你就发现,页面上展示的内容跟后台编辑的展示不一样。因为页面加载了一些公用的样式影响了文章的展示,比如:
可以看下这个例子,在课程概述里其实是富文本的展示,但是目前大部分课程都选择自己PS作图上传上去。因为受到的影响实在太大了。
于是你需要要弄一个CSS sandbox来展示这个文章。
我第一个想到是命名空间,其实很简单,写过组件系统或者了解过H5制作器实现的人都应该知道,如何实现组件与组件之间的样式隔离,就是通过命令前缀来做的:
#namespace {
h1 {
font-size: 1.17em;
}
h2 {
...
}
...
}
通过上述方式,我可以在<article id="article-sandbox">
元素空间下,定义一套基本的样式,将common.css
的影响去除。但是这样做一看就知道有很大局限性:
除了基础,页面样式是变化的,后台编辑的文章富文本内容也是变化的(而且会更复杂,以后可以能会增加音视频等),这些变化只要冲突就需要不断地修改此空间下的样式,重新发布,维护成本极高。
其实这样的方式在上面就已经提到适用于哪种场景了:
h1
到h6
,p
,列表几个元素基本覆盖了最后使用的方案是<iframe>
元素,这是真正意义上的CSS沙盒。
顺带提一下,一开始为了图方便结合了data URL一起使用<iframe src="data:text/html,html string">
,但是最后蛋疼的还是自己。
因为iframe方案其实也会带来许多局限性:
最终还是通过与iframe之间的跨域通信来解决这些问题了。
感觉shadow DOM简直天生迎合这个场景,但是由于它的兼容性不好一早就放弃了这个方案。
如果你不了解什么是shadow DOM,请先查阅https://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
其实在开发过程中还遇到一些其他问题,但由于时间精力有限,来不及深入进去探讨,这里简要提一下。
(TODO...)
以上是本人一些浅见,欢迎一起学习交流。