JavaScript操作iframe及通信方法解析

学习文章要努力，但是不要急！今天的这篇文章《JavaScript操作iframe及通信方法详解》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

iframe.contentWindow读取失败主因是跨域或DOM未就绪；同源下需等待onload事件，跨域则必须用postMessage并严格校验origin和data类型。

iframe.contentWindow 读取失败的常见原因

直接访问 iframe.contentWindow 报 TypeError: Cannot read property 'document' of null，大概率是跨域或 DOM 未就绪。同源 iframe 才能安全访问其 window 对象；跨域时该属性存在但内部所有属性（如 document、location）均被浏览器屏蔽，读取会抛出异常。

即使同源，也必须等 iframe 加载完成。不能在 DOMContentLoaded 触发时就操作——父页面 DOM 就绪 ≠ iframe 内容就绪。

• 用 iframe.onload 事件监听加载完成（推荐），而非依赖父页面生命周期
• 避免在 iframe 标签未插入 DOM 前就访问 contentWindow
• 动态创建的 iframe，需先 appendChild 再设置 src，否则部分浏览器不触发 load

同源 iframe 内部 DOM 操作示例

确认同源且已加载后，可像操作普通 window 一样读写 iframe 内容：

const iframe = document.getElementById('myIframe');
iframe.onload = () => {
  const win = iframe.contentWindow;
  const doc = win.document;

  // 修改 iframe 内标题
  doc.title = 'New Title';

  // 插入一个 div
  const div = doc.createElement('div');
  div.textContent = 'Injected from parent';
  doc.body.appendChild(div);

  // 绑定 iframe 内按钮点击事件
  const btn = doc.querySelector('#submit-btn');
  if (btn) {
    btn.addEventListener('click', () => {
      console.log('Clicked inside iframe');
    });
  }
};

跨域 iframe 通信必须用 postMessage

跨域场景下，contentWindow 不可读取内容，但允许调用 postMessage 发送消息；iframe 内页面也需监听 message 事件并校验 event.origin，否则存在 XSS 风险。

• 父页向 iframe 发送： iframe.contentWindow.postMessage(data, targetOrigin)
• iframe 向父页发送： window.parent.postMessage(data, targetOrigin)
• targetOrigin 必须写具体协议+域名（如 'https://example.com'），不可用 '*'（除非完全信任所有来源）
• 接收方必须检查 event.origin 是否匹配预期，再处理 event.data

典型错误：只校验 event.source 而忽略 origin，导致恶意站点伪造消息。

iframe 中监听 message 的安全写法

iframe 内 JS 必须主动监听，并严格过滤来源：

window.addEventListener('message', (event) => {
  // 只接受来自可信父域的消息
  if (event.origin !== 'https://trusted-parent.com') return;

  // 验证数据结构（防止意外类型）
  if (typeof event.data !== 'object' || !event.data.type) return;

  switch (event.data.type) {
    case 'setTheme':
      document.body.className = event.data.theme;
      break;
    case 'notifyReady':
      // 向父页回传确认
      window.parent.postMessage({ type: 'readyAck' }, event.origin);
      break;
  }
});

注意：event.source 是发送方 window 对象，可用于直接回复（event.source.postMessage(...)），但 origin 校验不能省略——因为任何脚本都能构造 source，唯独无法伪造真实 origin。

实际项目里最容易漏掉的是 origin 校验和 data 类型防护，这两项缺失会让 postMessage 形同裸奔。

到这里，我们也就讲完了《JavaScript操作iframe及通信方法解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！