Javascript проблема с iframe, который скрыт перед загрузкой - PullRequest
Новая
       12

Javascript проблема с iframe, который скрыт перед загрузкой

14 голосов
/ 28 апреля 2010

У меня есть страница, которая содержит iframe, которая загружается с использованием Javascript:

index.html 

<iframe id="myFrame" width="800" height="600" style="display: none;"></iframe>
<div id="loader"><!-- some loading indicator --></div>

<script type="text/javascript">
function someFunction() {
  var myFrame = document.getElementById('myFrame');
  var loader = document.getElementById('loader');

  loader.style.display = 'block';

  myFrame.src = 'myFrame.html';
  myFrame.onload = function() {
    myFrame.style.display = 'block';
    loader.style.display = 'none';
  };
}
</script>

Страница, загружаемая в iframe, содержит некоторую логику Javascript, которая вычисляет размеры определенных элементов для целей добавления управляемой JS полосы прокрутки (jScrollPane + jQuery Dimensions).

myFrame.html 

<div id="scrollingElement" style="overflow: auto;">
  <div id="several"></div>
  <div id="child"></div>
  <div id="elements"></div>
</div>

<script type="text/javascript">
$(document).load(function() {
  $('#scrollingElement').jScrollPane();
});
</script>

Это работает в Chrome (и, возможно, в других браузерах Webkit), но не работает в Firefox и IE, потому что во время вызова jScrollPane все элементы остаются невидимыми, и jQuery Dimensions не может определить размеры какого-либо элемента.

Есть ли способ убедиться, что мой iframe виден до вызова $(document).ready(...)? Кроме использования setTimeout для задержки jScrollPane, чего я определенно хочу избежать.

Ответы [ 4 ]

13 голосов
/ 07 мая 2010

Некоторые браузеры предполагают, что когда «display: none» применяется к замененным элементам (таким как Flash или iframe), визуальная информация для этого элемента больше не нужна Таким образом, если элемент впоследствии будет отображаться CSS, браузер фактически воссоздает «скретч» визуальных данных.

Я полагаю, что для iframe по умолчанию установлено значение "display: none;" заставляет браузер пропускать рендеринг HTML, чтобы у тегов не было никаких измерений. Я бы установил видимость «скрытый» или поместил бы ее со страницы, а не использовал «display: none;».

Удачи.

7 голосов
/ 28 апреля 2010

вместо того, чтобы сделать iframe невидимым с помощью display:none, вы можете попробовать ...

... набор visibility:hidden

... набор position:absolute; top:-600px;

... набор opacity:0

или что-то еще, что заставляет jQuery «видеть» объекты, но не пользователя (и сбрасывать используемые css-атрибуты в вашей функции myFrame.onload).

0 голосов
/ 26 ноября 2013

visibility:collapse; display:hidden; height:0px;

Будет работать, чтобы избавиться от пробелов тоже .. Iframe также загрузит ..

0 голосов
/ 26 сентября 2012

Скрытые фреймы - огромная проблема безопасности. Возможно, лучше всего попытаться найти другой способ выполнить то, что вы хотите, если это законно, потому что, надеюсь, будущие браузеры вообще избавятся от этой функции. http://blog.opendns.com/2012/07/10/opendns-security-team-blackhole-exploit/

...