我知道很多人都问过这个问题而且我已经尝试了所有的东西,但没有一个解决方案对我有用。我正在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,如屏幕截图所示:
有什么想法吗?
答案 0 :(得分:0)
然后尝试类似的东西。首先在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";
}
测试它,让我知道它是否适合你。