масштабирование iframe в соответствии с контентом (javascript)

Question

Я пытаюсь подгонять содержимое iframe (того же домена) в ранее существовавший iframe фиксированной высоты на моем сайте.

Содержимое динамически загружается в ранее существовавший iframe, а затем выполняется код в корпусе iframe, который должен масштабировать его вниз или вверх, чтобы была видна вся высота/ширина (то есть узкая/маленькая документы расширяются, длинные/широкие документы уменьшаются). Масштабирование выполняется с помощью CSS Zoom, пока я не думаю о лучшем способе.

function squeezeFrame() { 
    var b=document.getElementsByTagName('body')[0], 
     h=document.getElementsByTagName('html')[0], 
     zW=(b.clientWidth-5)/b.scrollWidth, 
     z=zW, 
     s="", 
     mult=0.25, // max +- scaling cap 
     maxH = (typeof document.height !== 'undefined') ? document.height : Math.max(b.scrollHeight, b.offsetHeight, h.clientHeight, h.scrollHeight, h.offsetHeight), // iframe content height 
     zH = (b.clientHeight)/maxH; 
    if (zH<zW && zH < 1) { z=zH } else { z=zW }; // single direction 
    if (z>1+mult) { z=1+mult; } else if (z<1-mult) { z=1-mult; } 
    s="zoom:"+z+";-moz-transform-origin: 0 0;-moz-transform: scale("+z+");"; 
    if (typeof b.setAttribute === "function") b.setAttribute('style', s); 
    else if (typeof b.style.setAttribute === "object") b.style.setAttribute('cssText', s); 
} 
if (typeof window.addEventListener != "undefined") window.addEventListener("load", squeezeFrame, false); 
else if (typeof window.attachEvent != "undefined") window.attachEvent("onload", squeezeFrame); 
else { 
    if (window.onload != null) { 
     var chain = window.onload; 
     window.onload = function (e) { 
      chain(e); 
      squeezeFrame(); 
     }; 
    } 
    else window.onload = squeezeFrame; 
} 

Тем не менее, «scrollHeight» и «offsetHeight» и «clientHeight» все то же самое значение (в пределах нескольких пикселей - полоса прокрутки ширина/высота). Высота прокрутки не соответствует высоте, которую может прокручивать документ, она представляет высоту IFRAME в родительском документе.

Например, если высота содержимого iframe составляет 850 пикселей, а сам iframe равен 550 пикселей, содержимое прокрутки iframe неправильно возвращает «550».

Как рассчитать фактическую высоту прокрутки документа?

Answer 1

Вот что я в итоге сделал. .pf - это класс, который является всего лишь идентификатором на странице (для нескольких элементов); .w0 и .h0 - это классы на div, которые обертывают содержимое, которое я хочу масштабировать, и имеют значения стиля, определяющие их конкретные размеры пикселей.

<script> 
(function (win, doc, undefined) { 
    function debounce(b,f,c){var a;return function(){var d=this,e=arguments,g=c&&!a;clearTimeout(a);a=setTimeout(function(){a=null;c||b.apply(d,e)},f);g&&b.apply(d,e)}}; 

    var pagew = parseInt(win.getComputedStyle(doc.getElementsByClassName("w0")[0], null).getPropertyValue("width"),10), 
     pageh = parseInt(win.getComputedStyle(doc.getElementsByClassName("h0")[0], null).getPropertyValue("height"),10), 
     scaled = false; 

    [].forEach.call(doc.querySelectorAll(".pf"), function(elm) { 
     elm.style.transformStyle = "flat"; 
     elm.style.transformOrigin = "top left"; 
    }); 

    var scaleDown = debounce(function() { 
      var docw = Math.max(doc.documentElement.clientWidth, win.innerWidth || 0); 
      if (docw < pagew) { 
      var scale = (docw/pagew); 
      [].forEach.call(doc.querySelectorAll(".pf"), function(el, i) { 
       var hdiff = ((pageh - el.getBoundingClientRect().height) * i) * -1; 
       el.style.transform = ["scale(",scale,",",scale,") translateY(",hdiff,"px)"].join(""); 
      }); 
      scaled = true; 
      } else if (scaled) { 
      [].forEach.call(doc.querySelectorAll(".pf"), function(el) { 
       el.style.transform = "scale(1,1) translateY(0px)"; 
      }); 
      scaled = false; 
      } 
    }, 250); 

    win.addEventListener('resize', scaleDown); 
    scaleDown(); 

})(window, document); 
</script> 

когда страница изменяет размер, если ширина пикселя страницы больше, чем ширина окна, он использует преобразование масштаба для масштабирования страницы вниз, так что он подходит. Если последующие классы .pf смежны, он пытается использовать translateY, чтобы тянуть их друг к другу (поскольку масштаб не изменяет высоту потока, мне пришлось взломать отрицательное смещение, чтобы они отображались рядом друг с другом.