2012-01-12 142 views
1

我在iframe的主頁中顯示了幾頁。iframe在Chrome中的渲染

我在主頁面有一個背景圖片,當我點擊按鈕來改變框架內的頁面時,框架背景顏色變爲白色,直到頁面可見。

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

我用FireFox和IE檢查了網站,它看起來很好(框架的背景並沒有改變),但是使用Chrome瀏覽器時它渲染得很好,就像我想要的那樣,其他時候iframe背景變成白色。

我可以做任何事情來解決這個問題嗎?

+0

你的意思是它的白色,同時加載,然後當它完成加載它是OK? – 2012-01-12 13:33:02

+0

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

+0

因爲這是瀏覽器的行爲,我懷疑它可以真正「固定」 - 一個解決方法是隱藏加載框架(僅適用於Chrome) - 如果相關讓我知道,我可以給示例代碼。 – 2012-01-12 13:36:56

回答

3

由於這是瀏覽器行爲,我懷疑它可以真正「固定」。

一種解決方法是隱藏幀,而它的加載(僅適用於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。 (重新加載相同的框架,但概念是相同的)

+0

工作像MAGIC謝謝你! – samy 2012-01-12 14:02:30

1

我用了非常相似的態度。這種方法僅適用於您的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"; 
     } 
    } 
};