如何将父窗口定义的CSS变量应用到iframe中

CSS变量的作用域仅限于当前文档的DOM树，iframe是独立的文档上下文，父页面:root上定义的变量默认不会传递到iframe内部，所以iframe里找不到对应的变量定义，可以按你的场景选择以下方案解决：

方案1：同域场景用JS自动同步变量 #

如果父页面和iframe满足同域要求（协议、域名、端口三者完全一致），可以直接在父页面写JS同步变量，变量动态更新时也可以实时同步：

// 父页面执行代码，需要等待iframe加载完成后触发
const targetIframe = document.querySelector('iframe');
targetIframe.addEventListener('load', () => {
  // 获取父页面根节点所有CSS变量
  const parentRootStyle = getComputedStyle(document.documentElement);
  // 筛选你需要同步的lp前缀变量，避免同步无关变量
  const lpCssVars = Array.from(parentRootStyle).filter(key => key.startsWith('--lp-'));
  
  // 写入到iframe的根节点
  const iframeRoot = targetIframe.contentDocument.documentElement;
  lpCssVars.forEach(varKey => {
    const varValue = parentRootStyle.getPropertyValue(varKey).trim();
    iframeRoot.style.setProperty(varKey, varValue);
  });
});

如果需要同步父页面动态更新的变量，可以追加MutationObserver监听父页面根节点的style属性变化，实时同步到iframe即可。

方案2：直接注入变量定义到iframe #

如果iframe内容完全可控，直接在iframe的样式中补充变量定义是最稳定的方案，不需要依赖JS：
在iframe的<head>的样式标签中添加：

:root {
  --lp-font-size-heading-lg: 2.5rem;
  --lp-font-size-heading-md: 2rem;
  --lp-font-size-heading-sm: 1.5rem;
}

如果iframe是动态生成的，拼接HTML内容时把上述样式嵌入到<style>标签中带入iframe即可。

方案3：公共CSS文件统一引入 #

把变量定义单独抽为公共CSS文件（比如命名为lp-vars.css），父页面和iframe分别引入该文件即可实现变量统一：

<!-- 父页面和iframe的head中都添加这段引入 -->
<link rel="stylesheet" href="lp-vars.css">

该方案维护成本最低，修改变量时只需要更新公共CSS文件即可，跨域场景只要CSS资源允许跨域访问就可以正常使用。

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