如何防止javascript和css混乱？

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

我们开发了一个非常有用的Web 2.0应用程序，其中包含大量的jQuery，效果非常好，这是一个非常有趣的Web玩具，但我们必须将它与来自客户端的可怕和有缺陷的东西（如代码三明治）集成在一起，因为它总是给我们带来各种各样的问题，我们决定为我们的应用程序使用一个iFrame和一个小js来刷新它的高度（父对象和iFrame内容来自同一个域）。iFrame使我们免于所有的混乱和怪异，但使用这样的东西是令人悲哀的

---

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

关于CSS，您可以使用“重置”样式表，如

如果webapp中的所有内容都在某个标记内，则应用重置样式表（根据您的需要使用字体系列、字体大小等进行修改）。然后，您的客户

字体系列、字体大小、边距等不会对您的webapp产生影响

要获得所需的每个CSS属性，您可以检查您的webapp（在您的环境中，而不是在客户端中）使用Chrome，查看
计算样式
和
显示继承的
。在那里，您可以看到客户可能设置的属性，但有许多属性是您不需要的。有些属性甚至可能是错误的-例如尺寸，因此请注意，并将其与非计算样式相结合

并确保您使用显式内容标签调用所有内容，如下图所示，以免弄乱客户的html/css：

#YourWebAppMainTag a {}

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

无论如何，作为其他人页面的来宾脚本，将一个大型的、侵入性的框架（如jQuery）拖到他们的窗口中是不礼貌的。即使您使用了
noConflict
，如果他们页面上的脚本不希望在那里看到它，仍然有许多可能的交互。
我们最终解决了这个封装Java的问题匿名函数中的脚本代码（类似于一些大人物喜欢谷歌的clousure），对于CSS，我们使用了很多子选择器，在某些情况下还使用了“！important”规则。
Mmmmhmmm…代码三明治…美味…介意告诉我们你说的这个短语是什么意思吗？lol！，哼哼…从其他人那里取一段错误代码，将你的应用程序放在上面，然后再从第一段代码中取一段，你就拥有了！美味！！！哈哈哈是的，我们已经这样做了，所以所有子节点的所有屏幕css属性都是用“！important”标志。关于js呢？这正是我所想的（谷歌地图使用iframe…）。唯一困扰我的是可变高度和被困在iframe中的覆盖/灯箱。