難題：不同的域iframe需要動態地“重疊”父內容

Question

對於您的Stack Overflow天才來說，這應該是一個有趣的難題：

我正在構建一個瀏覽器插件，該插件會將div ， script和iframe注入客戶端正在查看的任何頁面的標記中。 目的是將工具欄固定在每個頁面的底部（ StumbleUpon針對Chrome進行此操作）。 這是放在</body>前面的代碼：

<div id="someID1" style="position: fixed; bottom: 0px; left: 0px; width: 100%; height: 100%; background-color: transparent;">
    <iframe id="someID2" src="http://www.example.com/iframeContent.html" frameBorder="0" scrolling="no" style="background-color: transparent; margin: 0px; height: 100%; width: 100%; padding: 0px;"/>
</div>

該工具欄（ iframe ）將托管在我們的服務器上，並具有彈出面板。 當用戶單擊以打開菜單時，菜單會垂直擴展工具欄（例如，工具欄高度為35px；面板為100px）。

我可以在Safari，Firefox和Chrome瀏覽器中實現此目的，方法是使工具欄位於透明背景上的所有內容之上（即， div和iframe height: 100%和background-color: transparent ）。 但這不適用於IE7，IE8，IE9。

我試過（1）做background: blank.gif而不是背景顏色：透明，和（2）注入script與調整大小功能父，我可以打電話與parent.resizeFunction(height) （“資源拒絕”）

關於如何解決這個問題的任何想法？ 非常感謝！

Answer 1

我必須運行，所以我無法對其進行測試，但是IE似乎正在偵聽非標准的ALLOWTRANSPARENCY屬性。

當該屬性設置為false時，對象的backgroundColor屬性只能是窗口的backgroundColor屬性。 當該屬性設置為true時，可以將對象的backgroundColor屬性設置為任何值，包括透明值的默認值。