如何通过iframe使用parent.document.write()修改父级页面HTML？

方法1：写入完整HTML结构 #

调用parent.document.open()后，浏览器会重置父文档为空白状态，仅写入纯文本可能无法触发自动HTML补全机制，补充完整的页面骨架即可正常渲染：

parent.document.open();
parent.document.write('<html><head></head><body>whatever</body></html>');
parent.document.close();

方法2：直接操作DOM（推荐） #

放弃使用document.open/write/close这类旧API，直接修改父页面的DOM节点，兼容性和稳定性更好：

// 替换整个页面内容
parent.document.documentElement.innerHTML = '<html><body>whatever</body></html>';

// 或仅替换body内容（更轻量）
parent.document.body.innerHTML = '';
const textNode = parent.document.createTextNode('whatever');
parent.document.body.appendChild(textNode);

方法3：确保执行时机正确 #

如果iframe脚本在父页面未完全加载时执行，可能导致DOM操作异常，可等待父页面加载完成后再执行：

if (parent.document.readyState === 'complete') {
  parent.document.body.innerHTML = 'whatever';
} else {
  parent.addEventListener('load', () => {
    parent.document.body.innerHTML = 'whatever';
  });
}

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