обнаруживать изменения высоты iframe без перезагрузки iframe

Question

В моем веб-проекте у меня есть iframe. Он содержит один граф и таблицу, содержащую значения графа. (graph = google graph api, table = datatables)

Иногда высота содержимого iframe изменяется приложениями js, а не путем перезагрузки html.

Поэтому мне нужно обнаружить те изменения, которые произошли от js, и увеличить размер i-frame.

Как я могу обнаружить эти изменения?

Вот моя функция, которая увеличивает размер i-frame. (Для справки)

  function update_height() {        
            $('#iframe-1').load( function() {
            var $ifbody = $(this).contents().find( 'body' );
            $ifbody.css( 'height','auto' );
            $(this).height( $ifbody.height() );
    }); 
   }; 

Answer 1

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

parent.$('#iframe-1').trigger("iframeResize", [$("body").height()]);

Затем на родительской странице установите свой обработчик, когда событие запускается:

$('#iframe-1').bind('iframeResize', function(event, newSize) {
    $(this).height(newSize);
    //or whatever else you'd like to do, such as call your update_height() function
});

Если вы не хотите отправлять параметр newSize с событием (или ваш iframe js не знает его во время запуска события), тогда вы можете поместить свой код update_height() в bind() обработчик для получения размера тела iframe.

Answer 2

Кажется, вы используете jQuery:

$('#iframe-1').load(function(){ 
    $(this).height($(this).contents().find('body').height()); 
});

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

Затем, чтобы обновлять его при изменении высоты ...

$('#iframe-1').contents().find('body').bind('resize', function(){
    $('#iframe-1').height($(this).height());
});

Должен это сделать ... вероятно ...

Answer 3

страница, в которой находится iframe, и страница, предоставляемая в качестве src для iframe, должны быть из одного источника (одна и та же политика происхождения).В этом случае javascript может общаться с одной страницы на другую (postMessage или через HashChange) или напрямую обращаясь к родительскому окну Windows и изменяя размер iframe.

Доступ к iframe в основном документе изнутриiframe;

function updateHeight(newHeight){
    parent.document.getElementById("iframe").style.height=newHeight+"px";
}