Switch up the CSS variable within an embedded iframe

Question

Switch up the CSS variable within an embedded iframe

I'm in a predicament with a specific issue. I am currently utilizing Angular to incorporate an Iframe. Let's imagine the angular app as A and the Iframe as B. B is being loaded within A. Within B, I have utilized CSS variables to define colors. In A, there is a color picker available. My goal is to apply the selected color from A's color picker onto the body of B. How can I go about changing the body color of B located inside an Iframe? To provide some context, think of WordPress's customize page. I aim to achieve something similar.

javascript css angular sass

Answer 1

Answer №1

Since you have not provided any code, I am responding with a solution using pure HTML and JavaScript.

Here is the content for 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 update the color from red to blue.

Answer 2

Since you have not provided any code, I am responding with a solution using pure HTML and JavaScript.

Here is the content for 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 update the color from red to blue.

Switch up the CSS variable within an embedded iframe

Answer №1

Similar questions

Warning: Potential Infinite Loop when using Vue JS Category Filter

Redirecting JavaScript form to search engine

Displaying PHP output within a JavaScript expression

The "npm start" command encountered an issue: script "start" is

Can the swap operation be carried out using web3.js and a forked HardHat implementation?

Switching from AngularJS to vanilla JavaScript or integrating AngularJS and Flask on a single server

Guide on including the angular value (id) in conjunction with repeating data-target for executing a function

Use npm to include a new dependency from the current dependency structure

Having trouble replicating the progressive response from the server in node.js

activating a component by interacting with another component

The alteration of arrays within React.js

What is the best way to change the order of rows and columns in

Is it possible to retrieve only the attributes in an array?

The functionality of Flatbutton(Input handler) appears to be malfunctioning

Substitute phrases with hyperlinks using JavaScript (or Ruby)

Error message: Could not locate the class 'NunoMaduroCollisionAdaptersLaravelCollisionServiceProvider'

"Can you provide some guidance on transferring the selected row value to a button that is located outside the grid, including a parameter in v-data-table

In C#, how can the HTMLAgilityPack be utilized to extract a value from within a script tag?

Unable to receive Ajax POST requests in PHP

Customizing the colors of the Input field in the Material UI Text Field component with CSS styling can elevate the overall