iframe如何獲取其父級背景顏色？

我在iframe中顯示Pardot（Salesforce）表單，並控制這兩個域上的標記和腳本。表單具有透明背景，有時父頁面的背景照片或顏色與表單標籤的文本顏色沒有足夠的對比。您無法閱讀名字當它是深色背景上的黑色文字時。iframe如何獲取其父級背景顏色？

我的目標是在iframe內設置body類，即.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>

來源

2015-04-27 Dylan Valade

可以使用的postMessage API的2個窗口之間進行通信，或者設置裏面'IFRAME document.domain'以匹配外窗，並且可以與腳本訪問的iframe那方式 – charlietfl

與製造主文檔和iframe小提琴。
從主文檔發送帶有窗柱消息主題
從iframe中監聽消息並設置背景主題顏色

主文檔：

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

來源

2015-04-27 20:39:10 Kristapsv

更新與工作色彩主題檢查使用https://gist.github.com/larryfox/1636338 – Kristapsv

克服使用框架小提琴！這是一個強大的演示。 –

通過@charlietfl爲指向窺視的postMessage API，以通過一定的信息到的iFrame HTML，然後我會建議做一些JavaScript來改變背景。

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

來源

2015-04-27 20:05:43

我沒有測試過，但它應該g您可以從iframe中獲取背景顏色。

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

來源

2015-04-27 20:58:12

如果你有過的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); 
});

來源

2015-04-27 21:50:16 Unknown123

謝謝，這是一種更簡單的方法，但我需要一些不需要人知道任何關於十六進制顏色或GET參數的東西。用戶將在任何位置粘貼樣板代碼，以便自動識別其背景。 –

哎呀。聽起來像postMessage解決方案對於用戶來說太複雜了。然後，我會爲用戶提供一個iframe和一個腳本標記的HTML。該腳本會更新iframes params或執行postMessage。它仍然是一個副本和過去的行動，但更復雜的HTML。 – Unknown123

這應該工作

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

來源

2017-07-19 13:27:42

這隻有在整個父頁面使用保存背景顏色時纔有用。這裏的目標是要知道iframe中包含的父元素的顏色。 –

iframe如何獲取其父級背景顏色？

回答

相關問題