Set auto height for iframe

2019-08-23 03:39发布

站内问答 / 移动开发
1494 3 5

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?

3条回答
冷血范
2楼-- · 2019-08-23 04:05

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.

查看更多
0人赞 添加讨论(0) 举报
贼婆χ
3楼-- · 2019-08-23 04:12

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

查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
4楼-- · 2019-08-23 04:15

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)