我们在客户的网站上使用了一个 js/html/css 小部件,并注意到在某些网站上,由于页面中的 css 层叠并与布局混淆,它不能很好地显示,就像网站有一堆CSS应用于页面上的所有div等。
有没有一种简单的方法可以将样式应用于我的小部件的容器,以便侵入性 css 不会破坏布局?
各位大佬是怎么处理这种情况的?
谢谢,
我们在客户的网站上使用了一个 js/html/css 小部件,并注意到在某些网站上,由于页面中的 css 层叠并与布局混淆,它不能很好地显示,就像网站有一堆CSS应用于页面上的所有div等。
有没有一种简单的方法可以将样式应用于我的小部件的容器,以便侵入性 css 不会破坏布局?
各位大佬是怎么处理这种情况的?
谢谢,
这是一个常见的问题。我使用的是这个:https ://github.com/premasagar/cleanslate
一个普通的 CSS 重置样式表是不够的。那些重置/规范化浏览器默认样式。他们不清除作者创建的那些。
此外,由同一作者https://github.com/premasagar/sqwidget - 它处理 css 重置以及一些更重要的事情。
当我在这里时,这里是来自 Olark 团队的另一个:https ://github.com/olark/lightningjs它与上一个类似,但具有更多功能,因此更复杂。这个我没用过。
你可以看看Shadow DOM。这非常适合像您这样的小部件。Shadow DOM 不允许父网页访问您的小部件的 DOM,CSS 规则无法访问您的小部件。
我会将小部件放在您自己托管的 iframe 中。这解决了这个问题。您可以为您的客户提供可嵌入 iframe 的代码。
这是大型网站、twitter、facebook 使用 iframe 作为其小部件的原因之一。