如何防止javascript和css搞砸？答案

【问题标题】：How to prevent javascript and css messing up?如何防止javascript和css搞砸？
【发布时间】：2011-04-02 00:19:52
【问题描述】：

我的公司有一个网站，为多个客户提供同一个应用程序，因此每个客户都有自己的 html 模板，我们无法编辑其中的任何内容。

我们开发了一个漂亮的 Web 2.0 应用程序，其中包含大量运行良好的 jQuery，它是一个非常有趣的网络玩具，但我们必须将它与来自客户端的可怕和错误的东西（如代码三明治）集成起来，因为它总是给我们决定为我们的应用程序使用一个 iFrame 和一个小 js 来刷新它的高度（父级和 iFrame 内容来自同一个域）。 iFrame 将我们从所有的混乱和怪异中拯救出来，但使用这样的东西很可悲。

你知道更好的解决方案吗？

【问题讨论】：

Mmmmhmmm...代码三明治...好吃...介意告诉我们这句话是什么意思？
大声笑！，嗯...从别人那里拿一段有问题的代码，把你的应用程序放在上面，然后再把第一个代码的另一段放在上面，你就有了！，好吃！！！哈哈哈

标签： javascript css integration

【解决方案1】：

如果您的目标是独立于第三方 CSS 和 JS，您确实必须使用单独的文档，例如 iframe。客户的代码不一定是“坏的”，您可以在您正在使用的内容与他们正在使用的样式表规则和操作之间获得意外的交互。

无论如何，作为别人页面的访客脚本，将像 jQuery 这样的大型侵入性框架拖到他们的窗口中是不礼貌的。即使您使用了noConflict，如果他们页面上的脚本不希望在那里看到它，仍然有许多可能的交互。

【讨论】：

这正是我的想法（谷歌地图使用 iframes..）。唯一困扰我的是可变高度和被困在 iframe 中的叠加层/灯箱。

【解决方案2】：

关于 CSS，您可以使用“重置”样式表，例如 http://meyerweb.com/eric/tools/css/reset/。

如果 webapp 中的所有内容都在某个标签内，则应用重置样式表（使用字体系列、字体大小等根据您的需要进行修改）。那么您的客户font-family,font-size,margins 等不会对您的网络应用产生影响。

要获得您需要的每个 CSS 属性，您可以使用 Chrome 检查您的 web 应用程序（在您的环境中，而不是客户端中），并查看带有 Show inherited 的 Computed style。在那里您可以看到客户可能设置的属性，但有很多您不需要的属性。有些甚至可能是错误的 - 例如尺寸，因此请注意并将其与非计算样式相结合。

并确保您使用下面的显式内容标签调用您所做的一切，这样您就不会弄乱客户的 html/css：

#YourWebAppMainTag a {}

【讨论】：

是的，我们已经这样做了，因此所有子节点的所有屏幕 css 属性都使用“！important”标志定义。 js呢？

【解决方案3】：

好吧，我们终于在匿名函数中解决了这个封装 Javascript 代码的问题（像 Google 的一些大人物一样），对于 CSS，我们使用了很多子选择器，在某些情况下还使用了“！important”规则。

【讨论】：