如何用javascript操作iframe_如何与父页面通信？-js教程-PHP中文网

如何用javascript操作iframe_如何与父页面通信？

夢幻星辰

发布： 2025-12-15 21:33:07

原创

869人浏览过

JavaScript操作iframe需先获取DOM引用，同源时用contentWindow/contentDocument直接操作，跨域时必须用postMessage通信，并校验origin确保安全。

如何用javascript操作iframe_如何与父页面通信？

JavaScript 操作 iframe 的核心在于获取 iframe 的 DOM 引用，并在满足同源策略的前提下访问其内容或触发通信。跨域时不能直接操作 document，需改用 postMessage 进行安全通信。

获取 iframe 的 DOM 引用

通过 document.getElementById 或 querySelector 获取 iframe 元素后，可用 .contentWindow 或 .contentDocument 访问内部对象：

iframe.contentWindow：指向 iframe 内的 window 对象，可调用其方法（如 alert）、监听事件、访问 location 等
iframe.contentDocument：等价于 iframe.contentWindow.document，用于读写内部 DOM（仅同源）
注意：iframe 必须已加载完成（监听 load 事件），否则 contentDocument 可能为 null

同源 iframe 的 DOM 操作示例

假设 iframe 与父页同域（如都在 https://example.com）：

const iframe = document.getElementById('myIframe');
iframe.addEventListener('load', () => {
  const innerDoc = iframe.contentDocument;
  const h1 = innerDoc.querySelector('h1');
  h1.textContent = '标题已被父页修改';
});

登录后复制

也可执行脚本：iframe.contentWindow.eval('console.log("hello from parent")')（不推荐，有安全风险）

立即学习“Java免费学习笔记（深入）”；

跨域 iframe 通信：postMessage

父页向子页发消息：

易优cms汽车车辆租赁源码1.7.2

由于疫情等原因大家都开始习惯了通过互联网上租车服务的信息多方面，且获取方式简便，不管是婚庆用车、旅游租车、还是短租等租车业务。越来越多租车企业都开始主动把租车业务推向给潜在需求客户，所以如何设计一个租车网站，以便在同行中脱颖而出就重要了，易优cms针对租车行业市场需求、目标客户、盈利模式等，进行策划、设计、制作，建设一个符合用户与搜索引擎需求的租车网站源码。网站首页

查看详情

iframe.contentWindow.postMessage('Hello from parent', 'https://other-domain.com');

登录后复制

子页监听并响应：

// 在 iframe 内的 JS 中
window.addEventListener('message', (e) => {
  if (e.origin !== 'https://parent-domain.com') return;
  console.log('收到：', e.data);
  e.source.postMessage('已收到', e.origin); // 回复父页
});

登录后复制

父页也需监听 message 事件接收子页回复，且务必校验 e.origin 防止 XSS。