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内容的高度为850px且iframe本身为550px，则iframe内容scrollHeight会错误地返回“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将它们拉向彼此（因为比例不会改变流高度，我不得不破解负偏移以使它们彼此相邻。< / p>

缩放iframe以适应内容（javascript）

1 个答案: