Iframe 移动响应性



我有一个页面,我想在同一页面上显示多个幻灯片,但这对于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';

}

相关内容

  • 没有找到相关文章

最新更新