同域多iframe在单HTML页面重复渲染问题咨询

嘿，这个问题的核心原因其实一眼就能看出来——你给两个<iframe>标签设置了完全相同的id="app"！

为什么会出现覆盖/重复渲染？ #

HTML规范明确要求，id属性在整个HTML文档中必须是唯一的，它是用来标记单个元素的专属标识符。当浏览器遇到重复的id时，解析逻辑会出现混乱：浏览器可能只会识别到第一个（或者最后一个）带有该id的元素，然后错误地将同一个资源加载到两个iframe中，最终导致你看到两个iframe渲染同一个页面的情况。

你提到单独使用每个iframe都能正常工作，这也刚好印证了这个问题——单独使用时id是唯一的，浏览器可以正确识别并加载对应的资源，不会出现冲突。

解决方案：给iframe设置唯一ID #

只需要把两个iframe的id改成不同的唯一值即可，比如这样修改你的代码：

<!DOCTYPE html>
<html>
<head>
    <title>testing</title>
</head>
<body>
    <h1>TEst 1 </h1>
    <iframe src="http://example.com?id=123" id="app-1" width="100%" height="388" frameborder="0" scrolling="no"></iframe>
    <h1>TEst 2 </h1>
    <iframe src="http://example.com?id=456" id="app-2" width="100%" height="388" frameborder="0" scrolling="no"></iframe>
</body>
</html>

修改后，两个iframe拥有了各自唯一的id，浏览器就能正确区分它们，分别加载对应的src资源了。

内容的提问来源于stack exchange，提问作者amitava mozumder