添加到第三方页面的 DOM 时如何避免 HTML ID 冲突？

Question

当使用 Javascript / jQuery 添加额外的 HTML 元素到网页并添加额外的外部 CSS 声明来配合它们时，您需要防止这些元素的 ID 和 CSS 类名称与页面上已有的 ID 和 CSS 类名称发生冲突。例如，您可能已经在页面上的某处拥有类似“outerWrapper”或“nav”的 ID，并且新内容也可能具有相同名称的 ID。

创建要添加到您自己的网页的代码时相对容易。

但是，如果您想提供可在任何第 3 方网站上使用的代码，您无法控制页面上已使用的 ID 和类名，更无法控制将来可能对页面进行哪些更改。

那么，在处理供第三方使用的代码时，避免这些冲突的最佳实践是什么？

到目前为止，我们只是简单地使用 iframe，但这并不理想。

CSS 子选择器可以防止我们添加的 CSS 影响现有元素/类，但它们不会阻止我们的新元素由页面上已有的 CSS 设置样式。

为我们添加的内容的所有 ID 添加前缀（例如使用公司、产品名称或容器名称）是唯一的出路吗？例如，视频播放器 JWPlayer 将容器名称作为其 HTML5 播放器的所有元素 ID 的前缀。

我将不胜感激任何想法。

Answer 1

一种选择可能是在动态创建 DOM 对象时使用 GUID 生成 ID。缺点是 ID 的使用不方便用户使用（因为它只是随机生成的字符列表）。查看此线程：Create GUID / UUID in JavaScript?

另一种选择是创建您自己的命名约定，类似于 ASP.Net 的做法。该控件可以有一个静态名称（如“myControl”），但会获取其前面的所有父对象的列表。用户需要确保他们遵循良好的 HTML 实践并为其元素提供 id。因此，如果生成的控件嵌套在表中的 div 中，则新 ID 可能类似于：myTable_myDiv_myControl。