I have a Pardot (Salesforce) form displayed in an iframe and control over the markup and scripts on both domains. The form has a transparent background and sometimes the parent page's background photo or color does not have enough contrast with the text color of form labels. You can't read First Name when it's dark text on a dark background.

My goal is to set a body class inside the iframe that is .light-bg or .dark-bg based on a color sampling of the parent element containing the frame.

In this code the iframe would be able to determine if div.framed-lead-form has a light or dark background. There are JS plugins to get an element's color saturation (this one has an interesting license ) but I can't find anything that works through iframes.

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

I have a Pardot (Salesforce) form displayed in an iframe and control over the markup and scripts on both domains. The form has a transparent background and sometimes the parent page's background photo or color does not have enough contrast with the text color of form labels. You can't read First Name when it's dark text on a dark background.

My goal is to set a body class inside the iframe that is .light-bg or .dark-bg based on a color sampling of the parent element containing the frame.

In this code the iframe would be able to determine if div.framed-lead-form has a light or dark background. There are JS plugins to get an element's color saturation (this one has an interesting license https://gist.github./larryfox/1636338) but I can't find anything that works through iframes.

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

• javascript
• html
• css
• iframe
• transparency

• 1 can use postMessage API to municate between the 2 windows, or set document.domain inside iframe to match outer window and can access iframe with script that way – charlietfl Commented Apr 27, 2015 at 20:00

5 Answers 5

Made a fiddle with main document and iframe.
From main document sends theme with window post message
From iframe listens to message and sets background theme color

Main document: https://jsfiddle/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./983661
      a.length < 5 && /./g, '$&$&'
    )
  );
  r = a >> 16;
  b = a >> 8 & 255;
  g = a & 255;
}
hsp = Math.sqrt( // HSP equation from http://alienryderflex./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');

// Set here light/dark depending on container or whatever color
var theme =  $('.container').lightOrDark();

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

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

Iframe: https://jsfiddle/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);

I will suggest as pointed by @charlietfl to look into the postMessage API in order to pass a certain message to the iframed html and then do something in javascript to change the background.

http://robertnyman./2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/

If you have control over the src of the iframe, you could just include it as a parameter.

<div class="framed-lead-form">
    <iframe src="//go.pardot./id?bg=FF0000"></iframe>
</div>

You might need to get this color dynamically via Javascript in the parent document, but the idea is the same. You could do this on DOM load. Jquery example:

$(function() {
    var bgColor = getPageBgColor();
    $('#my-frame').attr('src', '//go.pardot./id?bg=' + bgColor);
});

I haven't tested this but it should get you the background color from inside the iframe.

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

This should work

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