包括帶有javascript小部件的CSS，而不搞亂主機頁面

Question

我正在做一個小部件類型的東西，它依賴於bootstrap中的一些CSS。這個小工具將被插入到宿主頁面是這樣的：

<script type="text/javascript" src="http://mydomain.com/MyWidget.ashx?param1=value"></script> 
<div id="com-mydomain-widget-placeholder"></div> 

凡MyWidget.ashx會做一堆的工作，並加載#com-mydomain-widget-placeholder一些HTML我的小部件。

我的問題是，我如何處理我的CSS？我使用大量的twitter boostrap庫來完成任務，但是它似乎非常耗時提取我正在使用的所有內容，併爲它創建不同的名稱/類。但是，如果我包含整個引導程序的css文件，它可能會搞砸我的客戶端網頁（這不會在我的情況下，但我想以正確的方式做到這一點）。我如何去做這件事？

還有一種方法來檢測他們是否已經加載了twitter Bootstrap CSS的東西？

Answer 1

如果主機頁面使用IFrame加載小部件，則應該將DOM彼此隔離。