Chrome 中的 iframe 渲染答案

【问题标题】：iframe rendering in ChromeChrome 中的 iframe 渲染
【发布时间】：2012-01-12 13:31:47
【问题描述】：

我在iframe 内的主页中显示了几页。

我在主页中有一个背景图像，当我单击按钮更改框架内的页面时，框架背景颜色有时会变为白色，直到页面可见。

我在页面本身和主页 CSS 中添加了 background-color:transpert。

我使用 FireFox 和 IE 检查了该站点，它看起来很好（框架的背景没有改变），但使用 Chrome 时，它有时渲染得很好，就像我想要的那样，而其他时候 iframe 背景变成白色。

我能做些什么来解决这个问题吗？

【问题讨论】：

你的意思是加载的时候是白色的，然后加载完成就OK了？
由于这是浏览器行为，我怀疑它是否真的可以“修复” - 一种解决方法是在加载时隐藏框架（仅适用于 Chrome） - 如果相关，请告诉我，我可以提供示例代码。
我可以使用示例代码，因为我尝试过类似的东西，但我没有很好地工作，我想我只是这样做了
是background-color:transparent; 不是`background-color:transpert

标签： css google-chrome iframe

【解决方案1】：

由于这是浏览器行为，我怀疑它是否真的可以“修复”。

一种解决方法是在加载时隐藏框架（仅适用于 Chrome）- 这是代码：

var isChrome = (navigator.userAgent.indexOf("Chrome") >= 0);
function LoadFrame(url) {
    var oFrame = document.getElementById("myframe");
    if (isChrome) {
        oFrame.style.visibility = "hidden";
        oFrame.onload = function() {
            oFrame.style.visibility = "visible";
        };
    }
    oFrame.src = url;
}

Live test case。（在那里重新加载相同的框架，但概念相同）

【讨论】：

【解决方案2】：

我用了非常相似的态度。此方法仅适用于 iFrame 中的页面在您的控制之下的情况。

变化是 iframe 里面的页面在父窗口中找到 iframe 并使其再次可见：

<iframe style="visibility: hidden;" id="iframe_id" src="my_page.html" />

// inside my_page.html:
window.onload = function() {
    // make sure the parent iframe is visible
    if (window.parent)
    {
        var nodeIframe = window.parent.document.getElementById(window.name);
        if (nodeIframe)
        {
            nodeIframe.style.visibility = "visible";
        }
    }
};

【讨论】：