1

I've got a iframe with pdf file:

<iframe src="pdf/sample.pdf"></iframe>

How to set that the iframe is the same height as the pdf file, without scrollbars?

Daniel Koczuła
  • 940
  • 3
  • 12
  • 25
  • http://stackoverflow.com/questions/247128/how-to-auto-size-an-iframe, http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content – Reflective Nov 04 '12 at 12:59

3 Answers3

2

If you want to display the PDF without scrollbars, you can do this by passing parameters in the URL. Adobe has documented this here: http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf

Try this:

<iframe src="pdf/sample.pdf#view=fit"></iframe>

You are not exactly setting the height of the iframe to fit the PDF, but it is probably the most robust solution since it is browser-independent and doesn't require JavaScript.

Here is an update after Daniel's comment.

I created a test HTML as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Untitled Page</title>
</head>
<body>
   <iframe src="http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf#view=fit&toolbar=0&navpanes=0"
      width="300px" height="400px"></iframe>
</body>
</html>

This is how it looks in Chrome:

enter image description here

This is as expected.

Note that I also turned off the toolbar and the navpane so there is room for the page.

Frank
  • 3,396
  • 1
  • 23
  • 35
  • 1
    Yes, but You've set the height to 400, and I wish that the pdf is displayed in the iframe without the scrollbar. So when I will to view the pdf I have to scroll down with the browser scrollbar. Now you understand what I mean? – Daniel Koczuła Nov 08 '12 at 23:17
  • @Daniel The scrollbar you see is not that of the iFrame but that of the PDF viewer. It allows you to scroll to next pages. I am quite sure that even this can be solved by setting the page layout to single page or so using the URL parameters. I provided a link to the reference. – Frank Nov 14 '12 at 07:28
  • @FrankRem but I think that's the point. We want a way of somehow getting the PDF view to such a height in the DOM so that the PDF view itself has no scrollbar. You would then scroll on the HTML page itself to view the other pages, which would already be shown off-screen (instead of hidden within the PDF view). The question is more relevant to PDF's in iframes specifically, as opposed to iframes in general – Hashbrown Sep 04 '13 at 00:52
  • This would require you to calculate the sum of all page heights (plus page spacing). I am not aware of a method to achieve this. – Frank Sep 09 '13 at 12:50
0

You can do it simply using the method I've explained on my facebook post https://www.facebook.com/antimatterstudios/posts/10151007211674364

Do you have an IFrame, which you want to automatically set the height of because you're hosting a page from another website in yours.

Well, unfortunately the IFrame cannot take the height of the content you are loading and unless you put a height, it'll show either the default height, or no height at all. This is annoying.

I have the solution for you, it'll only work on recent, standard supporting browsers, but also works in IE8 too, so for about 99% of you it's perfect.

The only problem is you need to insert a javascript inside the iframe, which is easy if the content you are loading belongs to you, you can just open the content you're loading and put the javascript in the content.

In your website, you need a piece of javascript which can "receive a message from the IFrame", like this

jQuery(document).ready(function(){
    jQuery(window).bind("message",function(e){
        data = e.data || e.originalEvent.data;
        jQuery("iframe.newsletter_view").height(data.height);
    });
});

in your IFrame content, add this at the very bottom, probably it's ok to just do something like "$template.$javascript" using PHP or something, even if the javascript is not inside the tag

<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    parent.postMessage({
        height:$(document.body).height()+50+"px"
    },"*");
});
</script>

Obviously I am using jquery, you dont have to, it's just easier and probably you are using it, so save yourself the hassle.

if you do that, when the iframe loads, it'll send a signal back to the parent window, which will resize the iframe based on the length of the content :)

I'm sure you can figure out how to alter the little things, but thats the method I'm using

Christopher Thomas
  • 3,454
  • 3
  • 29
  • 41
  • alternatively, you can open the content and just past the javascript into the bottom of what you want to display in the iframe, I should have made that clear but after reading back my answer, I realise that I didnt say that exactly. – Christopher Thomas Dec 30 '12 at 19:47
0

My solution

$(document).ready(function(){
  var width = $(window).width();
  var height = $(window).height();

  $('#objFile').attr('style', 'width: ' + width + 'px; height: ' + height + 'px;');
});

<object data="myFile.pdf" type="application/pdf" id="objFile"></object>
Danny Angelus
  • 1