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

У меня есть страница, содержащая 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, чего я определенно хочу избежать.

Ответы

Ответ 1

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

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

Удачи.

Ответ 2

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

... set visibility:hidden

... set position:absolute; top:-600px;

... set opacity:0

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

Ответ 3

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

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

Ответ 4

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