使 iFrame 动态调整高度答案

【问题标题】：Making iFrames dynamically resize heights使 iFrame 动态调整高度
【发布时间】：2016-09-14 19:21:33
【问题描述】：

我知道很多人都问过这个问题，我已经尝试了所有方法，但没有一个解决方案对我有用。我正在 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 上滚动，如屏幕截图所示：

有什么想法吗？

【问题讨论】：

所有这些 iframe 是否都与主页（即包含这些 iframe 的页面）在同一个域中？
不管怎样，看看我的回答here，如果它对你有帮助，请点赞，如果它没有发表评论，我会回复你。
我正在使用自动调整大小，但在 jquery 中，如果在 jquery 中执行此自动调整大小不是问题，我可以分享它，让我知道。
@grec0o，我不介意看看它，看看我是否可以应用它。在这一点上，我愿意尝试任何事情。谢谢！

标签： javascript html css iframe

【解决方案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"; 
}

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

【讨论】：

您还添加了库？我编辑代码并添加库，只需将其添加到头部即可。
是的，我添加了库，但它仍然无法正常工作......在我上面的代码中，我将 FluidMedia div 和 iframe 放在其他三个 div 中是否重要？
不，应该没有问题，用一个简单的 iframe 在 div 中测试一下