js如何控制iframe里第三方dom

如果iframe内嵌的是第三方网站，我们无法直接访问到其内部的DOM元素，因为同源策略的限制，但是可以通过一些技巧来实现操作第三方DOM元素的目的。

一种常用的技巧是使用iframe的postMessage()方法，通过在主页面和iframe页面之间传递消息的方式来实现通信。具体步骤如下：

1. 在iframe页面内部监听message事件，等待主页面发送消息。

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
  // 判断消息来源是否是主页面
  if (event.origin !== "https://example.com") return;

  // 获取主页面发送过来的消息
  var message = event.data;

  // 处理消息
  // ...
}

2. 在主页面中使用iframe的contentWindow.postMessage()方法发送消息。

var iframe = document.getElementById('myIframe');
var targetOrigin = 'https://example.com';

// 发送消息到iframe页面
iframe.contentWindow.postMessage('Hello', targetOrigin);

3. 在iframe页面内部处理主页面发送过来的消息，通过操作DOM元素来实现目标。

function receiveMessage(event) {
  // 判断消息来源是否是主页面
  if (event.origin !== "https://example.com") return;

  // 获取主页面发送过来的消息
  var message = event.data;

  // 处理消息，例如修改DOM元素
  var targetElement = document.getElementById('targetElement');
  targetElement.innerHTML = message;
}

需要注意的是，postMessage()方法中的targetOrigin参数用来指定消息的接收方，如果不设置将无法接收到消息。此外，为了确保安全，需要在接收消息时校验消息来源，避免受到恶意攻击。