如何通过JavaScript从字符串写入iframe的HTML内容？

要把字符串内容写入iframe，你可以通过操作iframe的内部文档对象来实现，具体步骤如下：

1. 修正字符串（可选但推荐） #

你当前的模板字符串里多了不必要的反斜杠，模板字符串本身支持直接书写HTML标签，无需转义<和>，修正后的字符串如下：

var myString = `
<html>
    <head>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>
`;

2. 核心实现代码 #

通过获取iframe的文档对象，调用open()、write()、close()方法完成内容写入：

// 获取页面中的iframe元素
const iframe = document.getElementById('frame');
// 获取iframe内部的文档对象（兼容不同浏览器写法）
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

// 打开文档流、写入内容、关闭文档流触发渲染
iframeDoc.open();
iframeDoc.write(myString);
iframeDoc.close();

关键说明 #

• 必须调用open()初始化文档写入流程，否则内容可能无法正常渲染
• close()方法会结束写入，触发文档的加载完成事件，确保内容显示出来
• 这种写法仅适合同域场景（这里是直接生成内容写入，不存在跨域问题）

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