HTML 使代码独立于页面的其余部分运行...iframe？答案

【问题标题】：HTML Make code run independently from the rest of the page...iframe?HTML 使代码独立于页面的其余部分运行...iframe？
【发布时间】：2016-10-18 13:56:00
【问题描述】：

这有点难以解释。我正在创建一个网页，显示其他网页将如何在浏览器中呈现。这是我遇到的问题的简化版本...

<div id="test">This is an example of page 1</div>

<div id="test">This is an example of page 2</div>

如您所见，两个 div 具有相同的 ID。在我的情况下，我无法更改 ID，这会导致问题。我还有其他各种 CSS 和 javascript 问题。每一段代码都相互冲突。所以，我一直在寻找一种方法让一个部分独立于其他所有内容进行渲染。一种方法是为每一段代码创建一个 iframe。但这需要我为每个部分创建一个单独的网页，对吗？或者，是否有一种方法可以让 iframe 仅通过在其中输入代码而不是 URL 来工作。

【问题讨论】：

蒂芙尼解决了这个问题。使用 iframe 的 srcdoc 功能正是我所需要的。

标签： javascript html css iframe

【解决方案1】：

在 HTML 文档中，每个元素只能有一个 id。所以每个 div 必须有不同的 id，否则你会遇到问题。如果多个元素需要具有相同的名称，您可以使用类<div class="test" id="unique-id"></div>，然后使用<div class="test" id="another-id"></div>。

要回答您关于 iframe 的问题，是的，您需要为每个 iframe 设置一个单独的页面。无法在 iframe 标记中编写代码以单独执行。请参阅iframe spec。

编辑：在自己阅读 iframe 规范后，您似乎可以使用 srcdoc 属性覆盖 src 属性中的内容，但它看起来像 this isn't entirely accepted across browsers。 MDN has more information about the attribute.

【讨论】：

我知道这一点，但正如我所说，它可以通过 iframe 完成。我正在寻找一种方法来做到这一点，而无需创建单独的 iframe 页面。在我的情况下，我无法使用课程。一个原因是因为我在我的 html 中使用了
如果你需要用 CSS 定位标签，你知道input[for="someInput"]{ /* CSS here */ }吗？
这听起来很有趣。我会调查的。
@CheeseFlavored 查看attribute selectors。另请注意，它们在特异性图表上略低一些，并且会被选择 id 或 classes 的 CSS 覆盖。
你提到的这个 srcdoc 东西听起来像我需要的东西。我正在寻找这方面的更多信息。