js如何操作iframe

二、同源场景（主页面与 iframe 域名相同）

1. 访问 iframe 内部的 DOM

// 通过 ID 获取
const iframe = document.getElementById('myIframe');
// 获取 iframe 的 document 对象
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

// 操作 iframe 内的元素
const iframeBody = iframeDoc.body;
iframeBody.innerHTML = '<h1>Hello from parent!</h1>';

// 获取 iframe 内的特定元素
const iframeElement = iframeDoc.getElementById('some-element');
iframeElement.style.color = 'red';

2. 访问 iframe 内的 JavaScript 对象

// 获取 iframe 窗口对象
const iframeWindow = iframe.contentWindow;

// 调用 iframe 内定义的函数
iframeWindow.sayHello(); // 假设 iframe 内有 function sayHello() {}

// 访问 iframe 内的变量
console.log(iframeWindow.myVariable); // 假设 iframe 内有 var myVariable = 123;

3. 在 iframe 内操作主页面

// 在 iframe 内部的脚本中
window.parent.document.getElementById('parent-element').style.display = 'none';

三、跨域场景（主页面与 iframe 域名不同）

1. 使用 postMessage 通信（推荐）

主页面向 iframe 发送消息

// 主页面代码
const iframe = document.getElementById('myIframe');

// 发送消息到 iframe（第二个参数为目标域名，* 表示任意域名，但不安全）
iframe.contentWindow.postMessage('Hello from parent!', 'https://child-domain.com');

iframe 接收消息并响应

// iframe 内部代码
window.addEventListener('message', (event) => {
  // 验证发送方域名，防止恶意攻击
  if (event.origin !== 'https://parent-domain.com') return;

  console.log('Received from parent:', event.data);
  
  // 回复消息
  event.source.postMessage('Message received!', event.origin);
});

主页面接收 iframe 的响应

// 主页面监听 iframe 回复
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://child-domain.com') return;
  console.log('Received from iframe:', event.data);
});

2. 跨域限制说明

• 禁止直接访问 DOM：跨域时无法通过 contentDocument 直接操作 iframe 内的元素。
• 禁止直接调用方法：无法直接调用 iframe 内的 JavaScript 函数。
• 解决方案：只能通过 postMessage 进行安全通信。

四、动态控制 iframe 属性

1. 修改 src 属性（导航到新页面）

iframe.src = 'https://new-url.com'; // 切换 iframe 加载的页面