我正在尝试将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”。
如何计算文档的实际滚动高度?
答案 0 :(得分:0)
这就是我最终做的事情。 .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>