iframe 移动响应式

Question

我有一个页面，我希望在同一页面上显示多个幻灯片，但事实证明这对于 JavaScript 变量有点困难，因此我决定将每个幻灯片都设为 iframe。这工作得很好，但是现在 iframe 的响应性正在引起问题。 Iframe 中的幻灯片是 div 元素，将根据屏幕大小进行堆叠。现在的问题是 iframe 不会变长。我试过了：

<iframe src="Web.html"  height="100%" frameborder="1" marginheight="0" marginwidth="0" scrolling="no"></iframe>

除了即使在调整大小之前也无法使 iframe 足够长。我的问题是，如何使 iframe 与页面一样高，并且页面会调整大小？

Answer 1

尝试 Bootstarp 响应式嵌入。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

这里是：http://getbootstrap.com/components/#responsive-embed

Answer 2

我找到了使用 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';

}