在不使用 iframe 的情况下隔离 HTML 元素答案

【问题标题】：Isolating HTML element without using iframe在不使用 iframe 的情况下隔离 HTML 元素
【发布时间】：2016-08-04 07:55:17
【问题描述】：

我正在构建一个MVC 应用程序，其中angular 作为客户端框架。我正在加载选项卡内的所有视图；用户可以多次打开同一个视图，问题就来了。

当用户打开同一个视图两次时，会出现重复的 ID，因此某些 html 属性将无法正常工作（例如，“label”元素的“for”属性）

我知道，我可以生成随机 ID 来避免这个问题，但这在我的情况下是不可接受的。

我需要隔离视图根（div 元素），这样它就不会干扰其他元素，例如 iframe 但不使用 iframe :)

【问题讨论】：

只是出于好奇，您为什么不想生成一系列 ID？（随机无法保证唯一性）。
对于它的价值，ID 可以像其他所有东西一样可变：<div id={{id}}>Hi</div>，因此可以适用于for 和label。也许你原来的问题可以绕过？
我不能使用生成的 ID，因为视图是由最终用户使用静态 ID 设计的，它需要一些字符串操作来应用生成的 ID。

【解决方案1】：

你不能。 DOM 结构位于window 和随后的document 内。只能有一个window pr (i)frame。

您可以做的也是最常用的方法是为特定的选项卡/视图生成 UUID。此 UUID 必须在您的后端可用，并且是您将表单帖子定向到正确上下文的方式。

现在，当您为每个选项卡生成 HTML 时，使用 UUID 为您的 ID 添加后缀。但请记住，如果您的主视图是 100% 静态且没有重新加载页面，则 DOM 将继续堆积 - 并最终占用大量内存。

【讨论】：