Question

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

我的目标是根据包含该框架的父元素的颜色采样，在body iframe内.light-bg或.dark-bg设置一个iframe类。

在此代码中，div.framed-lead-form可以确定<div class="framed-lead-form"> <iframe src="//go.pardot.com/id" allowtransparency="true"></iframe> </div>背景是浅色还是深色。有一些JS插件可以获得元素的颜色饱和度（这个有一个有趣的许可证https://gist.github.com/larryfox/1636338），但是我找不到任何可以通过iframe工作的东西。

{{1}}

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的小提琴从主文件发送主题与窗口发布消息
从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), '*');

I帧： 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的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 4

我没有对此进行测试，但它应该从iframe内部获取背景颜色。

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

Answer 5

这应该有效

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

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

5 个答案: