将父窗口的CSS变量应用于iframe

Question

我有一个父窗口和一个iframe。

在父窗口的html中，我有一系列CSS变量：

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

但这些变量在iframe中不可用，即在iframe的头部，我有：

font-size: var(--lp-font-size-heading-md);

但是 iframe 找不到 --lp-font-size-heading-md 的定义。

如何在 iframe 中添加 CSS 变量？

- Ben Li

Answer 1

你可以在内部 iFrame 可用后，逐个复制外部 iFrame 中的变量到内部 iFrame。

    const iframeDocumentElement = document.getElementById('iframeId').contentWindow.document.documentElement;
    const fontLarge = document.documentElement.getPropertyValue('--lp-font-size-heading-lg');
    const fontMedium = document.documentElement.getPropertyValue('--lp-font-size-heading-md');
    iframeDocumentElement.style.setProperty('--lp-font-size-heading-lg', fontLarge);
    iframeDocumentElement.style.setProperty('--lp-font-size-heading-md', fontMedium);
    

- Lafaa