To use the postMessage API to push CSS styles from the parent window to an iframe, you need to establish communication between the parent window and the iframe. The postMessage method allows secure cross-origin communication between windows or iframes. Here's how you can achieve this:

In the parent window (hosting page), you can send the CSS styles to the iframe:

<!-- Parent window HTML --> <!DOCTYPE html> <html> <head> <title>Parent Window</title> </head> <body> <button onclick="sendStylesToIframe()">Send Styles to Iframe</button> <iframe id="myIframe" src="path_to_your_iframe_page.html"></iframe> <script> function sendStylesToIframe() { var iframe = document.getElementById('myIframe'); var cssStyles = 'body { background-color: lightblue; color: white; }'; // Send CSS styles to the iframe iframe.contentWindow.postMessage(cssStyles, '*'); } </script> </body> </html>

In the iframe, you need to listen for the message event and apply the received CSS styles:

<!-- Iframe HTML --> <!DOCTYPE html> <html> <head> <title>Iframe</title> </head> <body> <p>This is the iframe content.</p> <script> // Listen for the 'message' event from the parent window window.addEventListener('message', function(event) { // Ensure the message is from a trusted source (optional) // In production, you should check the 'event.origin' property // to verify that the message is coming from an expected source. // For this example, we'll accept any origin ('*'). // Apply the received CSS styles to the iframe's document var styleElement = document.createElement('style'); styleElement.textContent =; document.head.appendChild(styleElement); }); </script> </body> </html>

Here's how it works:

  1. In the parent window, we have a button that triggers the sendStylesToIframe() function.
  2. Inside the sendStylesToIframe() function, we get a reference to the iframe using document.getElementById('myIframe').
  3. We create a CSS style string (cssStyles) that contains the styles we want to push to the iframe. This string can contain any valid CSS rules.
  4. We use the postMessage() method to send the cssStyles to the iframe's contentWindow. The second argument to postMessage() specifies the target origin. In this case, we use '*', which means we accept any origin. In production, you should set this to a specific origin for security reasons.
  5. In the iframe, we add an event listener for the message event using window.addEventListener('message', ...).
  6. When the message event is received, we verify the origin (optional, but recommended for security). For this example, we accept any origin (*).
  7. Finally, we create a new <style> element and set its textContent to the received CSS styles. We then append the style element to the iframe's <head> to apply the styles.

By using postMessage, you can securely communicate between the parent window and the iframe, enabling you to dynamically update the iframe's styles based on user interactions in the parent window. Remember to handle any security considerations in production applications, such as verifying the message origin and content before applying styles to the iframe.

Have questions or queries?
Get in Touch