如何防止javascript和css搞砸了？

Question

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

我们开发了一个漂亮的Web 2.0应用程序，其中包含大量jQuery，效果很好，它是一个非常有趣的网络玩具，但是我们必须将它与来自客户端的可怕和错误的东西（如代码三明治）整合在一起，并且总是给它我们所有的问题我们决定使用iFrame为我们的应用程序和一些小js刷新其高度（父和iFrame内容来自同一个域）。内嵌框架拯救我们从所有的混乱和怪异，但它的悲伤使用类似的东西。

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

Answer 1

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

无论如何，作为其他人页面的访客脚本，将jQuery等大型侵入式框架拖入他们的窗口是不礼貌的。即使您使用noConflict，如果其网页上的脚本不希望在那里看到它，仍然会有很多可能的互动。

Answer 2

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

如果来自webapp的所有内容都在某个标签内，则应用重置样式表（根据您的需要使用font-family，font-size等进行修改）。然后，您的客户font-family,font-size,margins等对您的网络应用没有影响。

要获取所需的每个CSS属性，您可以使用Chrome检查您的webapp（在您的环境中，而不是客户端），并查看Computed style上的Show inherited。在那里，您可以看到客户可能设置的属性，但有许多您不需要的属性。有些甚至可能是错误的 - 例如维度，请注意并将其与非计算样式相结合。

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

#YourWebAppMainTag a {}

Answer 3

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