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
1 Answers
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.
Related