更改 Iframe 中的 css 变量

Gee*_*hat 3 javascript css sass angular

我遇到了以下问题。我正在使用 Angular 加载 Iframe。将 Angular 应用程序视为 A,将 Iframe 视为 B。我正在 A 中加载 B。我使用 css 变量在 B 上设置颜色。在 A 上,我添加了一个颜色选择器。我想在 B 的主体中设置 A 的颜色选择器上选择的颜色。如何修改 Iframe 中 B 的主体颜色?作为参考,请考虑 WordPress 的自定义页面。我想做那样的事情

nAv*_*viD 6

您没有提供任何代码,所以我用纯 html 和 javascript 回答。

框架B:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        :root{
                --the-color:red;
        }
    </style>
</head>
<body>
<div style="color:var(--the-color)">
        BBBB
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

你的 javascript 在框架 A(父级)中:

    document.getElementById('fr1').contentWindow
   .document.documentElement.style.setProperty('--the-color','blue')
Run Code Online (Sandbox Code Playgroud)

这会将颜色从红色变为蓝色。