Resize iFrame Content Via JavaScript

Question

I am wondering if theres some way to make it so that if there is a bunch of content in an iFrame it will just resize the document essentially so it fits. Making all the content inside the iFrame smaller. To clarify I want to resize the content, not the iFrame's size itself.

Any ideas how I would do this?

I have tried out some stuff but so far no luck.

Script:

<script type="text/javascript">
function autoResize(id){
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
        newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(id).height= (newheight) + "px";
    document.getElementById(id).width= (newwidth) + "px";
}
</script>

iFrame:

<iframe id="iframehtml" style="width:100%;height:100%;" onLoad="autoResize('iframe1');"></iframe>

By the way the reason there is no src set for the iFrame is because I have it in JavaScript so when you click a a button it will edit the html of the iFrame via jQuery.

DarthTux · Accepted Answer · 2013-11-05 00:37:31Z

1

You can use load event to resize iframe

var iframe = document.getElementByID('your-iframe');
iframe.addEventListener('load', function() {
  iframe.style.height = iframe.contentWindow.document.body.offsetHeight + 'px';
})

answered Nov 5, 2013 at 0:37

DarthTux

1561 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2812028 Over a year ago

Check my comment on aruuu's answer :)

unclemeat · Accepted Answer · 2013-11-05 00:33:18Z

0

You should be able to achieve this using jQuery .contents() -

assuming id is the id of the element you wish to change within the iframe:

var frame = $('#iframehtml')
frame.contents().find(id).width = (newheight) + "px";

See http://forum.jquery.com/topic/changing-elements-in-an-iframe

answered Nov 5, 2013 at 0:33

unclemeat

5,2075 gold badges32 silver badges55 bronze badges

6 Comments

user2812028 Over a year ago

The iFrame still has scroolbars when I click that.

unclemeat Over a year ago

What is the content within the iframe? Is id the id of the iframe itself, or the id of the element you want to change within the iframe?

user2812028 Over a year ago

Well, there isn't actually a source of the iFrame, thats the issue. As I stated the content in the iFrame is actually just set using .contents().html('test') for example. Its not actually a source. Thats why I don't believe I can use a load function.

unclemeat Over a year ago

why are you using .contents.html('test') instead of $('#iframehtml').src = 'test'?

user2812028 Over a year ago

That doesn't make much sense at all.

|

Collectives™ on Stack Overflow

Resize iFrame Content Via JavaScript

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related