Question

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.

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.

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.

Answer 1

you are going to have to use jquery or javascript to dynamically set the height of the iframe ,

these should work

// 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