Chromeのiframeレンダリング

Question

私のメインページから表示されるページは、iframeです。

メインページに背景画像があります。フレーム内のページを変更するボタンをクリックすると、フレームの背景色が白くなり、ページが見えるようになります。

私はbackground-color:transpertをページ自体とメインページCSSに追加しました。

FireFoxとIEでサイトをチェックしたところ、フレームの背景は変わりませんでしたが、Chromeではsomtimesレンダリングがうまくいき、iframeの背景が白になりました。

これを修正することはできますか？

Answer 1

これはブラウザの動作であり、私はそれが本当に "固定"されているのではないかと疑います。

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：ここのコードです -

回避策の一つは、それが（Chromeのみのために）ロードている間のフレームを非表示にすることです。 （そこに同じフレームを再ロードしても構いません）

Answer 2

私は非常に似た態度を使用しました。このアプローチは、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"; 
     } 
    } 
};