Javascript如何操作iframe_如何进行跨域通信？

狼影

发布： 2025-12-19 20:50:02

原创

545人浏览过

JavaScript操作iframe需先获取引用，同源时通过contentDocument或contentWindow访问DOM和脚本，须等待load事件；跨域时只能用postMessage通信，并校验origin。

javascript如何操作iframe_如何进行跨域通信？

JavaScript 操作 iframe 的核心在于正确获取 iframe 的引用，并在同源前提下访问其 DOM 或执行脚本；跨域时不能直接访问，必须通过 postMessage 进行安全通信。

获取 iframe 元素并访问同源内容

如果 iframe 与父页面同源（协议、域名、端口完全一致），可直接操作其内部文档：

用 document.getElementById('myIframe') 或 querySelector 获取 iframe 元素
通过 iframe.contentDocument 或 iframe.contentWindow.document 访问子页面 DOM
用 iframe.contentWindow 调用子页面的 JS 函数或变量（需已加载完成）

注意：务必等 iframe 加载完成再操作，推荐监听 load 事件：

iframe.addEventListener('load', () => { /* 安全访问 contentDocument */ });

向 iframe 写入 HTML 内容（同源）

适用于动态生成简单页面，不依赖外部资源：

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

先清空 iframe 的 src（设为 about:blank 防止跨域限制）
用 iframe.contentDocument.write(htmlStr) 写入内容
写完后调用 document.close() 关闭流，确保渲染

示例：

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

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

查看详情

iframe.src = 'about:blank';
const doc = iframe.contentDocument;
doc.open();
doc.write('

Hello

');
doc.close();

跨域 iframe 通信：必须用 postMessage

不同源时，浏览器会阻止直接访问 iframe 的任何属性或方法。唯一标准且安全的方式是 postMessage：

父页向子页发消息：iframe.contentWindow.postMessage(data, targetOrigin)
子页监听：window.addEventListener('message', handler)，检查 event.origin 和 event.source 验证来源
targetOrigin 必须写具体域名（如 'https://example.com'），不可用 '*'（除非完全信任）

子页回传消息也用 event.source.postMessage()，实现双向通信。