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

Тема в разделе "JavaScript", создана пользователем pronax, 21 май 2012.

Модераторы: ZiX
  1. pronax

    pronax Постоялец

    Регистр.:
    21 сен 2008
    Сообщения:
    146
    Симпатии:
    10
    Всем привет, собственно сабж нужен.
    Гугл нечего дельного и рабочего не выдал.
    Проблема в том что начальство требуется интегрироваться в другие сайты(наших партнеров), они разрешают только iframe. Да и мне удобней менять контент на своей стороне, а не просить партнеров в случае каких-то изменений.
     
  2. dandandan

    dandandan

    Регистр.:
    7 авг 2008
    Сообщения:
    990
    Симпатии:
    267
    Автоматический resize высоты IFRAME, загруженного с другого домена, или кое-что о кроссдоменной передаче данных
    http://dklab.ru/chicken/nablas/58.html
     
  3. pronax

    pronax Постоялец

    Регистр.:
    21 сен 2008
    Сообщения:
    146
    Симпатии:
    10
    этот способ уже не работает, в IE бесконечный редирект, в Опере не работает.
     
  4. Andipas

    Andipas Постоялец

    Регистр.:
    5 дек 2007
    Сообщения:
    130
    Симпатии:
    92
    Обычно, ширину iframe можно подобрать универсальную, а вот с высотой проблемы.
    Для выставления нужной высоты есть библиотечка jquery.iframe-auto-height.
    Находится по адресу https://github.com/house9/jquery-iframe-auto-height
     
    zaxap83 нравится это.
  5. Red Admin

    Red Admin Постоялец

    Регистр.:
    23 фев 2012
    Сообщения:
    121
    Симпатии:
    16
    Ребят, я в JS неособо понимаю (почти полный 0), поможитя, плз.
    У меня есть такой код для Joomla:
    Код:
    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';
    }
    
    Но он отсчитывает:
    1. Высоту iFrame только при загрузке страницы. А хотелось бы и при изменении размеров окна браузера. Например я сдвигаю окно по ширине, вложенный документ (текст) соответственно то же сдвигается, тем самым становясь уже, но при этом длинее (выше). А этот скрипт не меняет высоту при этом.
    2. Если на странице более одного 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(второй вопрос)...
     
    Последнее редактирование: 2 мар 2016
  6. m@rks

    m@rks Создатель

    Заблокирован
    Регистр.:
    27 авг 2012
    Сообщения:
    21
    Симпатии:
    1
    подключи jquery и используй событие .resize() на разных iframe
     
  7. Red Admin

    Red Admin Постоялец

    Регистр.:
    23 фев 2012
    Сообщения:
    121
    Симпатии:
    16
    А можно поподробнее? Какие изменения нужно внести в скрипт, чтобы заработало?
     
  8. m@rks

    m@rks Создатель

    Заблокирован
    Регистр.:
    27 авг 2012
    Сообщения:
    21
    Симпатии:
    1
    вот пример:
    $( window ).resize(function() {
    $( "#iframe1" ).height( значение );
    });
     
  9. Red Admin

    Red Admin Постоялец

    Регистр.:
    23 фев 2012
    Сообщения:
    121
    Симпатии:
    16
    Что записывается в значение? И/или где почитать подробный ман с примерами по подключению и использованию?

    Я так предполагаю должно быть нечто вроде этого:
    Код:
    $(window).resize(function iFrameHeight() { 
                            var iframe = $('#iframe', parent.document.body);
                            iframe.height($(iframe).contents().find('body').height());
    });
    
    Но так не работает (наверное потому, что ни где не задан document.getElementById('blockrandom'))?
     
    Последнее редактирование: 2 мар 2016
  10. m@rks

    m@rks Создатель

    Заблокирован
    Регистр.:
    27 авг 2012
    Сообщения:
    21
    Симпатии:
    1
    туда записывается значение высоты iframe http://api.jquery.com/height/