Change css variable in an Iframe

Question

I'm stuck with the following problem. I'm using Angular to load an Iframe. Consider the angular app as A and Iframe as B. I'm loading B in A. I have used css variables to set colors on B. On A, I have added a color picker. I want to set the color selected on A's color picker in B's body. How can I modify the B's body color that's in an Iframe? For reference, consider WordPress's customize page. I want to do something like that

related https://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site — Madhawa Priyashantha, Dec 12 '20 at 15:35
If the iframe is from an origin different than main page you can not access it for secustiry reasons — charlietfl, Dec 12 '20 at 15:36

score 5 · Accepted Answer · answered Dec 12 '20 at 16:44

You haven't provide any code so I answer with pure html and javascript.

the frame 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>

your javascript in frame A(parent):

    document.getElementById('fr1').contentWindow
   .document.documentElement.style.setProperty('--the-color','blue')

this will change the color from red to blue.

Change css variable in an Iframe

1 Answers1