如何将 iframe 的高度和宽度设置为 100%

Question

如何将 iframe 的高度和宽度设置为 100%

javascriptjqueryhtmlcssiframe

22

我需要完成以下任务:

我有一个高度为70像素的页眉内容和一个包装器的iframe。必须将iframe的高度和宽度设置为100％，且不带滚动条，除非内容加载时出现体内的滚动条，且内容大小超过了屏幕。
iframe的内容是来自同一域的另一个HTML页面。此外，iframe还需要根据响应式HTML页面进行缩放。

有人可以帮忙吗？

我不能使用以下内容:

Position:Fixed;（主要是由于我正在使用的侧边栏脚本）

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Bus Management System</title>
    <!-- Viewport meta tag to prevent iPhone from scaling our page -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">


     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>

     $(function(){

            var iFrames = $('iframe');

            function iResize() {

                for (var i = 0, j = iFrames.length; i < j; i++) {
                  iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
                }

                if ($.browser.safari || $.browser.opera) { 

                   iFrames.load(function(){
                       setTimeout(iResize, 0);
                   });

                   for (var i = 0, j = iFrames.length; i < j; i++) {
                        var iSource = iFrames[i].src;
                        iFrames[i].src = '';
                        iFrames[i].src = iSource;
                   }

                } else {
                   iFrames.load(function() { 
                       this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                   });
                }

            });
</script>


  </head>

    <style type="text/css" media="all">
        html, body, iframe {width:100%; height:100%;box-sizing:border-box; margin:0; padding:0; border:0;}
        body {border:4px solid green;}
        iframe {border:6px solid red;width:100%; height:100%;display:block;}
        #wrapper {border:2px solid blue; width:100%; height:100%;}

    </style>
    <body>
        <div style="height:50px; background-color:#000; color:#fff;">Header</div>

            <iframe src="http://www.google.com" style="width:100%; height:100%;" onLoad="calcHeight();"></iframe>

    </body>
</html>

- deepak

8个回答

4

这对我有用。

<iframe frameborder="0" height="490" scrolling="no" src="" width="735"></iframe>

- Milan Techglyphs

2

你能否在回答中添加更多的细节和上下文信息？请解释为什么这个方法适用于你。你的解决方案是否适用于所有屏幕宽度？ - Bernhard

width="100%" 也可以工作。例如：<iframe frameborder="0" height="490" scrolling="no" src="" width="100%"></iframe> - rtvalluri

2

vw单位适用于编程（已在Chrome和Firefox上测试）

iframe{
 width:100vw;
}

- Bob

0

我不确定你在问什么，但是我需要 iframe 根据其内容自适应大小。我的解决方案是当 iframe 改变大小时，让它向父级发送消息。

iframe 脚本

{
  const observer = new ResizeObserver(() => {
    window.parent.postMessage({
      width: document.body.scrollWidth,
      height: document.body.scrollHeight,
    });
  });
  observer.observe(document.body);
}

主页脚本

const iframeElem = document.querySelector('iframe');

window.addEventListener('message', (e) => {
  const {width, height} = e.data;
  iframeElem.style.width = `${width}px`;
  iframeElem.style.height = `${height}px`;
});

S.O 的破损被忽视的代码片段系统设置了权限，因此您无法基于 Blob 运行 iframes，但是这里有一个示例

https://jsfiddle.net/greggman/apkj8sh4/

- gman

0

通常情况下，您需要为 iframe 设置宽度和高度。如果内部内容更大，则必须使用滚动条。下面的脚本尝试通过动态调整加载的内容来调整 iframe 的大小。

您可以使用以下函数来使用 jQuery / JavaScript 设置自动高度。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>

     $(function(){

            var iFrames = $('iframe');

            function iResize() {

                for (var i = 0, j = iFrames.length; i < j; i++) {
                  iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
                }

                if ($.browser.safari || $.browser.opera) { 

                   iFrames.load(function(){
                       setTimeout(iResize, 0);
                   });

                   for (var i = 0, j = iFrames.length; i < j; i++) {
                        var iSource = iFrames[i].src;
                        iFrames[i].src = '';
                        iFrames[i].src = iSource;
                   }

                } else {
                   iFrames.load(function() { 
                       this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                   });
                }

            });
</script>

你的Iframe HTML应该像这样

<iframe  src="http://www.google.com"  class="iframe" scrolling="no" frameborder="0"></iframe>

- Anant Dabhi

嗨：我仍然遇到双滚动条的问题 - 我需要在这里做两件事 1. 我需要从主HTML中删除滚动条，因为body内有header = 70px导致了滚动条的出现 2. iframe还需要根据内容HTML进行缩放。抱歉，我也是新手。 - deepak

该脚本还会抛出一个未捕获的ReferenceError错误：$未定义。 - deepak

你需要添加jQuery库，使用<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>。 - Anant Dabhi

你的Iframe是同域还是不同域？ - Anant Dabhi

0

简单而干净。需要jQuery支持。来源：https://dev59.com/JXRC5IYBdhLWcg3wW_pk#3940802

稍作修改

                function iframeHeight() {
                    var newHeight = $(window).height();
                    var newWidth = $(window).width();
                    var buffer = 100;     // space required for any other elements on the page
                    var newIframeHeight = newHeight - buffer;

                    $('iframe.fop').css('height',newIframeHeight).css('width',newWidth);    //this will aply to all iframes on the page, so you may want to make your jquery selector more specific.
                }

                // When DOM ready
                $(function() {
                    window.onresize = iframeHeight;
                    iframeHeight();
                });

<iframe src="" target="_parent" width="100%" height="100%" class="fop"></iframe>

- Yash

0

我有一个来自YouTube的6:19比例的视频帧 -> 通过计算9/16 - 0.5625，乘以95vw（也可以设置为100vW）。

这是保持视频比例最好的方法。

@media all and (max-width: 730px) {
    iframe{
        width: 95vw !important;
        height: calc(95vw*0.56) !important;
    }
}
    iframe{
    margin:auto;
    display:block;
    width:685px;
    height:385px;
}

    <iframe id="video" allowfullscreen src="https://www.youtube.com/embed/5Mdy8nBBbQQ?autoplay=1"></iframe>

- aljaz-code

0

你可以尝试像这样做：

  iframe {
    width: 825px;   // you define your standar width and height
    height: 464px;
    @media screen and (max-width: 1000px){ // then for your responsive you do this or only this. 
      width: calc(84vw);
      height: calc(47vw)
    }  
  }

- user3352170

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 4dgaurav · Accepted Answer

仅使用CSS实现100%宽度、高度和响应式的解决方案

HTML

<div class="container">
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS（层叠样式表）

html,body {
    height:100%;
}
.h_iframe iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

演示

不使用position:absolute

CSS

html,body        {height:100%;}
.h_iframe iframe {width:100%; height:100%;}
.h_iframe {
    height: 100%;
}

DEMO 2

最后，这是破解方法：

现代浏览器现在支持：

width: calc(100% - 70px);

CSS（层叠样式表）

html,body {
    height:100%; 
    margin-top:0; 
    margin-bottom:0;
}
.h_iframe iframe {
    width:100%;
    height:calc(100% - 75px);
}
.h_iframe {
    height: 100%;
}
.element{
    width:100%;
    height:70px;
    background:red;
}

HTML

<div class="container">
    <div class="element">here it goes</div>
    <div class="h_iframe">
        <iframe  src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

最终演示