如何访问嵌套于iframe内部id为embedIframe的iframe元素

• <iframe>标签内包裹的内容仅作为浏览器不支持iframe时的降级展示，正常加载逻辑下，iframe会渲染src指向的独立页面，标签内部写的DOM不会被插入到当前页面DOM树中。
• 每个iframe拥有独立的JavaScript执行上下文和独立的DOM树，你要找的embedIframe元素属于外层iframe加载的子文档，不在顶层页面的DOM树内，直接在顶层document上调用getElementById自然返回null。
• 你在元素面板点击选中该元素后控制台能查询成功，是因为Chrome DevTools会自动将控制台的执行上下文切换到选中元素所属的文档环境，此时查询操作实际是在对应iframe的document对象上执行，因此能拿到结果。

前提说明 #

如果目标iframe和当前页面不同源（域名、端口、协议任意一项不一致），受浏览器同源策略限制，你无法直接通过JS访问其内部DOM，这种场景需要对方页面配合配置跨域权限，或使用postMessage实现跨文档通信，不能直接操作内部元素。

具体实现（同源场景下） #

需要逐层获取iframe的文档对象，在对应文档内查询目标元素，且必须等iframe加载完成后再执行查询。
React框架下可参考如下实现：

import { useEffect, useRef } from 'react'

export default function IframePage() {
  const outerIframeRef = useRef(null)

  useEffect(() => {
    const outerIframe = outerIframeRef.current
    if (!outerIframe) return

    const queryTargetIframe = () => {
      try {
        // 获取外层iframe的文档对象
        const outerIframeDoc = outerIframe.contentDocument || outerIframe.contentWindow.document
        // 在外层iframe的文档内查询目标元素
        const targetIframe = outerIframeDoc.getElementById('embedIframe')
        console.log('目标iframe元素：', targetIframe)
        // 后续操作targetIframe即可
      } catch (err) {
        console.error('访问iframe内部失败，通常为跨域限制导致：', err)
      }
    }

    // 已加载完成直接查询，否则监听load事件
    if (outerIframe.contentDocument?.readyState === 'complete') {
      queryTargetIframe()
    } else {
      outerIframe.addEventListener('load', queryTargetIframe)
    }

    return () => {
      outerIframe.removeEventListener('load', queryTargetIframe)
    }
  }, [])

  return <iframe ref={outerIframeRef} src="外层iframe实际访问地址" />
}

开发者工具控制台快速验证方法 #

不需要手动点击元素面板选中节点，直接点击控制台顶部的执行上下文下拉框（默认显示top），选中外层iframe对应的上下文后，再执行document.getElementById("embedIframe")即可正常返回元素。

内容的提问来源于stack exchange，提问作者심프로