是否所有浏览器都支持iframe height=100% ?
我使用doctype作为:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在我的iframe代码中，如果我说
<iframe src="xyz.pdf" width="100%" height="100%" />
我的意思是它是否会取剩下的页面的高度(因为上面有另一个固定高度为50px的帧) 所有主流浏览器(IE/Firefox/Safari)都支持这个功能吗?
同样关于滚动条，即使我说scrolling="no"，我也能在Firefox中看到禁用的滚动条…如何完全隐藏滚动条并自动设置iframe高度?
当前回答
只有这对我有用(但对于“同一域”):
function MakeIframeFullHeight(iframeElement){
iframeElement.style.width = "100%";
var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height ); // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
if(margins=="") { margins=0; ifrD.body.style.margin="0px"; }
(function(){
var interval = setInterval(function(){
if(ifrD.readyState == 'complete' ){
iframeElement.style.height = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
setTimeout( function(){ clearInterval(interval); }, 1000 );
}
},1000)
})();
}
你可以使用任何一种:
MakeIframeFullHeight(document.getElementById("iframe_id"));
or
<iframe .... onload="MakeIframeFullHeight(this);" ....
其他回答
创建全屏iframe的3种方法:
Approach 1 - Viewport-percentage lengths In supported browsers, you can use viewport-percentage lengths such as height: 100vh. Where 100vh represents the height of the viewport, and likewise 100vw represents the width. Example Here body { margin: 0; /* Reset default margin */ } iframe { display: block; /* iframes are inline by default */ background: #000; border: none; /* Reset default border */ height: 100vh; /* Viewport-relative units */ width: 100vw; } <iframe></iframe>
方法2 -固定定位 这种方法相当简单。只需设置固定元素的位置，并添加100%的高度/宽度。 例子 iframe { 位置:固定; 背景:# 000; 边界:没有; 上图:0;右:0; 底部:0;左:0; 宽度:100%; 高度:100%; ｝ < iframe > < / iframe >
方法3 对于最后一种方法，只需将body/html/iframe元素的高度设置为100%。 例子 Html, body { 高度:100%; 保证金:0;/*重置body元素*/的默认边距 ｝ iframe { 显示:块;/* iframe默认内联*/ 背景:# 000; 边界:没有;/*重置默认边框*/ 宽度:100%; 高度:100%; ｝ < iframe > < / iframe >
<iframe src="" style=" font - family:宋体;位置:绝对的;边界:没有“> < / iframe >
你可以使用frameset作为前面的答案，但如果你坚持使用iFrames，以下两个例子应该工作:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
另一个:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
隐藏滚动2个替代方案如上所示:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
用第二个例子来破解:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
为了隐藏iFrame的滚动条，父元素被设置为overflow: hidden来隐藏滚动条，iFrame的宽度和高度被设置为150%，这迫使滚动条在页面之外，由于主体没有滚动条，人们可能不会期望iFrame超出页面的边界。这将隐藏iFrame的全宽度滚动条!
1. 将DOCTYPE更改为不那么严格的内容。不要使用XHTML;这是愚蠢的。只要使用HTML 5文档类型就可以了:
<!doctype html>
2. 您可能需要确保(取决于浏览器)iframe的父对象有一个高度。和它的父结点。和它的父结点。等:
html, body { height: 100%; }
这对我来说非常有用(除非iframe内容来自同一个域):
<script type="text/javascript">
function calcHeight(iframeElement){
var the_height= iframeElement.contentWindow.document.body.scrollHeight;
iframeElement.height= the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>
