iframe在Chrome中的渲染

问题描述：

我在iframe的主页中显示了几页。iframe在Chrome中的渲染

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

我将background-color:transpert添加到页面本身和主页面CSS。

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

我可以做任何事情来解决这个问题吗？

你的意思是它的白色，同时加载，然后当它完成加载它是OK？ – 2012-01-12 13:33:02

yeap但只在铬 – samy 2012-01-12 13:34:01

因为这是浏览器的行为，我怀疑它可以真正“固定” - 一个解决方法是隐藏加载框架（仅适用于Chrome） - 如果相关让我知道，我可以给示例代码。 – 2012-01-12 13:36:56

答

由于这是浏览器行为，我怀疑它可以真正“固定”。

一种解决方法是隐藏帧，而它的加载（仅适用于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。（重新加载相同的框架，但概念是相同的）

工作像MAGIC谢谢你！ – samy 2012-01-12 14:02:30

答

我用了非常相似的态度。这种方法仅适用于您的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"; 
     } 
    } 
};

iframe在Chrome中的渲染

相关推荐