динамическое изменение высоты iframe - PullRequest
Новая
       24

динамическое изменение высоты iframe

3 голосов
/ 30 августа 2011

Привет, у меня сейчас 2 страницы (index.html и iframe_contents.html). Оба находятся в одном домене.

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

Я использовал это, чтобы помочь мне http://benalman.com/code/projects/jquery-resize/examples/resize/, и это работает, если тег тела iframe_contents становится больше или меньше в Firefox и IE 7/8/9, но для веб-набора он может только расти и никогда не уменьшаться

Я сузил его до тега body в iframe_contents.html, который не сжимается при изменении высоты содержимого, а только в iframe. Когда iframe_contents.html отсутствует в iframe, если я уменьшаю / увеличиваю элементы, общая высота тела изменяется.

Это специфическая проблема веб-набора?

Ответы [ 2 ]

4 голосов
/ 11 мая 2013

После прочтения большого количества ответов здесь у всех возникла одна и та же проблема - не уменьшать размер при необходимости.Я думаю, что большинство людей просто изменяют размеры после загрузки кадра, так что, возможно, это не волнует.Мне нужно изменить размер снова каждый раз, когда размер окна изменяется.Так что для меня, если бы они сузили окно, то iframe стал бы очень высоким, тогда, когда они увеличили окно, оно должно снова стать короче.Это не происходило в некоторых браузерах, потому что scrollHeight, clientHeight, jquery height () и любая другая высота, которую я мог найти с помощью инспекторов DOM (FireBug / Chrome Dev Tools), не сообщали, что высота тела или html была короче после того, как iframe былсделано шире.Как будто в теле была установлена ​​минимальная высота 100% или что-то в этом роде.

Для меня решение было сделать высоту iframe 0, затем проверить scrollHeight, а затем установить это значение.Чтобы избежать прокручивания полосы прокрутки на моей странице, я установил высоту родительского элемента (которая содержит iframe) на высоту iframe, чтобы при этом общий размер страницы оставался фиксированным.

Хотелось бы, чтобы у меня был чищепример, но вот код, который у меня есть: 

        $(element).parent().height($(element).height());
        $(element).height(0);
        $(element).height($(element).contents().height());
        $(element).parent().height("");

Элемент - мой iframe.

У iframe установлен стиль width: 100%, и он внутри div со стилями по умолчанию (блок).

Код является jquery и устанавливает высоту div равной высоте iframe, затем устанавливает iframe на 0 высоту, а затем устанавливает iframe на высоту содержимого.Если я уберу строку, которая устанавливает для iframe значение 0, то iframe будет увеличиваться по мере необходимости, но никогда не уменьшаться.

1 голос
/ 31 августа 2011

Это может вам не сильно помочь, но у нас есть функция на вашей странице iframe_contents.html. Он попытается изменить размер iframe, в который он загружен, своего рода кроссбраузерным способом с чисто изменяющимся размером браузера: 

function makeMeFit() {
    if (top.location == document.location) return; // if we're not in an iframe then don't do anything
    if (!window.opera && !document.mimeType && document.all && document.getElementById) {
        parent.document.getElementById('youriframeid').style.height = (this.document.body.offsetHeight + 30) + "px";
    } else if (document.getElementById) {
        parent.document.getElementById('youriframeid').style.height = (this.document.body.scrollHeight + 30) + "px"
    }
}

Вы можете звонить на него в resize() событии или после события, которое меняет высоту вашей страницы. Тестирование функций в этом методе должно отделить браузеры WebKit и выбрать правильное свойство высоты.

...