HTML中单独的“命名空间”
由于ID冲突，我的应用程序出现了问题。这个应用程序基本上使用AJAX来根据用户的需求加载代码片段。这些代码片段是非常不同的，但是有时使用，代码片段在HTML中使用相同的ID。
想象一下，用户请求代码片段1并获得以下内容：
....
<input id="myvar" type="checkbox" name="myname" />
....此片段通过JQuery.load()添加到主页面代码中。
然后，用户请求代码片段2并获取：
....
<div id="myvar">....</div>
....此时，有两个不同的HTML标记具有相同的ID，所以当应用程序这样做时：
$("#myvar").something()结果未定义。
因此，问题是我不知道是否可以使用任何javascript、HTML特性或技巧在HTML中拆分代码片段。
它不是在加载时前缀所有ID的选项，因为每个代码段都有一个相关的javascript代码来处理它，并且需要访问代码段DOM。
好消息:片段在页面上被完全隔离。页面结构如下：
<html>
<head>...</head>
<body>
<div id="header">...</div>
<div id="common_controls">...</div>
<div id="snippets">
<div class="snippet" id="snippet-1">
// Snippet 1 code here
</div>
<div class="snippet" id="snippet-2">
// Snippet 2 code here
</div>
</div>
</body>
</html>有什么想法吗？
编辑:我无法控制片段内容，所以使用特定的ID名称并不是一种选项强制。
回答 3
Stack Overflow用户
发布于 2011-09-27 16:50:48
最好的解决方案是将每个代码片段嵌入到单独的IFRAME中，因为ID可能不是唯一引起冲突的项。
严重依赖于文档的默认CSS/script属性的snippets
- Script代码段可能会失败，因为在全局范围内抛出变量的snippets
- Script代码段可能会干扰引用特定类索引(
class="specific")的其他conflicts
- Snippets片段，而当插入到HTML中时，包含
<script>的conflicts
- Snippets将不会被执行，而这对于片段的外观可能很重要。
等等。只需将片段嵌入到脚本化的iframe中，就可以避免这些可能的问题。
编辑
帧可以通过postMessage轻松地与父(甚至跨域)通信。当你在同一个领域时，交流就更容易了。
您可能正在寻找一种更容易在子帧之间进行通信的方法。那么，考虑一下这个示例(相同的域仅限)：
联署材料：
//Snippet from frame 1
var othersnippet = parent.frames["othersnippet"].contentWindow;
othersnippet.getspecialMethod(); //Custom function, EXAMPLEparent(框架内)=top，它引用Windowobjectwindow.frames是一个对象，它按名称引用一个文档中的所有框架。注意：“在文档中”不包括框架中的框架)
HTML：
<iframe name="othersnippet" />
<!-- No id needed, because you access frames through the
window.frames[name] property-->Stack Overflow用户
发布于 2011-09-27 17:05:22
在HTML中，多次使用相同的ID被认为是无效的，正如您已经看到的，它可能导致问题。
如果您能够控制Ajax代码的输出，最好的解决方案是防止它多次输出相同的ID。你还没有给出足够的信息，让我给你很多的帮助，确切地说，如何实现这一点，但这肯定是可能的。
如果相同的If来自不同的Ajax调用，则可以确保每个Ajax调用生成的所有If都以唯一名称作为前缀(可能是生成它们的代码块的模块名)。
如果它们来自相同的代码，那么您应该产生相同ID的唯一原因是您多次将相同的数据输出到页面上。即使在这里，也会有解决方案，但我需要更多地了解应用程序，以便在这种情况下提供更多帮助。
但无论是哪种情况，所描述的问题似乎都是通过jQuery访问它的问题。好消息是，jQuery实际上非常宽容重复的ID。
如果这只是让它与jQuery一起工作的情况，那么您应该能够使它工作，而不必修复实际的复制。只要您能够运行一个选择器，选择您唯一想要的选择器，jQuery就会非常高兴。
如果您想这样做，只需将每个Ajax响应包装在一个<div>中，并使用它自己的唯一ID，然后您可以使用嵌套选择器引用这两个副本，如下所示：
$("#ajaxblock1 #myvar").something()
$("#ajaxblock2 #myvar").something()这将在jQuery中很好地工作。
但是，我不能保证同样的事情在CSS中能很好地工作，标准的DOM getElementById()函数也会崩溃，所以如果您计划使用jQuery以外的任何东西，那么您将想要取消-dup您的ID。
Stack Overflow用户
发布于 2011-09-27 16:53:55
只是想一想：
如果您知道代码段总是在重复的内容#id上面(或下面)，您可能可以这样做：
if ($('#myvar').length == 1) {run function} //no offending repeat #id
else {$('#myvar').eq(1) . . . } //repeating #id, refer to the second instancehttps://stackoverflow.com/questions/7572704
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号