What is the method for an iframe to retrieve the background color of its parent?

Question

What is the method for an iframe to retrieve the background color of its parent?

Currently, I am facing an issue with a Pardot (Salesforce) form that is displayed within an iframe. The problem arises when the form's transparent background clashes with the parent page's background color or photo, making it difficult to read the text on the form labels. For example, if the text for "First Name" is dark on a dark background, it becomes illegible.

To address this issue, my objective is to dynamically set a body class within the iframe based on the background color of the parent element where the frame is located. This will allow the iframe to determine whether the background is light or dark and adjust the text color accordingly.

In the provided code snippet, the iframe should be able to detect whether the div.framed-lead-form has a light or dark background. While there are JavaScript plugins available to extract color information from elements (such as this one with an intriguing license: https://gist.github.com/larryfox/1636338), I haven't come across any solution that works seamlessly across iframes.

<div class="framed-lead-form">
    <iframe src="//go.pardot.com/id" allowtransparency="true"></iframe>
</div>

javascript html css iframe transparency

Answer 1

Answer №1

Created a demonstration with the main document and an iframe.
The main document sends a theme using window.postMessage
The iframe listens for the message and changes the background color based on the theme.

Main document: https://jsfiddle.net/kristapsv/L1fd64b3/33/

(function($){

$.fn.lightOrDark = function(){
var r,b,g,hsp
  , a = this.css('background-color');

if (a.match(/^rgb/)) {
  a = a.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
  r = a[1];
  b = a[2];
  g = a[3];
} else {
  a = +("0x" + a.slice(1).replace( // thanks to jed : http://gist.github.com/983661
      a.length < 5 && /./g, '$&$&'
    )
  );
  r = a >> 16;
  b = a >> 8 & 255;
  g = a & 255;
}
hsp = Math.sqrt( // HSP equation from http://alienryderflex.com/hsp.html
  0.299 * (r * r) +
  0.587 * (g * g) +
  0.114 * (b * b)
);
if (hsp>127.5) {
  return 'light';
} else {
  return 'dark';
}
}

})(jQuery);

var iframe = document.getElementById('my-iframe');

// Determine light/dark theme based on container or other color
var theme =  $('.container').lightOrDark();

var jsonMessage = {
  'action' : 'set-theme',
  'theme' : theme
};

iframe.contentWindow.postMessage(JSON.stringify(jsonMessage), '*');

Iframe: https://jsfiddle.net/kristapsv/zLL9db1c/11/

var messageHandler = function (event) {
  var message;

  try {
    message = JSON.parse(event.data);
  } catch (e) {
    return;
  }

  switch (message.action) {
    case 'set-theme':
        setTheme(message.theme);
        break;
  }
};

var setTheme = function(theme) {
  $('.text-container')
    .removeClass('dark')
    .removeClass('light')
    .addClass(theme);
}

window.addEventListener('message', messageHandler, false);

Answer 2

Created a demonstration with the main document and an iframe.
The main document sends a theme using window.postMessage
The iframe listens for the message and changes the background color based on the theme.

Main document: https://jsfiddle.net/kristapsv/L1fd64b3/33/

(function($){

$.fn.lightOrDark = function(){
var r,b,g,hsp
  , a = this.css('background-color');

if (a.match(/^rgb/)) {
  a = a.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
  r = a[1];
  b = a[2];
  g = a[3];
} else {
  a = +("0x" + a.slice(1).replace( // thanks to jed : http://gist.github.com/983661
      a.length < 5 && /./g, '$&$&'
    )
  );
  r = a >> 16;
  b = a >> 8 & 255;
  g = a & 255;
}
hsp = Math.sqrt( // HSP equation from http://alienryderflex.com/hsp.html
  0.299 * (r * r) +
  0.587 * (g * g) +
  0.114 * (b * b)
);
if (hsp>127.5) {
  return 'light';
} else {
  return 'dark';
}
}

})(jQuery);

var iframe = document.getElementById('my-iframe');

// Determine light/dark theme based on container or other color
var theme =  $('.container').lightOrDark();

var jsonMessage = {
  'action' : 'set-theme',
  'theme' : theme
};

iframe.contentWindow.postMessage(JSON.stringify(jsonMessage), '*');

Iframe: https://jsfiddle.net/kristapsv/zLL9db1c/11/

var messageHandler = function (event) {
  var message;

  try {
    message = JSON.parse(event.data);
  } catch (e) {
    return;
  }

  switch (message.action) {
    case 'set-theme':
        setTheme(message.theme);
        break;
  }
};

var setTheme = function(theme) {
  $('.text-container')
    .removeClass('dark')
    .removeClass('light')
    .addClass(theme);
}

window.addEventListener('message', messageHandler, false);

Answer 3

Answer №2

As recommended by @charlietfl, one approach to consider is using the postMessage API to send a specific message to the iframed HTML document and then utilizing JavaScript to modify the background accordingly.

Answer 4

As recommended by @charlietfl, one approach to consider is using the postMessage API to send a specific message to the iframed HTML document and then utilizing JavaScript to modify the background accordingly.

Answer 5

Answer №3

If you want to customize the background color of an iframe, you can easily do so by passing it as a parameter in the src attribute.

<div class="custom-iframe">
    <iframe src="//example.com?id=123&color=FFA500"></iframe>
</div>

To dynamically set the background color using JavaScript, you can retrieve the color value from the parent document and update the src attribute accordingly on DOM load. Here's a jQuery example:

$(function() {
    var customColor = getCustomColor();
    $('#my-frame').attr('src', '//example.com?id=123&color=' + customColor);
});

Answer 6

If you want to customize the background color of an iframe, you can easily do so by passing it as a parameter in the src attribute.

<div class="custom-iframe">
    <iframe src="//example.com?id=123&color=FFA500"></iframe>
</div>

To dynamically set the background color using JavaScript, you can retrieve the color value from the parent document and update the src attribute accordingly on DOM load. Here's a jQuery example:

$(function() {
    var customColor = getCustomColor();
    $('#my-frame').attr('src', '//example.com?id=123&color=' + customColor);
});

Answer 7

Answer №4

I have not personally verified this, but it is expected to retrieve the background color from within the iframe.

window.parent.document.getElementById('framed-lead-form').style.backgroundColor

Answer 8

I have not personally verified this, but it is expected to retrieve the background color from within the iframe.

window.parent.document.getElementById('framed-lead-form').style.backgroundColor

Answer 9

Answer №5

Hopefully this will be effective

window.top.document.getElementsByTagName("body")[0].style.backgroundColor;

Answer 10

Hopefully this will be effective

window.top.document.getElementsByTagName("body")[0].style.backgroundColor;

What is the method for an iframe to retrieve the background color of its parent?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Build interactive web pages using Python scripts

The justify-content property aligns single-line text horizontally, but its alignment may not be consistent when the text expands over

What type does a React stateless functional component Flow return?

Leverage AJAX on the client-side for optimal performance while utilizing node.js

What could be causing the 304 error when using $http.get?

Using Middleware to Access LocaleStorage in Universal Mode

Text that disappears upon clicking on show/hide按钮

Divide a nested list into individual lists

Troubleshooting issues with Firebase integration in a Node.js environment

Is there a way to prevent the Pace js plugin from running on page load, but still have it execute during Ajax requests only?

Center an image vertically in an AdminLte content-wrapper division

Selecting the first li element using JQuery selectors

Selenium is having trouble finding the iframe element

Performing an Ajax MySQL query utilizing the text from a link as a reference, across a page

What is the process for integrating require.js and jquery.min.js?

Using the highcharts-ng library in combination with ng-repeat was successful in creating multiple charts. However, in order to display different data for each chart, the

My goal is to exclusively create illustrations of items within a camera's view

Only scroll the div if it is not within the visible window

Problem with accessing state in React 16

Cannot access console.log within Angular UI Router .config()=> {}