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

Ответ 1

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

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

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

Ответ 2

Это работает для меня, если я его установил и вытащил, не используя .contents(). См. Мой пример ниже.

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

EDIT: Если я правильно понимаю, вы пытаетесь избавиться от полос прокрутки, вызвав приращение и вернитесь к исходной высоте, вызвав декремент.

После нескольких тестов в разных браузерах. Здесь код, который работает в 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});
}

Ответ 3

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

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

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

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

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

Ответ 4

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

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}); 
           } 
}

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

Ответ 5

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

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

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

Ответ 6

Я успешно изменяю размер и ширину 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())

}

);

}

}

);

Ответ 7

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

Ответ 8

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

$('# iframe'). live ('mousemove', function (event) {

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

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

Ответ 9

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

У меня была проблема с изменением размера календаря google, загруженного iFrame, поэтому я только что сделал размер по умолчанию для него в стиле iFrame: width = "600" и настройки высоты в основном максимум, который я бы хотел, 980, я полагаю, затем завернутый в контейнер Div с высотой и шириной на 100% и минимальной высотой и минимальной шириной при 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, чтобы сохранить пропорции с ограничениями и где-то квадратными.

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

веселит