как исправить chrome flicker на перезагрузке страницы iframe

Chrome мерцает при перезагрузке содержимого в iframes. Можно ли этого избежать каким-либо образом, думая:

  • упаковка a-ссылок с js, которая делает некоторую магию.
  • мета-теги в content-html. (У меня есть контроль источника над html в iframes)

обратите внимание, что тип контента в iframe может отличаться (pdf, html, изображения) так если ajax-единственный выход здесь, отражает ли он http-content-type обратно в ифрейме?

пожалуйста, посетите демо в http://jsfiddle.net/2tEVr/

отрывок скрипка:

 <iframe name="if" width="800" height="600"></iframe>

обновление

решение, которое лучше всего работало для меня, состояло в замене регулярных href на ajax-запросы, повторное заполнение области тела, (решение 4 ниже) мерцание исчезло, но идет по цене отладки akward, так как синхронизация между контентом и "view-source" теряется по ajax-запросу.

кроме того, так как тип контента в моем случае может измениться, метод выполнения ajax-запроса должен был иметь некоторые мозги и, возможно, вернуться к регулярному запросу местоположения.

С уважением,

7
google-chrome html5 web-applications

3 ответов

@user247245: из вашего вопроса не совсем ясно, как вы (хотите) использовать iframe. Перезагружается ли он периодически или один раз, когда загружается вся веб-страница?

Решение 1: другой цвет фона

в случае, если вы просто хотите избежать уродливого белого и избежать чрезмерного усложнения. Установите другой цвет фона в заголовке HTML framecontents.html файл, вот так:

<!DOCTYPE html>
<html style="background-color: #F48;">

таким образом, в то время как CSS загрузка,анализ и применяется, фон не #fff.

решение 2: прозрачный iframe

пока нет содержимого, iframe просто не должен быть видимым. Решение:

<iframe src="/framecontents.html" allowTransparency="true" background="transparent"></iframe>

конечно, не используйте это в сочетании с решением 1, вы застрелитесь в ногу.

решение 3: предварительная загрузка страницы iframe

если вы загружаете iframe позже (например, пользователь щелкает ссылку), рассмотрите возможность предварительной загрузки его содержимого. Скрывать это в верхней части вашей (родительской) страницы:

<iframe src="/framecontents.html" style="position: absolute; width: 0px; height: 0px"></iframe>

но я бы посоветовал использовать раствор 2.

решение 4: при выполнении мобильного веб-интерфейса:

посмотрите, как это сделал jQuery Mobile. Мы построили веб-интерфейс, который должен был чувствовать себя как родное приложение, поэтому без перезагрузки мигает. jQM исправил это. В основном делает фоновый вызов ajax для получения полного содержимого HTML, а затем извлекает body ("страницы" div если быть более точным), а затем заменяет содержание (с переходом, если хотите). Все это время отображается счетчик перезагрузки.

все это больше похоже на мобильное приложение: нет перезагрузки мигает. Другие решения были бы:

решение 5: Используйте JS для ввода CSS:

посмотреть ответ jmva или http://css-tricks.com/prevent-white-flash-iframe/ .

решение 6: Используйте JS для ввода CSS (простая версия)

<script type="text/javascript">
  parent.document.getElementById("theframe").style.visibility = "hidden";
</script>
<iframe id="theframe" src="/framecontents.html"  onload="this.style.visibility='visible';"></iframe>

можно конечно оставьте <script> часть и добавить style="visibility:hidden;" к iframe, но выше будет убедиться, что кадр виден для посетителей с отключенным JS. На самом деле, я бы посоветовал сделать это, потому что 99% посетителей все равно включили его, и его проще и эффективнее.

8

общим трюком является отображение iframe только тогда, когда он полностью загружен, но лучше не полагаться на это.

<iframe src="..." style="visibility:hidden;" 
  onload="this.style.visibility='visible';"></iframe>

тот же трюк немного оптимизирован с помощью JS.

// Prevent variables from being global      
(function () {

/*
      1. Inject CSS which makes iframe invisible
*/
var div = document.createElement('div'),
    ref = document.getElementsByTagName('base')[0] || 
          document.getElementsByTagName('script')[0];

div.innerHTML = '&shy;<style> iframe { visibility: hidden; } </style>';

ref.parentNode.insertBefore(div, ref);


/*
    2. When window loads, remove that CSS, 
       making iframe visible again
*/
window.onload = function() {
    div.parentNode.removeChild(div);
}

})();

извлеченные из css-trick

Если вам нужно переключаться между разными сайтами, и этот трюк onload не работает, единственным жизнеспособным решением было бы уничтожить и создать iframe программно.

2

попробуйте добавить transform: translate3d(0, 0, 0); о родительском элементе.

у меня была проблема, когда элемент iframe был выше своего родителя (родителей overflow: hidden). Переполненная часть iframe мерцала на каждом видео-цикле в Chrome (YouTube iframe API).

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

0