如何在添加到第三方頁面的DOM時避免HTML ID衝突？

Question

當使用Javascript/jQuery將額外的HTML元素添加到網頁並添加額外的外部CSS聲明以與它們一起使用時，您需要防止這些元素的ID和CSS類名與頁面上已有的名稱相沖突。例如您可能已在頁面上的某個位置擁有諸如「outerWrapper」或「nav」之類的ID，並且新內容也可能具有相同的ID。

在創建要添加到自己的網頁中的代碼時，它相對容易。

但是，如果您想要提供可在任何第三方網站上使用的代碼，則無法控制頁面上已使用的ID和類名稱，甚至不能控制可能對在未來的頁面。

那麼在處理第三方使用的代碼時避免這些衝突的最佳做法是什麼？

到目前爲止，我們只是簡單地使用iframe，但這並不理想。

CSS子選擇器可以防止我們添加的CSS影響現有的元素/類，但它們不會阻止我們的新元素通過已經在頁面上的CSS進行樣式化。

在公司，產品名稱或容器名稱中添加內容的所有ID是唯一的前進方向嗎？例如視頻播放器JWPlayer會將容器名稱作爲其HTML5播放器的所有元素ID的前綴。

我會很感激任何想法。

Answer 1

一個選項可能是動態創建DOM對象時使用GUID生成ID。缺點是ID不會使用用戶友好的（因爲它只是一個隨機生成的字符列表）。看看這個帖子：Create GUID/UUID in JavaScript?

另一種選擇是創建自己的命名約定，類似於ASP.Net所做的。該控件可以有一個靜態名稱（如'myControl'），但會獲得所有父對象的列表。用戶需要確保他們遵循良好的HTML practive併爲其元素提供id。所以，如果你生成的控件嵌套在一個表格中，你的新ID可能是這樣的：myTable_myDiv_myControl。

Answer 2

這對我來說也是一個挑戰，尤其是因爲我正在處理的應用程序由很多包含表單字段的jquery彈出窗口/對話框組成，這些表單字段的輸入ID與頁面的父級部分上的表單字段相同。

的事情，我發現，以令人滿意的方式解決這個問題：

1. 依靠服務器端生成HTML的輸入（我創建了自己的類此）。這將使您可以輕鬆地在HTML輸入標識前添加「前綴」。
2. 在你做的每件事情中只使用camelCase。當處於需要前綴以避免命名衝突的情況時，可以使用下劃線來顯示名稱的哪部分是前綴和哪部分不是前者的分隔。下劃線現在在您的應用中有一個直接目的，這樣您就可以輕鬆編寫功能，在需要時剝去前綴。
3. 使用一致的命名約定創建前綴。我親自抓取輸入來自後端服務類的類名（不要與您在＃1中提到的用來生成它們的類混淆），並將其用作前綴。例如，blogUsers_firstName和blogUsers_lastName和blogUsers_email都是來自服務器端類別class blogUsers { }的HTML文本輸入。
4. 當您執行諸如創建ajax調用之類的事情時，會去掉前綴，這樣您就可以將輸入接收到服務器端控制器類中，而無需在其上添加前綴（因爲您現在是服務器端並且沒有名稱衝突） 。這使得服務器端的生活變得更加簡單和清晰。
5. 欲瞭解更多公共前端網站的情況下，你更有可能在<form>標籤內包含你的輸入，並可能實現漸進增強/優雅降級（即jQuery點擊綁定提交按鈕event.preventDefault ），那麼請不要擔心......只要確保您的服務器端代僅將前綴添加到ID而不是輸入的名稱。在發送數據時，常規的舊錶單提交使用name，因此請保持此狀態不含前綴，並且對於那些關閉了javascript的想象中的偏執的人來說，您將會很好。