如何用JavaScript修改嵌套iframe中的iframe的src属性？

这个问题的核心绕不开浏览器的同源策略——先直接给结论：绝大多数情况下（尤其是你举的tomtopchina.blogspot.ro这个例子），是没法直接实现的。下面分情况给你拆解：

1. 为什么你的例子几乎不可能实现？ #

浏览器的同源策略是安全基石，只有当两个页面的协议、域名、端口完全一致时，才允许互相访问DOM或JavaScript对象。

你提到的三层结构：tomtopchina.blogspot.ro → mypayingcryptoads iframe → “what is my referer”子iframe，这三个页面几乎肯定属于不同的域名。这种情况下：

• 你在tomtopchina页面里的JS代码，连外层的mypayingcryptoads iframe的contentWindow或contentDocument都访问不了——浏览器会直接抛出跨域错误，更别说深入到里面的子iframe修改src了。

2. 仅当所有页面同源时可行（自己的域名场景） #

如果所有嵌套的iframe都和父页面同源（比如都是你自己搭建的域名下的页面），那可以通过层层遍历的方式修改src，代码示例如下：

// 1. 获取外层的mypayingcryptoads iframe
const outerIframe = document.querySelector('iframe[name="mypayingcryptoads"]');
if (outerIframe) {
  // 2. 必须等待外层iframe加载完成再操作，否则DOM未就绪
  outerIframe.onload = () => {
    // 3. 在外层iframe的文档中找到目标子iframe
    const innerIframe = outerIframe.contentDocument.querySelector('iframe[src*="what-is-my-referer"]');
    if (innerIframe) {
      // 4. 修改子iframe的src属性
      innerIframe.src = "https://your-target-url.com";
    }
  };
}

3. 跨域场景下的替代方案（需要对方配合） #

如果不同源，但你有权修改mypayingcryptoads页面的代码，可以用postMessage实现跨域通信来间接修改：

• 在tomtopchina页面发送消息：

const outerIframe = document.querySelector('iframe[name="mypayingcryptoads"]');
if (outerIframe) {
  // 发送消息给外层iframe，带上要修改的src
  outerIframe.contentWindow.postMessage(
    { action: "updateInnerSrc", newSrc: "https://your-target-url.com" },
    "*" // 最好指定具体域名，比如"https://mypayingcryptoads.com"，更安全
  );
}

• 在mypayingcryptoads页面中监听消息并执行修改：

window.addEventListener("message", (event) => {
  // 一定要验证消息来源，防止恶意请求
  if (event.origin === "https://tomtopchina.blogspot.ro") {
    if (event.data.action === "updateInnerSrc") {
      const innerIframe = document.querySelector('iframe[src*="what-is-my-referer"]');
      if (innerIframe) innerIframe.src = event.data.newSrc;
    }
  }
});

但这个方案的前提是你能控制mypayingcryptoads页面的代码，否则完全无法实施。

内容的提问来源于stack exchange，提问作者Antony Drew