рендеринг iframe в Chrome

Question

У меня есть несколько страниц, которые я показываю с моей главной страницы внутри iframe.

Я получил фоновое изображение на главной странице, когда я нажимаю кнопку, чтобы изменить страницу внутри рамки, цвет фона рамки становится белым, пока страница не станет видимой.

Я добавил background-color:transpert к самим страницам и к главной странице CSS.

Я проверил сайт с помощью FireFox и IE, и он выглядит нормально (фон рамки не меняется), но с Chrome он иногда рендерится отлично, как я хотел, а в других случаях фон iframe становится белым.

Могу ли я сделать что-нибудь, что исправит это?

Answer 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;
}

Тестовый пример . (Перезагрузка того же кадра, но концепция та же)

Answer 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";
        }
    }
};