如何在嵌套iframe内检测根HTML元素是否包含指定类？

如果你的iframe和父页面不同源（域名、协议、端口任一不一致），浏览器的同源策略会彻底禁止你通过JS访问父页面的DOM，包括检测:root元素的dark类——这是浏览器的核心安全规则，没有绕过的可能。

• 利用父页面的CSS变量（如果有定义）
  若父页面的暗模式是通过CSS变量实现的（比如:root.dark下设置了--text-primary: white），多数浏览器允许iframe继承父页面的根CSS变量。你可以在iframe的样式里直接复用：

  /* iframe内的自定义CSS */
  .your-paragraph {
    color: gray; /* 默认 fallback */
    color: var(--text-primary, gray); /* 父页面有对应变量则自动适配，否则用gray */
  }
  

  要是父页面没定义这类变量，这个方法就用不了。

• 请求父页面配合发送模式切换消息
  如果你能联系到目标网站的开发者，让他们在切换暗模式时给iframe发送消息：
  父页面需要加的代码（对方配合）：

  // 假设这是他们切换暗模式的函数
  function switchDarkMode(isDark) {
    document.documentElement.classList.toggle('dark', isDark);
    // 给所有iframe发送模式变更消息
    document.querySelectorAll('iframe').forEach(iframe => {
      iframe.contentWindow.postMessage({ type: 'DARK_MODE', status: isDark }, '*');
    });
  }
  

  你的iframe内代码：

  window.addEventListener('message', (e) => {
    // 建议校验来源域名，防止恶意消息
    if (e.origin !== '目标网站的域名') return;
    if (e.data.type === 'DARK_MODE') {
      document.querySelector('.your-paragraph').classList.toggle('white-text', e.data.status);
    }
  });
  

  同时在iframe的CSS里加：

  .white-text { color: white; }
  

  这个方案需要对方配合，否则无法实施。

• 跟随系统暗模式的媒体查询
  如果父页面的dark类是跟随系统的prefers-color-scheme设置切换的，你可以直接在iframe内用媒体查询适配：

  .your-paragraph {
    color: gray;
  }
  @media (prefers-color-scheme: dark) {
    .your-paragraph {
      color: white;
    }
  }
  

  但如果父页面是手动切换暗模式（和系统设置无关），这个方法就不生效。

不同源场景下，直接检测父页面DOM的路径走不通，只能根据父页面的暗模式实现方式，选择上述适配方案。

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