iframe динамической высоты и ширины

  • Заблокирован
  • #11
Но так не работает (наверное потому, что ни где не задан document.getElementById('blockrandom'))?
должно быть так:
Скрытое содержимое доступно для зарегистрированных пользователей!
 
должно быть так:
Не работает так... А там не должно быть ни каких onload и/или привязки/обработки id от iframe?

Опишу проблему чуть подробнее:
Есть страница на которой несколько однотипных iFrame типа:
Код:
<iframe onload="iFrameHeight()" id="blockrandom" name="" src="/test_1.php" width="100%" height="100%" scrolling="no" frameborder="0" class="wrapper">Без IFRAME</iframe>
<iframe onload="iFrameHeight()" id="blockrandom" name="" src="/test_2.php" width="100%" height="100%" scrolling="no" frameborder="0" class="wrapper">Без IFRAME</iframe>
<iframe onload="iFrameHeight()" id="blockrandom" name="" src="/test_3.php" width="100%" height="100%" scrolling="no" frameborder="0" class="wrapper">Без IFRAME</iframe>
<iframe onload="iFrameHeight()" id="blockrandom" name="" src="/test_4.php" width="100%" height="100%" scrolling="no" frameborder="0" class="wrapper">Без IFRAME</iframe>
<iframe onload="iFrameHeight()" id="blockrandom" name="" src="/test_5.php" width="100%" height="100%" scrolling="no" frameborder="0" class="wrapper">Без IFRAME</iframe>
На странице подключен скрипт с таким содержимым:
Код:
setInterval(function iFrameHeight()
 {
    var h = 0;
    if (!document.all)
    {
        h = document.getElementById('blockrandom').contentDocument.height;
        document.getElementById('blockrandom').style.height = h + 60 + 'px';
    } else if (document.all)
    {
        h = document.frames('blockrandom').document.body.scrollHeight;
        document.all.blockrandom.style.height = h + 20 + 'px';
    }
    h = document.getElementById('blockrandom').contentDocument.documentElement.scrollHeight;
    document.getElementById('blockrandom').style.height = h + 'px';
 },1000);
Для первого iFrame скрипт и автовысота отрабатывают прилично (лично мне эфект нравится). А для остальных отработки нет. Остальные открываются по-умолчанию.
 
Последнее редактирование:
  • Заблокирован
  • #13
#iframe это id="iframe", document ready нужен, если вы скрипты вызываете раньше основного содержимого
 
#iframe это id="iframe", document ready нужен, если вы скрипты вызываете раньше основного содержимого
То есть вместо моего громоздкого скрипта мне достаточно подключать скрипт с таким содержимым:
Код:
$(window).resize(function () {
$('#blockrandom').height($(this).height());
});
При этом этот скрипт будет рассчитывать высоту iFrame по вложенной странице и должен отрабатывать для ВСЕХ iFrame на странице?
А какие скрипты jQuery, при этом, нужно подключить?
 
Возможно, не совсем понял суть проблемы, но если нужен адаптивный iframe (с фиксированным соотношением сторон, ширина подстраивается под вьюпорт) то лучше использовать чистый css (т.н. приём padding-hack) безо всяких скриптов
 
Назад
Сверху