[英]Dynamically define iframe height based on window size (NOT CONTENT)
我发现了诸如如何在Firefox中动态调整iFrame大小的线程? 谈论基于远程内容调整iframe的大小; 但是,我还没有找到一种方法(在Firefox中)根据窗口大小设置iframe的高度。
其他浏览器都可以使用.body.scrollHeight
但Firefox似乎无法使用。 看到... http://jsfiddle.net/gjrowe/X63KR/
要查看具有自动调整大小功能的iframe,请查看此页面... http://jsfiddle.net/gjrowe/y2WCP/
它适用于Chrome等浏览器,但不适用于Firefox
这是我进行跨浏览器修复的工作...
我添加了此javascript函数...
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
然后我改变了...
var content_height=document.body.scrollHeight-100;
至...
var content_height=getDocHeight()-100;
您可以在http://jsfiddle.net/y2WCP/9/上看到它的运行情况
我不知道您是否要使用jQuery,但是使用jQuery我想我已经解决了您的问题。
// Header is 50px and footer is 50px; therefore, 100px is of screen height is used
// Define content_height and consider the 100px which has already been used
var content_height=document.body.scrollHeight-100;
//alert(content_height);
content_height = $(window).height() -110;
//alert(content_height);
// Set iframe height
document.getElementById('pdf_frame').style.height=content_height+"px";
// Reset iframe height after window resize
$(function(){
$(window).resize(function(){
content_height = $(window).height()-110;
//var content_height=document.body.scrollHeight-100;
document.getElementById('pdf_frame').style.height=content_height+"px";
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.