我有一个页面,我想在同一页面上显示多个幻灯片,但这对于JavaScript变量来说有点困难,所以我决定让每个幻灯片显示一个iframe。这工作得很好,但是现在iframe的响应能力引起了问题。Iframe 中的幻灯片是div 元素,将根据屏幕大小堆叠。现在的问题是 Iframe 没有变得更长。我试过:
<iframe src="Web.html" height="100%" frameborder="1" marginheight="0" marginwidth="0" scrolling="no"></iframe>
除了即使在调整大小之前也不会使 iframe 足够长。我的问题是,如何使 Iframe 与页面一样高,并且页面大小将调整?
尝试 Bootstarp Responsive embed。
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
这是这样的: http://getbootstrap.com/components/#responsive-embed
我使用 resizeIframe 函数找到了解决方案
<iframe src="Other.html" frameborder="0" scrolling="no" onload="resizeIframe(this);"></iframe>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}