Измените размер iframe на содержание с помощью Jquery

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

$("#IframeId").height($("#IframeId").contents().find("html").height());​

Это не работает. Это из-за междоменной проблемы? Как мне его подогнать? Пожалуйста, взгляните на Fiddle: JsFiddle

PS Я установил HTML и тело ссылки height:100%;

Источник

7 ответов

Решение

Вам просто нужно применить свой код на iframe load событие, так что высота уже известна в то время, код следует:

$("#IframeId").load(function() {
    $(this).height( $(this).contents().find("body").height() );
});

Смотрите рабочий демо. Эта демонстрация работает на jsfiddle, так как я установил URL-адрес iframe в том же домене, что и результат iframe jsfiddle, то есть fiddle.jshell.net домен.

ОБНОВЛЕНИЕ:
@Youss: кажется, что ваша страница по непонятной причине неправильно понимает рост, поэтому попробуйте вместо этого использовать высоту основных элементов, например:

$(document).ready(function() {
    $("#IframeId").load(function() {
            var h = $(this).contents().find("ul.jq-text").height();
            h += $(this).contents().find("#form1").height();
            $(this).height( h );
        });
});
Источник

Не уверен, почему решение @Nelson не работало в Firefox 26 (Ubuntu), но следующее решение Javascript-jQuery, похоже, работает в Chromium и Firefox.

/**
 * Called to resize a given iframe.
 *
 * @param frame The iframe to resize.
 */
function resize( frame ) {
  var b = frame.contentWindow.document.body || frame.contentDocument.body,
      cHeight = $(b).height();

  if( frame.oHeight !== cHeight ) {
    $(frame).height( 0 );
    frame.style.height = 0;

    $(frame).height( cHeight );
    frame.style.height = cHeight + "px";

    frame.oHeight = cHeight;
  }

  // Call again to check whether the content height has changed.
  setTimeout( function() { resize( frame ); }, 250 );
}

/**
 * Resizes all the iframe objects on the current page. This is called when
 * the page is loaded. For some reason using jQuery to trigger on loading
 * the iframe does not work in Firefox 26.
 */
window.onload = function() {
  var frame,
      frames = document.getElementsByTagName( 'iframe' ),
      i = frames.length - 1;

  while( i >= 0 ) {
    frame = frames[i];
    frame.onload = resize( frame );

    i -= 1;
  }
};

Это постоянно изменяет размеры всех фреймов на данной странице.

Протестировано с помощью jQuery 1.10.2.

С помощью $('iframe').on( 'load', ... будет работать только с перерывами. Обратите внимание, что размер должен быть изначально установлен на 0 пикселей в высоту, если он будет уменьшаться ниже значения по умолчанию iframe высота в некоторых браузерах.

Источник

Просто сделайте это на HTML-теге, отлично работает

$("#iframe").load(function() {
    $(this).height( $(this).contents().find("html").height() );
});
Источник

Что вы можете сделать, это следующее:

  • В пределах iFrame используйте document.parent.setHeight(myheight), чтобы установить высоту в пределах iFrame для родителя. Что разрешено, так как это дочерний элемент управления. Вызовите функцию от родителя.

  • Внутри родителя вы создаете функцию setHeight(iframeheight), которая изменяет размер iFrame.

Также см:
Как реализовать междоменный URL-доступ из Iframe с использованием Javascript?

Источник

В качестве ответа на вопрос используйте уже устаревший jquery (load устарела и заменена на.on('load',function(){}), ниже приведен последний код ответа в вопросе.

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

$("#dreport_frame").on('load',function(){

  var h = $('#dreport_frame').contents().find("body").prop('scrollHeight');
  var w = $('#dreport_frame').contents().find("body").prop('scrollWidth');

  $('#dreport_frame').height(h);
  $('#dreport_frame').width(w);
})
Источник

Отрегулируйте высоту фрейма под нагрузкой и измените его размер в зависимости от его высоты.

var iFrameID = document.getElementById('iframe2');
var iframeWin = iFrameID.contentWindow;

var eventList = ["load", "resize"];
for(event of eventList) {
    iframeWin.addEventListener(event, function(){ 
        if(iFrameID) {
            var h = iframeWin.document.body.offsetHeight  + "px";
            if(iFrameID.height == h) {
                return false;
            }

            iFrameID.height = "";
            iFrameID.height = iframeWin.document.body.offsetHeight  + "px";

        }   
    })  
}
Источник

В конце концов, я пришел с этим междоменным решением, которое также работает для изменения размера ...(изменение размера не запускается: автоматическое изменение размера высоты iframe при изменении высоты содержимого iframe (тот же домен) )

Iframe:

      (function() {
    "use strict";
    var oldIframeHeight = 0,
        currentHeight = 0;
    function doSize() {
        currentHeight = document.body.offsetHeight || document.body.scrollHeight;
        if (currentHeight !== oldIframeHeight) {
            console.log('currentHeight', currentHeight);
            window.parent.postMessage({height:currentHeight}, "*");
            oldIframeHeight = currentHeight;
        }
    }
    if (window.parent) {
        //window.addEventListener('load', doSize);
        //window.addEventListener('resize', doSize); 
        window.setInterval(doSize, 100); // Dispatch resize ! without bug
    }
})();

Родительская страница:

      window.addEventListener('message', event => {
    if (event.origin.startsWith('https://mysite.fr') && event.data && event.data.height)  {
        console.log('event.data.height', event.data.height);
        jQuery('#frameId').height(event.data.height + 12);
    }
});
Источник
Другие вопросы по тегам