Как может iframe получить родительский цвет фона?

Question

У меня есть форма Pardot (Salesforce), отображаемая в iframe и контролирующая разметку и скрипты на обоих доменах. Форма имеет прозрачный фон, и иногда фоновое изображение или цвет исходной страницы не имеет достаточного контраста с цветом текста меток формы. Вы не можете прочитать Имя, когда это темный текст на темном фоне.

Моя цель состоит в том, чтобы установить body класс внутри iframe, который .light-bg или .dark-bg на основе цвета выборки родительского элемента, содержащего раму.

В этом коде iframe сможет определить, имеет ли светлый или темный фон div.framed-lead-form. Есть JS-плагины, чтобы получить насыщенность цвета элемента (у этого есть интересная лицензия https://gist.github.com/larryfox/1636338), но я не могу найти ничего, что работает через iframes.

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

Answer 1

Сделана скрипка с основным документом и 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), '*'); 

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

я предложу, как указал на @charlietfl посмотреть в API PostMessage, чтобы передать определенное сообщение фреймов HTML, а затем сделать что-то в JavaScript, чтобы изменить цвет фона.

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

Answer 3

Я не тестировал это, но должен был g et you the background color изнутри iframe.

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

Answer 4

Если у вас есть контроль над src iframe, вы можете просто включить его в качестве параметра.

<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;