Изменить размер IFRAME для удаления полос прокрутки

У меня есть iframe на моей странице, который я хочу изменять каждый раз, когда содержимое изменяется, так что нет полос прокрутки. Содержимое фрейма изменяется часто, не изменяя URL. Я хочу, чтобы весь контент из фрейма отображался все время, без изменения мерцания экрана во время изменения размера кадра. Родитель и фрейм находятся в одном домене.Изменить размер IFRAME для удаления полос прокрутки

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

Если это помогает, я использую angularJS.

источник

2013-07-26 John Tseng

Не было бы проще и более совместимо просто указывать 'overflow: hidden 'во встроенном документе? – nullability

Хороший вопрос. Я не хочу, чтобы переполнение было скрыто. –

попробуйте использовать прокрутку: no вы можете следовать свойства здесь http://www.w3schools.com/tags/tag_iframe.asp –

Вы можете получить высоту содержимого iFrames на [iframe] .contentWindow.document.body.offsetHeight. Если вы не знаете, когда изменяется размер содержимого, вам необходимо проверить его вручную, используя setInterval().

источник

2013-07-26 17:58:01 max

setInterval - хорошая идея. Однако это вызывает мерцание экрана. Есть ли что-то, что не могло бы вызвать мерцание экрана? –

Попробуйте это, вызовите функцию повторно размера в качестве слушателя событий, когда-либо в Iframe загружает этот срабатывают

var iframe = document.getElementById('myIframe'); 
    var resizeFunction= function() {$("#myIframe").css({ 
     height: iframe.$("body").outerHeight() 
    });}; 
    if(iframe.addEventListener){ 
     iframe.addEventListener('load', resizeFunction, true); 
    }else if(iframe.attachEvent){ 
     iframe.attachEvent('onload',resizeFunction); 
    }

источник

2013-07-26 18:32:32 Samy

Это только уменьшает размер нагрузка. Содержимое моего фрейма меняется все время без нагрузки. –

Это функция которым я на одном из моего сайта. Я изменил код, который будет помещен в директиву.

Примечание: В IFRAME ваш контейнер должен иметь идентификатор ifrm_container

<iframe resize-iframe id="iframe" src="..."> 

.directive('resize-iframe', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, elm, attrs) { 

     var container = elm.contentWindow.document.getElementById('ifrm_container'); // Iframe container. Usualy a div. 

     function autoResize(){ 
      ifrmNewHeight = container.offsetHeight; // New height of the document. 

      if(ifrmNewHeight !== ifrmOldHeight) { 
       ifrmOldHeight = ifrmNewHeight + 30; // +30 for no scrollbar. 
       ifrm.style.height= (ifrmNewHeight + 30) + "px"; // Set iframe style. 
      } 

      setTimeout(autoResize, 250); 
     } 
     // First call of autoResize(). 
     autoResize(); 
    }; 
});

Я проверил это решение на всех браузер даже IE7 и он работает хорошо, но не в директиве (Измененная некоторый элемент).

ДИРЕКТИВА ЭТО НЕ ПРОВЕРЕНА

источник

2013-07-26 19:06:34 L105

Ответ на макет Max в директиве - неплохая идея. Однако он все еще имеет тот же недостаток мерцания экрана. –

Попробуйте iframe-resizer, капля в модуле для расслоения плотных изменений размера плавающих фреймов автоматически.

источник

2015-03-26 09:54:49 Geert

Изменить размер IFRAME для удаления полос прокрутки

ответ

Смежные вопросы