所有浏览器都支持 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 高度?
您可以使用框架集作为先前的答案状态,但如果您坚持使用 iFrame,以下 2 个示例应该可以工作:
<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 的滚动条!
创建全屏 iframe 的 3 种方法:
方法 1 - 视口百分比长度在支持的浏览器中,您可以使用视口百分比长度,例如高度:100vh。其中 100vh 代表视口的高度,同样 100vw 代表宽度。这里的例子 body { margin: 0; /* 重置默认边距 */ } iframe { display: block; /* iframe 默认是内联的 */ background: #000;边框:无; /* 重置默认边框 */ height: 100vh; /* 视口相关单位 */ width: 100vw; }
方法 2 - 固定定位 这种方法相当简单。只需设置固定元素的位置并添加 100% 的高度/宽度。此处示例 iframe { 位置:固定;背景:#000;边框:无;顶部:0;右:0;底部:0;左:0;宽度:100%;高度:100%; }
方法 3 对于最后一种方法,只需将 body/html/iframe 元素的高度设置为 100%。此处示例 html, body { height: 100%;边距:0; /* 重置 body 元素的默认边距 */ } iframe { display: block; /* iframe 默认是内联的 */ background: #000;边框:无; /* 重置默认边框 */ width: 100%;高度:100%; }
display: block
可以防止出现双滚动条
我遇到了同样的问题,我正在将 iframe 拉入 div。尝试这个:
<iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
高度设置为 100vh,代表视口高度。此外,宽度可以设置为 100vw,尽管如果源文件是响应式的(您的框架将变得非常宽),您可能会遇到问题。
1. 将您的 DOCTYPE 更改为不那么严格的东西。不要使用 XHTML;这很愚蠢。只需使用 HTML 5 doctype 就可以了:
<!doctype html>
2. 您可能需要确保(取决于浏览器)iframe 的父级具有高度。和它的父母。和它的父母。 ETC:
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>
iframe
src
与父页面位于同一域时才有效,否则您将在 contentWindow.document
上收到权限被拒绝错误。
身体{边距:0; /* 重置默认边距 */ } iframe { display: block; /* iframe 默认是内联的 */ background: #000;边框:无; /* 重置默认边框 */ height: 100vh; /* 视口相关单位 */ width: 100vw; }
<iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">
</iframe>
以下测试工作
<iframe style="width:100%; height:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" src="index.html" frameborder="0" height="100%" width="100%"></iframe>
除了 Akshit Soota 的回答:显式设置每个父元素的高度很重要,如果有的话,也包括表和列的高度:
<body style="margin: 0px; padding:0px; height: 100%; overflow:hidden; ">
<form id="form1" runat="server" style=" height: 100%">
<div style=" height: 100%">
<table style="width: 100%; height: 100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="left" height="100%">
<iframe style="overflow:hidden;height:100%;width:100%;margin: 0px; padding:0px;"
width="100%" height="100%" frameborder="0" scrolling="no"
src="http://www.youraddress.com" ></iframe>
</td>
你先添加css
html,body{
height:100%;
}
这将是html:
<div style="position:relative;height:100%;max-width:500px;margin:auto">
<iframe src="xyz.pdf" frameborder="0" width="100%" height="100%">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
这是一个很好的资源,效果很好,我用过几次。创建以下代码....
<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
这是一个简洁的代码。它确实依赖于 jquery 方法来查找当前窗口高度。在加载 iFrame 时,它将 iframe 的高度设置为与当前窗口相同。然后为了处理页面的大小调整,body 标签有一个 onresize 事件处理程序,它在文档被调整大小时设置 iframe 的高度。
<html>
<head>
<title>my I frame is as tall as your page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
<iframe id="iframe1" src="yourpage.html" style="width:100%;" onload="this.height=$(window).height();"></iframe>
</body>
</html>
这是一个工作示例:http://jsbin.com/soqeq/1/
要在 iframe 内获得没有滚动条的全屏 iframe,请使用以下 css。无需更多
iframe{
height: 100vh;
width: 100vw
}
iframe::-webkit-scrollbar {
display: none;
}
另一种构建流畅全屏 iframe 的方法:
页面加载时嵌入的视频会填满整个视口区域
登陆带有视频或任何嵌入内容的页面的好方法。您可以在嵌入视频下方添加任何其他内容,这些内容在向下滚动页面时会显示出来。
例子:
CSS 和 HTML 代码。
身体{边距:0;背景颜色:#E1E1E1; } 标题 { 宽度 : 100% ;高度:56vw;最大高度:100vh; } .embwrap { 宽度 : 100% ;高度:100%;显示:表格; } .embwrap .embcell { 宽度:自动;背景颜色:黑色;显示:表格-单元格;垂直对齐:顶部; } .embwrap .embcell .ifrwrap { 高度:100% ;宽度:100%;显示:内联表;背景颜色:黑色; } .embwrap .embcell .ifrwrap iframe { 高度:100% ;宽度:100%; }
只有这对我有用(但对于“同域”):
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"));
或者
<iframe .... onload="MakeIframeFullHeight(this);" ....
根据 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe,不再允许使用百分比值。但以下对我有用
<iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>
虽然 width:100%
有效,但 height:100%
无效。所以 window.innerHeight
已被使用。您还可以使用 css 像素作为高度。
您可以调用一个函数,该函数将在加载 iframe 时计算 iframe 的主体高度:
<script type="text/javascript">
function iframeloaded(){
var lastHeight = 0, curHeight = 0, $frame = $('iframe:eq(0)');
curHeight = $frame.contents().find('body').height();
if ( curHeight != lastHeight ) {
$frame.css('height', (lastHeight = curHeight) + 'px' );
}
}
</script>
<iframe onload="iframeloaded()" src=...>
不定期副业成功案例分享