如何根据内容的长度动态更改对象或iframe的长度 [英] How to dynamically change the length of an object or iframe based on the length of its content

问题描述

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

I'm working on a project where Web pages are composed of different fragments which are dynamically loaded with different types of objects. So for example, at a certain point a page might have 2 fragments, one that shows a video and another that shows some text, and at another time that same page might show 2 blocks of text. Changes in content depend on the user viewing it and because of that the same fragment (defined by and object tag or an iframe) might contain videos (mp4, avi, etc), or text (pdf, docx, txt, etc), or images, etc.

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

The problem I'm having is related to the content's size (specifically the length). Both the object and iframe tags are delimited by a bounding box which I need to resize according to the content's length. If the content is a 30 page long PDF, I need all 30 pages to be rendered in the Web page. I can't have the user scroll down to view the PDF's content, I need it to be a part of the Web page as seamlessly as possible.

找到答案这里似乎提供了一个可能的解决方案。我不知道JQuery但我可以学习。但是，我注意到这些示例中使用的内容始终是一个Web页面。在我的例子中，iframe的内容可以有许多不同的类型，我想知道JQuery是否可以用来确定不是网页的东西的大小。如果不能，任何人都可以建议解决我的问题吗？谢谢。

The answers found here seem to provide a possible solution. I don't know JQuery but I can learn. However, I noticed the content used in those examples is always a Web page. In my case, the iframe's content can be of many different types and I'd like to know if JQuery can be used to determine the size of something that's not a web page. If it can't, can anyone please suggest a solution to my problem? Thanks.

推荐答案

你将不得不使用jquery或javascript来动态设置iframe的高度，

you are going to have to use jquery or javascript to dynamically set the height of the 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;
}

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

there is a whole article Here That explains this code

这篇关于如何根据内容的长度动态更改对象或iframe的长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！