缩放iframe以适应内容（javascript）

我正在尝试将iframe（相同域）的内容放入我网站上的预先存在的固定高度iframe中。

将内容动态加载到预先存在的iframe中，然后执行iframe的主体中的代码，该代码可以缩小或缩小整个高度/宽度（即缩小/缩小文档;长/宽文档缩小）。 缩放是使用CSS缩放完成的，直到我想到更好的方式。

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内容的高度为850px，iframe本身为550px，则iframe内容scrollHeight会错误地返回“550”。

我如何计算文档的实际滚动高度？

---

这是我最终做的。 .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将它们拉向彼此（因为缩放并不会改变流动高度，所以我必须修改一个负偏移以使它们彼此相邻。

链接地址: http://www.djcxy.com/p/89957.html

上一篇: zooming iframe to fit content (javascript)

下一篇: How to dynamically position and scale iframe on browser zoom