Question

我知道很多人都问过这个问题而且我已经尝试了所有的东西，但没有一个解决方案对我有用。我正在ServiceNow中创建一个前端门户，需要引入不同高度的多个iframe。我希望基于内容的iframe高度是动态的。

我正在使用一种似乎在这个网站上非常受欢迎的方法：

<div class="grey"> 
    <div class="container">
        <div class="row"> 
            <div class="fluidMedia">
             <iframe src="my-page" frameborder="0" ></iframe>


            </div>
         </div>
     </div>
 </div>

.fluidMedia {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.fluidMedia iframe {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}

尝试此操作后，我仍然需要滚动我的iframe，如屏幕截图所示：

有什么想法吗？

Answer 1

然后尝试类似的东西。首先在iframe中添加ID和onload，如下所示：

库

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>


<iframe src="my-page" frameborder="0" id="foo" onload="autoResize('foo')"></iframe>

我们在这里使用脚本。

function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
    }

    document.getElementById(id).height=(newheight) + "px";
    document.getElementById(id).width=(newwidth) + "px"; 
}

测试它，让我知道它是否适合你。

使iFrame动态调整高度

1 个答案: