Set auto height for iframe

2019-08-23 03:45发布

站内文章 / 前沿技术
22 0 0

问题:

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?

回答1:

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:

This is as expected.

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



回答2:

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



回答3:

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>


标签： pdf iframe height
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~