如何修改HTML iframe标签的内容？附代码示例

要修改iframe内的内容，首先得满足同源策略：主页面和iframe加载的页面必须是同域（协议、域名、端口完全一致），这是浏览器的安全限制，跨域情况下无法直接操作iframe内的DOM。

看你给出的示例代码，存在几个问题，下面是修正后的实现方案：

修正后的代码示例 #

index.html #

<!DOCTYPE html>
<html>
<head></head>
<body>
    <iframe src="a.html" id="if"></iframe>

    <script>
        const iframe = document.getElementById("if");
        // 等待iframe加载完成后再操作内容
        iframe.onload = function() {
            // 获取iframe的文档对象，contentDocument是标准写法，兼容主流浏览器
            const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
            // 修改目标元素内容
            iframeDoc.getElementById("text").innerHTML = "修改后的文本";
        };
    </script>
</body>
</html>

a.html #

<!DOCTYPE html>
<html>
<head></head>
<body>
    <p id="text">初始文本</p>
</body>
</html>

关键要点说明 #

• 必须等待iframe加载完成：如果在iframe还没加载完就去获取内部元素，会因为元素未渲染而报错，所以要通过onload事件确保加载完成后再执行操作。
• 正确获取iframe文档对象：不能直接用iframe.document，标准写法是iframe.contentDocument，如果要兼容旧版IE，可以用iframe.contentWindow.document做降级处理。
• 同源策略限制：如果iframe加载的是其他域名的页面，浏览器会禁止主页面操作其DOM，这种情况下需要通过postMessage API进行跨域通信，让iframe自身修改内容。

内容的提问来源于stack exchange，提问作者Cycro the large planet