如何防止JavaScript和CSS搞亂？

我的公司有一個網站，爲幾個客戶提供相同的應用程序，所以每個客戶都有自己的html模板，我們不能編輯任何這樣的內容。如何防止JavaScript和CSS搞亂？

我們開發了一個漂亮的Web 2.0應用程序，其中包含許多jQuery，它非常棒，它是一個完全令人愉悅的網絡玩具，但我們必須將它與來自客戶端的可怕和bug的東西（如代碼三明治）整合在一起，給了我們各種各樣的問題，我們決定使用我們的應用程序的iFrame和一些js來刷新它的高度（父級和iFrame內容來自同一個域）。 iFrame讓我們擺脫了所有的混亂和怪異，但使用類似的東西感到很傷心。

你知道更好的解決方案嗎？

來源

2010-08-21 coma

Mmmmhmmm ...代碼三明治...好吃...介意告訴我們你說的那個詞組是什麼意思？ – 2010-08-21 09:29:10

哈哈！，哼哼......從別人那裏拿出一小段車的代碼，把你的應用程序放在上面，然後再放上第一個，你就擁有了！ hahaha – coma 2010-08-21 09:50:35

那麼，我們終於解決了這個封裝Javascript代碼在一個匿名函數內（像一些大個子像Google一樣的混亂），對於CSS我們使用了很多子選擇器，在某些情況下使用「！important」規則。

來源

2012-07-10 19:23:39 coma

關於CSS，您可以使用「重置」樣式表，如http://meyerweb.com/eric/tools/css/reset/。

如果web應用程序中的所有內容位於某個標籤內，則應用重置樣式表（根據您的需要修改font-family，font-size等）。那麼你的客戶font-family,font-size,margins等不會影響你的web應用程序。

要獲得您需要的每個CSS屬性，您可以使用Chrome瀏覽器檢查您的web應用程序（在您的環境中，而不是客戶端），並在Computed style上看到Show inherited。在那裏你可以看到客戶可能設置的屬性，但有很多你不需要的屬性。有些甚至可能是錯誤的 - 比如維度，所以要小心，並將其與非計算風格結合起來。

，並確保你叫你做的一切與你的明確內容標籤像下面這樣你就不會弄亂客戶HTML/CSS：

#YourWebAppMainTag a {}

來源

2010-08-21 09:32:21

是的，我們已經做到了，所有來自所有子節點的屏幕CSS屬性都使用「！important」標誌來定義。那麼js呢？ – coma 2010-08-21 09:47:09

如果你的目標是要成爲獨立的第三方的CSS和JS，你必須確實使用一個單獨的文件，如iframe。客戶的代碼不一定非常糟糕，因爲您無法在您使用的內容與樣式表規則和他們正在使用的操作之間發生意外的交互。

無論如何，作爲其他人的頁面的訪客腳本將粗暴，像jQuery一樣的大型侵入式框架拖入他們的窗口是不禮貌的。即使你使用了noConflict，如果頁面上的腳本不希望在那裏看到它，仍然有很多可能的交互。

來源

2010-08-21 10:40:34 bobince

這正是我以爲（谷歌地圖使用iframes ..）。唯一讓我困擾的是變量高度和被嵌入到iframe中的疊加/燈箱。 – coma 2010-08-21 18:07:31

如何防止JavaScript和CSS搞亂？

回答

相關問題