Управление высотой iframe с помощью jQuery

Question

Я использую jQuery для управления высотой фрейма.

jQuery("iframe",top.document).contents().height();  

Это работает, когда высота фрейма увеличивается. Когда высота уменьшается, это не работает. Возвращает только старое значение. Почему это происходит?

Answer 1

Я использую следующее, и оно отлично работает ...

$("#frameId").height($("#frameId").contents().find("html").height());

конечно, только когда он вызывается (без «авторазмера») ... но он работает с уменьшением

Answer 2

Это работает для меня, если я установлю его и получу без использования .contents(). Пожалуйста, смотрите мой пример ниже.

function changeFrameHeight(newHeight){
  jQuery("iframe",top.document).height(newHeight);
  alert("iframe height=" + jQuery("iframe",top.document).height());
}

РЕДАКТИРОВАТЬ: Если я правильно понимаю, вы пытаетесь избавиться от полос прокрутки, вызвав приращение и вернуться к первоначальной высоте, вызвав декремент.

После выполнения нескольких тестов в разных браузерах. Вот код, который работает в FF, IE, Chrome, Safari и Opera.

//first declare a variable to store the original IFrame height.
var originalHeight = $("iframe",top.document).height();

Измените вашу heightIncrement функцию, чтобы использовать следующее:

heightIncrement:function(){
 var heightDiv = jQuery("iframe",top.document).contents().find('body').attr('scrollHeight'); 
 jQuery("iframe",top.document).css({height:heightDiv});
}

Измените функцию heightDecrement , чтобы использовать следующее:

heightDecrement:function(){
 jQuery("iframe",top.document).css({height:originalHeight});
}

Answer 3

Это древний, но, надеюсь, это поможет.

Похоже, что в Chrome (или, может быть, во всем webkit, не уверен) есть ошибка, при которой scrollHeight может увеличиваться, но не уменьшаться (по крайней мере, в случае содержимого в iframe). Таким образом, если содержимое увеличивается, а затем уменьшается, scrollOffset остается на более высоком уровне. Это не очень приятно, когда вы пытаетесь сделать высоту iframe достаточно большой для постоянно меняющегося контента.

Обходной путь взлома состоит в том, чтобы заставить его пересчитать высоту, установив высоту на что-то определенно достаточно маленькое, чтобы высота iframe была меньше его содержимого, тогда scrollHeight сбрасывается.

var frame = top.document.getElementById('iFrameParentContainer').getElementsByTagName('iframe')[0];
var body = frame.contentWindow.document.body;
var height = body.scrollHeight; // possibly incorrect
body.height = "1px";
height = body.scrollHeight; // correct

Это может вызвать небольшое мерцание, но обычно не работает, по крайней мере, на моей машине (тм).

Answer 4

Это простой jQuery, который работал для меня. Протестировано в iExplorer, Firefox и Crome:

 $('#my_frame').load(function () {  
      $(this).height($(this).contents().find("html").height()+20);
});

Я добавил 20 пикселей, чтобы избежать прокрутки, но вы можете попробовать нижнюю границу.

Answer 5

Во время загрузки я вызываю эту функцию

heightIncrement:function(){     
           if($.browser.mozilla)
           { 
             var heightDiv   = jQuery("iframe",top.document).contents().attr("height")+"px";                    
             jQuery("iframe",top.document).css({height:heightDiv});
           }
           else if($.browser.opera  || $.browser.safari || $.browser.msie)
           {               
             var heightDiv   = jQuery("iframe",top.document).height();                   
             jQuery("iframe",top.document).css({height:heightDiv}); 
           } 
}

если я использую без содержимого (), он возвращает ноль.

Answer 6

Я не уверен, довольны ли люди своими методами, но я написал очень простой подход, который, кажется, хорошо работает для меня, в новейших Safari, Chrome, IE9, Opera и Firefox.

У меня возникла проблема с изменением размера iFrame в календаре Google, поэтому я просто установил для него размер по умолчанию в стиле iFrame: width = "600" и настройки высоты, в основном, максимальные, которые я хотел бы, 980, я полагаю, затем обернул это в контейнер Div с высотой и шириной в 100% и min-height и min-width в 400px и 300px соответственно, а затем добавил немного jQuery для запуска при onload и onresize ...

        <script>

        var resizeHandle = function(){
            var caseHeight = $('#calendarCase').height();
            var caseWidth = $('#calendarCase').width();
            var iframeWidth = $('#googleCalendar').width(caseWidth - 10);
            var iframeHeight = $('#googleCalendar').height(caseWidth - 10);;
        };


</script>


<body id ="home" onLoad="resizeHandle()" onResize="resizeHandle()">

чтобы пояснить, функция изменения размера запускается onLoad, потому что я нацеливаюсь на мобильные телефоны и планшеты в своем адаптивном дизайне, который принимает высоту и ширину div calendarCase и соответственно устанавливает высоту и ширину iframe (#googleCalendar) минус 10 пикселей для некоторого заполнения.

edit Я забыл упомянуть, что использовал caseWidth, чтобы установить высоту iFrame, чтобы сохранить ограниченные пропорции и где-то квадрат.

До сих пор это работало нормально, если у кого-то есть идеи, почему оно может быть нестабильным, пожалуйста, сообщите,

ура

Answer 7

Я использую это:

$ ('# iframe'). Live ('mousemove', функция (событие) {

var theFrame = $ (this, parent.document.body);

this.height ($ (document.body) .height () - 350);
});

Answer 8

Если источник iframe отличается от своего родительского домена, вам, вероятно, потребуется использовать easyXDM .

Answer 9

Я успешно изменил размеры и ширину iframe при загрузке. в основном вы можете сделать это, как показано ниже, и я также публикую небольшую статью в своем блоге: http://www.the -di-lab.com /? p = 280

$(".colorbox").colorbox(

{iframe:true,

innerWidth:0,

innerHeight:0,

scrolling:false,

onComplete:function(){

$.colorbox.resize(

{

innerHeight:($('iframe').offset().top + $('iframe').height()),

innerWidth:($('iframe').offset().left + $('iframe').width())

}

);

}

}

);