Fatal编程技术网
  • javascript/
  • Javascript 全屏幕iframe，高度为100%

Javascript 全屏幕iframe，高度为100%

javascript html css iframe

Javascript 全屏幕iframe，高度为100%,javascript,html,css,iframe,html-frames,Javascript,Html,Css,Iframe,Html Frames,是否所有浏览器都支持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%" /&

是否所有浏览器都支持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高度？

您可以使用frameset作为前面的回答状态，但如果您坚持使用iframe，以下两个示例应该可以工作：

<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的滚动条，将父级设置为“溢出：隐藏”以隐藏滚动条，并且iFrame设置为高达150%的宽度和高度，这将迫使滚动条位于页面之外，并且由于主体没有滚动条，因此人们可能不希望iFrame超出页面边界。这将隐藏iFrame的全宽滚动条

1。将DOCTYPE更改为不太严格的类型。不要使用XHTML；这很愚蠢。只需使用HTML 5 doctype，您就可以：

<!doctype html>
这对我来说非常有效（仅当iframe内容来自同一个域时）：


函数calcHeight（iframeElement）{
var the_height=iframelement.contentWindow.document.body.scrollHeight；
iframeElement.height=_高度；
}
除了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>
下面是一个简明的代码。它确实依赖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>


我的I框架和你的页面一样高
下面是一个工作示例：

3种创建全屏
iframe
的方法：
  • 方法1- 在中，您可以使用诸如
    高度：100vh

    其中
    100vh
    表示视口的高度，同样
    100vw
    表示宽度

    正文{
保证金：0；/*重置默认保证金*/
}
iframe{
display:block；/*默认情况下，iframe是内联的*/
背景：#000；
边框：无；/*重置默认边框*/
高度：100vh；/*视口相对单位*/
宽度：100vw；
}
    我遇到了同样的问题，我将iframe拉入div。请尝试以下操作：

    <iframe src="http://stackoverflow.com/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:100vh;"></iframe>
    高度设置为100vh，表示视口高度。此外，宽度可以设置为100vw，但如果源文件响应速度快，则可能会遇到问题（您的帧将变得非常宽）。

    构建流体全屏的另一种方法
    iframe
    ：
    加载页面时，嵌入式视频将填充整个
    视口
    区域 对于带有视频或任何嵌入内容的登录页面，这是一种不错的方法。您可以在下面嵌入视频的任何附加内容，当向下滚动页面时会显示这些内容

    例子： CSS和HTML代码

    正文{
保证金：0；
背景色：#e1e1；
}
标题{
宽度：100%；
身高：56vw；
最大高度：100vh；
}
embwrap先生{
宽度：100%；
身高：100%；
显示：表格；
}
.embwrap.embcell{
宽度：自动；
背景色：黑色；
显示：表格单元格；
垂直对齐：顶部；
}
.embwrap.embcell.ifrwrap{
身高：100%；
宽度：100%；
显示：内联表；
背景色：黑色；
}
.embwrap.embcell.ifrwrap iframe{
身高：100%；
宽度：100%；
}
    
Lorem ipsum dolor sit amet，是一位杰出的献身者。两个是洛雷姆·奥奇，一个是朗卡斯，一个是泰勒斯·诺，一个是法雷特拉·康斯奎特·里索斯
    
毛里斯·阿利奎特·埃格斯塔斯·奥迪奥，坐在阿梅特·萨吉蒂·泰勒斯权杖旁。毛里斯·维勒·图尔皮斯（mauris vel turpis）或瓦纳（ornare placerat）非维勒·普卢斯（non-vel purus）的绒毛。罗博蒂斯的塞德
    首先添加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>

    
您的浏览器不支持iFrame

    这是一个很好的资源，在我使用它的几次中，效果非常好。创建以下代码

    <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>

    
.embed容器{位置：相对；填充底部：56.25%；高度：0；溢出：隐藏；最大宽度：100%；}
.embed container iframe、.embed container object、.embed container embed{位置：绝对；顶部：0；左侧：0；宽度：100%；高度：100%；}

    正文{
保证金：0；/*重置默认保证金*/
}
iframe{
display:block；/*默认情况下，iframe是内联的*/
背景：#000；
边框：无；/*重置默认边框*/
高度：100vh；/*视口相对单位*/
宽度：100vw；
}

    只有这一点对我有效（但对“同一领域”）：

    您可以使用：

    MakeIframeFullHeight(document.getElementById("iframe_id"));
    或

    根据，不再允许使用百分比值。
但是下面的方法对我有效
    

    <iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></iframe>

    

    

    
虽然
    width:100%
    有效，但
    height:100%
    无效。因此，使用了
    window.innerHeight
    。也可以使用css像素表示高度
    
工作代码：工作地点：

    以下测试工作
    

    <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>

    

    

    您可以调用一个函数，该函数将在iframe启动时计算iframe的主体高度

    MakeIframeFullHeight(document.getElementById("iframe_id"));

    

    <iframe .... onload="MakeIframeFullHeight(this);" ....

    

    <iframe width="100%" height="this.height=window.innerHeight;" style="border:none" src=""></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>

    

    <iframe src="http://youraddress.com" style="width: 100%; height: 100vh;">

</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=...>

    

    iframe{
            height: 100vh;
            width: 100vw
        }
    
    iframe::-webkit-scrollbar {
        display: none;
    }