如何用纯JavaScript选择嵌套iframe中的input标签？跨域问题处理

我想通过纯JavaScript选择嵌套在iframe中的子iframe内的input标签，尝试了以下代码：

const iframe1 = document.querySelector("#iframe1")
var iframeDocument1 = iframe1.contentDocument || iframe1.contentWindow.document;

const iframe2 = iframeDocument1.querySelector("#iframe2")
var iframeDocument2 = iframe2.contentDocument || iframe2.contentWindow.document;

const inputField = iframeDocument2.querySelect("#name")

但获取iframeDocument2时出现跨域错误，错误信息如下：

Error in event handler: Error: Failed to read a named property 'document' from 'Window': 
Blocked a frame with origin "https://another-domain.com" from accessing a cross-origin frame.

请问这种情况下该如何实现目标？

• 同源策略限制说明：浏览器的同源策略禁止不同域名、协议或端口的页面互相访问DOM，这是核心安全机制。如果子iframe（iframe2）和主页面不同源，直接通过主页面JS访问其DOM是无法实现的，必须通过合法途径绕过或配合。

• 方案1：子iframe页面主动配合（最可靠）
  若能控制子iframe的代码，可让其主动向父页面传递数据或暴露操作接口：

  1. 在iframe2页面内添加代码，主动传递信息或暴露方法：

     // iframe2页面内的代码
     const input = document.querySelector("#name");
     // 向顶层页面发送input数据
     window.top.postMessage({ type: 'inputData', value: input.value, id: input.id }, 'https://your-main-domain.com');
     // 或暴露供父页面调用的方法
     window.top.getIframe2Input = () => input;
     

  2. 在主页面中监听消息或调用方法：

     // 主页面监听消息
     window.addEventListener('message', (event) => {
       // 验证来源域名，避免恶意消息
       if (event.origin === 'https://iframe2-domain.com' && event.data.type === 'inputData') {
         console.log('获取到input值:', event.data.value);
       }
     });
     
     // 或调用iframe暴露的方法（需确保iframe加载完成）
     iframe2.onload = () => {
       const inputField = iframe2.contentWindow.getIframe2Input();
       // 对input进行操作
     };
     

  注意：使用postMessage时务必指定具体目标域名，不要用*，降低安全风险。

• 方案2：确保所有页面同源
  若iframe1、iframe2的域名、协议、端口都和主页面完全一致，跨域限制会自动解除，只需修正你代码中的拼写错误即可正常运行：

  const iframe1 = document.querySelector("#iframe1")
  var iframeDocument1 = iframe1.contentDocument || iframe1.contentWindow.document;
  
  const iframe2 = iframeDocument1.querySelector("#iframe2")
  var iframeDocument2 = iframe2.contentDocument || iframe2.contentWindow.document;
  
  // 修正拼写错误：querySelect → querySelector
  const inputField = iframeDocument2.querySelector("#name")
  

• 方案3：浏览器扩展（仅个人使用场景）
  如果是自己使用的场景，可开发浏览器扩展，扩展拥有跨域访问DOM的权限。在扩展的manifest.json中配置对应域名权限后，即可直接用你原来的代码访问跨域iframe的DOM。

内容的提问来源于stack exchange，提问作者Glisten STAR