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

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

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

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

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

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

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

向 iframe 写入 HTML 内容（同源）

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

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

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

示例：

标签： javascript java html js 浏览器 端口 win 跨域 常见问题