如何根据对象或iframe的内容长度动态更改其长度

Question

我正在一个项目中，Web页面由不同的片段组成，这些片段动态地加载了不同类型的对象。 因此，例如，某个页面上可能有2个片段，一个片段显示一个视频，另一个片段显示一些文本，而另一时间同一页面上可能显示2个文本块。 内容的更改取决于用户查看内容，因此，相同的片段（由和对象标记或iframe定义）可能包含视频（mp4，avi等）或文本（pdf，docx，txt等），或者图片等

我遇到的问题与内容的大小（特别是长度）有关。 对象标记和iframe标记都由一个边界框定界，我需要根据内容的长度调整其大小。 如果内容是30页长的PDF，那么我需要在Web页中呈现所有30页。 我不能让用户向下滚动来查看PDF的内容，我需要它尽可能无缝地成为Web页面的一部分。

此处找到的答案似乎提供了可能的解决方案。 我不了解JQuery，但我可以学习。 但是，我注意到这些示例中使用的内容始终是网页。 就我而言，iframe的内容可以是许多不同的类型，我想知道是否可以使用JQuery来确定不是网页的内容的大小。 如果不能，请问有人可以提出解决我问题的方法吗？ 谢谢。

Answer 1

您将必须使用jquery或javascript动态设置iframe的高度，

这些应该工作

// For other good browsers.
$('iframe').load(function() {
  this.style.height =
  this.contentWindow.document.body.offsetHeight + 'px';
});

// Safari and Opera need a kick-start.
for (var i = 0, j = iFrames.length; i < j; i++) {
  var iSource = iFrames[i].src;
  iFrames[i].src = '';
  iFrames[i].src = iSource;
}

有一整篇文章在这里这也解释了这段代码