iframe 如何获得其父背景颜色？

Question

我在 iframe 中显示了一个 Pardot (Salesforce) 表单，并控制了两个域上的标记和脚本。表单具有透明背景，有时父页面的背景照片或颜色与表单标签的文本颜色没有足够的对比度。当名字是深色背景上的深色文字时，您无法阅读。

我的目标是根据父元素的颜色采样在 iframe 中设置 body class 即 .light-bg 或 .dark-bg包含框架。

在此代码中，iframe 将能够确定 div.framed-lead-form 的背景是浅色还是深色。有 JS 插件可以获取元素的颜色饱和度（这个有一个有趣的许可证 https://gist.github.com/larryfox/1636338），但我找不到任何可以通过 iframe 工作的东西。

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

Answer 1

我建议按照@charlietfl 的指示查看 postMessage API，以便将特定消息传递给 iframed html，然后在 javascript 中做一些更改背景。

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

Answer 2

用主文档和 iframe 制作了一个 fiddle。
从主文档发送主题 window post 消息
从iframe监听消息并设置背景主题颜色

主要文档： 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');

// 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), '*');

内嵌框架： 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

我还没有测试过这个，但它应该能让你从 iframe 中获取背景颜色。

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

Answer 4

如果您可以控制 iframe 的 src，则可以将其作为参数包含在内。

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

您可能需要通过父文档中的 Javascript 动态获取此颜色，但思路是一样的。您可以在 DOM 加载时执行此操作。 Jquery 示例：

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

Answer 5

这应该有效

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

iframe 如何获得其父背景颜色？

How can an iframe get its parent background color?

html

javascript

css

iframe

transparency