How to auto-size an iFrame? [duplicate]

后端未结

关注

 12  615

终归单人心

相关标签:

12条回答

傲寒

2020-11-27 11:05
Here is a dead simple solution that works on every browser and with cross domains:

First, this works on the concept that if the html page containing the iframe is set to a height of 100% and the iframe is styled using css to have a height of 100%, then css will automatically size everything to fit.

Here is the code:
```
<head>
<style type="text/css"> 
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>

<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe>
</body>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦毁少年i

2020-11-27 11:10
On any other element, I would use the scrollHeight of the DOM object and set the height accordingly. I don't know if this would work on an iframe (because they're a bit kooky about everything) but it's certainly worth a try.

Edit: Having had a look around, the popular consensus is setting the height from within the iframe using the offsetHeight:
```
function setHeight() {
    parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}
```
And attach that to run with the iframe-body's onLoad event.
0 讨论(0)
发布评论:

提交评论
- 加载中...

遇见更好的自我

2020-11-27 11:13

This is the easiest method i have found using prototype:

Main.html:

<html>
<head>


<script src="prototype.js"></script>

<script>
    function init() {
        var iframe = $(document.getElementById("iframe"));
        var iframe_content = $(iframe.contentWindow.document.getElementById("iframe_content"));
        var cy = iframe_content.getDimensions().height;
        iframe.style.height = cy + "px";
    }
</script>

</head>

<body onload="init()">


<iframe src="./content.html" id="iframe" frameBorder="0" scroll="no"></iframe>

<br>
this is the next line

</body>
</html>

content.html:

<html>
<head>
<script src="prototype.js"></script>


<style>
body {
    margin: 0px;
    padding: 0px;
}
</style>


</head>

<body>


<div id="iframe_content" style="max-height:200px;">
Sub content<br>
Sub content<br>
...
...
...
</div>


</body>
</html>

This seems to work (so far) in all the major browsers.

0 讨论(0)

盖世英雄少女心

2020-11-27 11:16
I found the solution by @ShripadK most helpful, but it does not work, if there is more than one iframe. My fix is:
```
function autoResizeIFrame() {
  $('iframe').height(
    function() {
      return $(this).contents().find('body').height() + 20;
    }
  )
}

$('iframe').contents().find('body').css(
  {"min-height": "100", "overflow" : "hidden"});

setTimeout(autoResizeIFrame, 2000);
setTimeout(autoResizeIFrame, 10000);
```
- $('iframe').height($('iframe').contents().find('body').height() + 20) would set the height of every frame to the same value, namely the height of the content of the first frame. So I am using jquery's height() with a function instead of a value. That way the individual heights are calculated
- + 20 is a hack to work around iframe scrollbar problems. The number must be bigger than the size of a scrollbar. The hack can probably be avoided but disabling the scrollbars for the iframe.
- I use setTimeout instead of setInterval(..., 1) to reduce CPU load in my case
0 讨论(0)
发布评论:

提交评论
- 加载中...
误落风尘

2020-11-27 11:17
In IE 5.5+, you can use the contentWindow property:
```
iframe.height = iframe.contentWindow.document.scrollHeight;
```
In Netscape 6 (assuming firefox as well), contentDocument property:
```
iframe.height = iframe.contentDocument.scrollHeight
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
[愿得一人]

2020-11-27 11:18
Oli has a solution that will work for me. For the record, the page inside my iFrame is rendered by javascript, so I'll need an infinitesimal delay before reporting back the offsetHeight. It looks like something along these lines:
```
    $(document).ready(function(){
        setTimeout(setHeight);
    });

    function setHeight() {
        alert(document['body'].offsetHeight);   
    }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

1 2 下一页

热议问题