如何在JS中将img标签正确插入iframe并显示图片？

你的问题核心是错误地把img直接挂载到了iframe元素本身，而iframe的内容必须放在它内部独立的文档结构（也就是contentDocument）里，才能被浏览器识别渲染。

修正后的代码 #

HTML部分（保持不变）

<html>
<body>
<div class="fruit">
<img id="apple_img" src="https://parade.com/.image/t_share/MTkwNTgxNDY1MzcxMTkxMTY0/different-types-of-apples-jpg.jpg" width="100" height="100">
</div>
</body>
</html>

JavaScript部分（修改关键步骤）

var ARiframe = document.createElement("iframe");
const imgInDom = document.getElementById("apple_img");

// 先把iframe插入主文档，确保它的内部文档已初始化
imgInDom.parentNode.insertBefore(ARiframe, imgInDom);

// 获取iframe内部的文档对象，将img移动到iframe的body中
const iframeDoc = ARiframe.contentDocument || ARiframe.contentWindow.document;
iframeDoc.body.appendChild(imgInDom);

关键说明 #

• 每个iframe都有独立的document环境，通过contentDocument（主流浏览器）或contentWindow.document（兼容旧IE）可获取该内部文档。
• 只有把img元素添加到iframe内部文档的<body>中，它才属于iframe的DOM范围，浏览器才会正常加载并显示图片。
• 必须先将iframe插入主文档，再操作它的内部文档，避免因内部文档未初始化导致操作失败。

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