Adjust width and height of iframe to fit with content in it

Question

I need a solution for auto-adjusting the width and height of an iframe to barely fit its content. The point is that the width and height can be changed after the iframe has been loaded. I guess I need an event action to deal with the change in dimensions of the body contained in the iframe.

Linnlinnaeus

Angular iFrame Auto-Height: gitlab.com/reduardo7/angular-iframe-auto-height – Ossein

The accepted answer does not work. Try https://mcmap.net/q/66131/-adjust-width-and-height-of-iframe-to-fit-with-content-in-it – Tidewater

getbootstrap.com/docs/4.0/utilities/embed After a lot of research, it dawned on me, this is not a unique problem, I bet Bootstrap handles it. Lo and behold… – Melodimelodia

if you control the iframe source, then you're in luck solutions suggested below may work or you can explore things like - github.com/davidjbradshaw/iframe-resizer in case you're use case has iframe source which you don't control, there's no solution for it, atleast i couldn't find it – Stichter

Answer 1

<script type="application/javascript">

function resizeIFrameToFitContent( iFrame ) {

    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}

window.addEventListener('DOMContentLoaded', function(e) {

    var iFrame = document.getElementById( 'iFrame1' );
    resizeIFrameToFitContent( iFrame );

    // or, to resize all iframes:
    var iframes = document.querySelectorAll("iframe");
    for( var i = 0; i < iframes.length; i++) {
        resizeIFrameToFitContent( iframes[i] );
    }
} );

</script>

<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>

Insistence

Not standards compliant, but by far the most easy way to do this. – Vanburen

I don't know what do u mean with Not standards compliant? – Insistence

@StoneHeart: yes, it's cross browser. The code is non-standard compliant because of contentWindow property, which isn't defined in DOM spec. In DOM spec exists property called contentDocument, but Internet Explorer 6 (and 7?) doesn't support it. The contentWindow property can be used instead and it's implemented in all common browsers (Gecko, Opera, Webkit, IE). – Chintz

BTW. the scrollHeight property - IIRC - also isn't standard compliant, but is also supported by all common browsers. You can use offsetHeight or other properties instead, but scrollHeight gives best results – Chintz

What's the use of if(document.getElementById) ? – Dialectics

Also don't forget it's not cross domain. Reason of which it's getting a kind of Error: Permission denied to access property 'document' if the domain is different. A solution can be found here – Covariance

did not work for ff 16.01... firebug reports that contentWindow does not exist or it's undefined. – Ician

For IE9 , try frame.style.height= (newheight) + "px" and frame.style.width= (newwidth) + "px"; – Perceptible

Keep in mind a lot of content will not fully load for several minutes, or "never", so in some cases the onLoad will appear to never fire. This happens for any content that is "by design" to not respond quickly to certain requests, like the "polling" design Facebook uses for auto-updates. It happens with more content than you might think (learning this the hard way trying to use this design for a browser-based email client that display HTML email in an iFrame). – Higdon

If you don't need to support older browsers, sending messages in between the windows is perhaps a cleaner solution: https://mcmap.net/q/66132/-cross-domain-iframe-resizer/… – Tishatishri

Why did you assign the variables newheight and newwidth inside of a conditional? When would document.getElementById return false, 0, undefined, or null? – Huron

The conditional is not only useless but in the rare circumstance it's intended for is guaranteed to cause problems. Why are you checking to see if a method exists and then using the method outside of the check?? – Dosser

This sets the height correctly for me, but the width always stays at its original 100%. Both Chrome and Firefox. Anyone else experience this? – Tachylyte

Why are there spaces before .body.scrollHeight and .body.scrollWidth? – Earphone

How to set iFrame width for disabled JavaScript? If I set it inside of the iFrame element or via CSS your script doesn't resize anymore. – Earphone

That only applies if the actual iFrame height is smaller than defined. – Earphone

I think you meant DOMContentLoaded, since DOMContentReady doesn't seem to be a thing: developer.mozilla.org/en-US/… – Mathematics

@mheiber that is correct. I am really surprised that the code does not work with the typo, but has 204 updates - especially since this is a code-only answer – Bounded

Inside the iframe if I have a <div> with css "display: none" and change it by "display: block" it does not work. How to resize iframe when <div> changes from "block to none" or "none to block"? – Playlet

This answer does not work. Try https://mcmap.net/q/66131/-adjust-width-and-height-of-iframe-to-fit-with-content-in-it – Tidewater

@StevenShaw: Thank you, mate, I had to cut through so much garbage until I found your link! – Arleta

This did not work for MS Edge, for me. I switched to the excellent iframe-resizer library: github.com/davidjbradshaw/iframe-resizer – Aleris

This doesn't account for margin that might be applied to the iframe's document. – Impractical

You're gonna want e.g. ...document.body.parentElement.scrollHeight if you want to include all the page margins and padding. cc @Impractical – Matlock

Neither this solution or the one below work in any browser today. – Mcevoy

In 2022, we may use iFrame.contentWindow.top.document.documentElement.scrollHeight instead. – Calica

Answer 2

one-liner solution for embeds: starts with a min-size and increases to content size. no need for script tags.

<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>

Pansophy

Run code snippet doesn't work with Safari 9.1.1 maybe include SO problem? – Checkerbloom

It is not cross domain. Maybe the server needs to add some headers to the framed page? – Anestassia

All answers here which mention scrollHeight/scrollWidth should be adjusted a bit to take body margins into account. Browsers apply default nonzero margins for documents' body element (and it's also applicable to content loaded into frames). The working solution I found is to add this: parseInt(window.getComputedStyle(this.contentDocument.body).margin. – Transact

@Transact there could be elements inside the document with a margin greater than that of the body, which is also not accounted for in your solution. – Impractical

@Transact Use body.parentElement.scrollHeight instead of body.scrollHeight (same for width) and it'll include document margins and stuff. It's the margins/padding of the top-level html element that end up excluded if you use body. – Matlock

Neither this solution or the one above work in any browser today. – Mcevoy

Answer 3

Cross-browser jQuery plug-in.

Cross-bowser, cross domain library that uses mutationObserver to keep iFrame sized to the content and postMessage to communicate between iFrame and host page. Works with or without jQuery.

Paleoclimatology

The iframe-resizer library is the most robust solution. – Miscarriage

You need to own both iframes for this @Miscarriage – Helsie

Answer 4

All solutions given thus far only account for a once off resize. You mention you want to be able to resize the iFrame after the contents are modified. In order to do this, you need to execute a function inside the iFrame (once the contents are changed, you need to fire an event to say that the contents have changed).

I was stuck with this for a while, as code inside the iFrame seemed limited to the DOM inside the iFrame (and couldn't edit the iFrame), and code executed outside the iFrame was stuck with the DOM outside the iFrame (and couldn't pick up an event coming from inside the iFrame).

The solution came from discovering (via assistance from a colleague) that jQuery can be told what DOM to use. In this case, the DOM of the parent window.

As such, code such as this does what you need (when run inside the iFrame) :

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#IDofControlFiringResizeEvent").click(function () {
            var frame = $('#IDofiframeInMainWindow', window.parent.document);
            var height = jQuery("#IDofContainerInsideiFrame").height();
            frame.height(height + 15);
        });
    });
</script>

Lily

What would be the full code for this? I assume the script goes in the iframe html? – Cryoscopy

This is the full code, and yes, it runs inside the iFrame's HTML. The "window.parent.document" part specifies that the jQuery selector should use the DOM of the parent document, and not the document you are in (which is inside the iFrame). – Lily

This works beautifully if the parent document and document in the iframe are both from the same domain. If they aren't (or, in chrome, if they're both local files), then browsers' "same origin" security policies kick in and it prevents the iframe contents from modifying the parent doc. – Coloquintida

For anyone trying to make something like this work cross-domain, look into window.postMessage (IE8+) and be aware that you'll need custom scripts on both the host (parent) and the source (within iframe) documents. jQuery postmessage plugin might help. Since you'll need scripts on the host and source, it might be easier to just have the host load the content by AJAX using JSON-P. – Coloquintida

How to fire the event automatically instead of jQuery("#IDofControlFiringResizeEvent").click(function ()? – Earphone

Answer 5

If the iframe content is from the same domain this should work great. It does require jQuery though.

$('#iframe_id').load(function () {
    $(this).height($(this).contents().height());
    $(this).width($(this).contents().width());
});

To have it resize dynamically you could do this:

<script language="javaScript">
<!--
function autoResize(){
    $('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>

Then on the page that the iframe loads add this:

<script language="javaScript">
function resize()
{
    window.parent.autoResize();
}

$(window).on('resize', resize);
</script>

Optician

are there any simple ways of doing this when the origin is from a different domain? – Reardon

This is returning errors on jQuery 3.6.0 – Sara

Answer 6

Here is a cross-browser solution if you don't want to use jQuery:

/**
 * Resizes the given iFrame width so it fits its content
 * @param e The iframe to resize
 */
function resizeIframeWidth(e){
    // Set width of iframe according to its content
    if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
        e.width = e.contentWindow.document.body.scrollWidth;
    else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
        e.width = e.contentDocument.body.scrollWidth + 35;
    else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
        e.width = e.contentDocument.body.offsetWidth + 35;
}

Prefabricate

That's strange. For me it calculates very weird width of iframe. contents width is 750 and it calculates it as 300. Do You have ideas why? – Rodie

I played with this code (adding in height options). If I set the iFrame height at 100%, it restricts it to about 200px. If I set iFrame height at 600px, it sticks with that. @RobertJagoda did you get a solution to this? – Euonymus

Answer 7

After I have tried everything on the earth, this really works for me.

index.html

<style type="text/css">
html, body{
  width:100%;
  height:100%;
  overflow:hidden;
  margin:0px;   
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>

Zaslow

it says: Uncaught TypeError: $ is not a function at autoResize ((index):200) at HTMLIFrameElement.onload ((index):204) – Candlenut

@Michael Rogers There is a conflict with $ or you forget to include the jQuery.js file. Use a generic function #6110347 or replace $ with jQuery – Zaslow

Look like I'll need an off-world solution because this didn't work. – Injurious

Answer 8

Context

I had to do this myself in a context of a web-extension. This web-extension injects some piece of UI into each page, and this UI lives inside an iframe. The content inside the iframe is dynamic, so I had to readjust the width and height of the iframe itself.

I use React but the concept applies to every library.

My solution (this assumes that you control both the page and the iframe)

Inside the iframe I changed body styles to have really big dimensions. This will allow the elements inside to lay out using all the necessary space. Making width and height 100% didn't work for me (I guess because the iframe has a default width = 300px and height = 150px)

/* something like this */
body {
  width: 99999px;
  height: 99999px;
}

Then I injected all the iframe UI inside a div and gave it some styles

#ui-root {
  display: 'inline-block';     
}

After rendering my app inside this #ui-root (in React I do this inside componentDidMount) I compute the dimensions of this div and sync them to the parent page using window.postMessage:

let elRect = el.getBoundingClientRect()
window.parent.postMessage({
  type: 'resize-iframe',
  payload: {
    width: elRect.width,
    height: elRect.height
  }
}, '*')

In the parent frame I do something like this:

window.addEventListener('message', (ev) => {
  if(ev.data.type && ev.data.type === 'resize-iframe') {
    iframe.style.width = ev.data.payload.width + 'px'
    iframe.style.height = ev.data.payload.height + 'px'
  }
}, false)

Herson

Answer 9

I am using this code to autoadjust height of all iframes (with class autoHeight) when they loads on page. Tested and it works in IE, FF, Chrome, Safari and Opera.

function doIframe() {
    var $iframes = $("iframe.autoHeight"); 
    $iframes.each(function() {
        var iframe = this;
        $(iframe).load(function() {
            setHeight(iframe);
        });
    });
}

function setHeight(e) {
  e.height = e.contentWindow.document.body.scrollHeight + 35;
}

$(window).load(function() {
    doIframe();
});

Vestigial

What is this magic 35 you are adding? For which browser and OS did you measure it? – Limburg

Now I really do not know why I added 35 pixels. But I can certainly tell you that I tested it on FF, IE (7, 8, 9) & Chrome and I has worked just fine. – Vestigial

I think 35 is just the scroll-bar thickness – Crackup

I had to tweak this a bit to get it to work - called setHeight(iframe); directly (removed the $(iframe).load() wrapper around it. – Thaler

The magic 35 pixels added are to take into account the iframe padding. I'd add that the iframe should contain no padding the content of the iframeshould take care of this. – Cathern

Answer 10

This is a solid proof solution

function resizer(id)
{

var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;

var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;

}

the html

<IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>

Redeemable

First thank for that, it's a long time you post this. But the string value "px" is missing at the end of your last two instructions to make it work :) document.getElementById(id).style.height=height + "px"; document.getElementById(id).style.width=width + "px"; – Waterish

Answer 11

If you can control both IFRAME content and parent window then you need the iFrame Resizer.

This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content. It provides a range of features to address the most common issues with using iFrames, these include:

• Height and width resizing of the iFrame to content size.
• Works with multiple and nested iFrames.
• Domain authentication for cross domain iFrames.
• Provides a range of page size calculation methods to support complex CSS layouts.
• Detects changes to the DOM that can cause the page to resize using MutationObserver.
• Detects events that can cause the page to resize (Window Resize, CSS Animation and Transition, Orientation Change and Mouse events).
• Simplified messaging between iFrame and host page via postMessage.
• Fixes in page links in iFrame and supports links between the iFrame and parent page.
• Provides custom sizing and scrolling methods.
• Exposes parent position and viewport size to the iFrame.
• Works with ViewerJS to support PDF and ODF documents.
• Fallback support down to IE8.

Inchworm

Answer 12

I have been reading a lot of the answers here but nearly everyone gave some sort of cross-origin frame block.

Example error:

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

The same for the answers in a related thread:

Make iframe automatically adjust height according to the contents without using scrollbar?

I do not want to use a third party library like iFrame Resizer or similar library either.

The answer from @bboydflo is close but I'm missing a complete example. https://mcmap.net/q/66131/-adjust-width-and-height-of-iframe-to-fit-with-content-in-it

I'm using width="100%" for the iframe but the code can be modified to work with width as well.

This is how I solved setting a custom height for the iframe:

Embedded iframe:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="description"
          content="Web site" />
    <title>Test with embedded iframe</title>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <iframe id="ifrm" src="https://localhost:44335/package/details?key=123" width="100%"></iframe>
    <script type="text/javascript">
        window.addEventListener('message', receiveMessage, false);

        function receiveMessage(evt) {
            console.log("Got message: " + JSON.stringify(evt.data) + " from origin: " + evt.origin);
            // Do we trust the sender of this message?
            if (evt.origin !== "https://localhost:44335") {
                return;
            }

            if (evt.data.type === "frame-resized") {
                document.getElementById("ifrm").style.height = evt.data.value + "px";
            }
        }
    </script>
</body>
</html>

iframe source, example from Create React App but only HTML and JS is used.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="description"
          content="Web site created using create-react-app" />
    <title>React App</title>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript">
        //Don't run unless in an iframe
        if (self !== top) {
            var rootHeight;
            setInterval(function () {
                var rootElement = document.getElementById("root");
                if (rootElement) {
                    var currentRootHeight = rootElement.offsetHeight;
                    //Only send values if height has changed since last time
                    if (rootHeight !== currentRootHeight) {
                        //postMessage to set iframe height
                        window.parent.postMessage({ "type": "frame-resized", "value": currentRootHeight }, '*');
                        rootHeight = currentRootHeight;
                    }
                }
            }
                , 1000);
        }
    </script>
</body>
</html>

The code with setInterval can of course be modified but it works really well with dynamic content. setInterval only activates if the content is embedded in a iframe and postMessage only sends a message when height has changed.

You can read more about Window.postMessage() here but the description fits very good in what we want to achieve:

The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

Normally, scripts on different pages are allowed to access each other if and only if the pages they originate from share the same protocol, port number, and host (also known as the "same-origin policy"). window.postMessage() provides a controlled mechanism to securely circumvent this restriction (if used properly).

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

If you want 100% width and height for iframe I would do it like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="description"
          content="Web site" />
    <style>
        body {
            margin: 0; /* Reset default margin */
        }

        iframe {
            display: block; /* iframes are inline by default */
            background: #000;
            border: none; /* Reset default border */
            height: 100vh; /* Viewport-relative units */
            width: 100vw;
        }
    </style>
    <title>Test with embedded iframe</title>
</head>
<body>
    <iframe src="https://localhost:44335/package/details?key=123"></iframe>
</body>
</html>

Source:

https://mcmap.net/q/66805/-full-screen-iframe-with-a-height-of-100

Petulance

Answer 13

I slightly modified Garnaph's great solution above. It seemed like his solution modified the iframe size based upon the size right before the event. For my situation (email submission via an iframe) I needed the iframe height to change right after submission. For example show validation errors or "thank you" message after submission.

I just eliminated the nested click() function and put it into my iframe html:

<script type="text/javascript">
    jQuery(document).ready(function () {
        var frame = $('#IDofiframeInMainWindow', window.parent.document);
        var height = jQuery("#IDofContainerInsideiFrame").height();
        frame.height(height + 15);
    });
</script>

Worked for me, but not sure about cross browser functionality.

Alake

Answer 14

all can not work using above methods.

javascript:

function resizer(id) {
        var doc = document.getElementById(id).contentWindow.document;
        var body_ = doc.body, html_ = doc.documentElement;

        var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
        var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);

        document.getElementById(id).style.height = height;
        document.getElementById(id).style.width = width;

    }

html:

<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv"  >
         <input id="txtHeight"/>height     <input id="txtWidth"/>width     
        <iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0"  ></iframe>
        <iframe src="left.aspx" name="leftFrame" scrolling="yes"   id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
        <iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; "  onload="resizer('Iframe2');" ></iframe>
</div>

Env: IE 10, Windows 7 x64

Romansh

Answer 15

I figured out another solution after some experimenting. I originally tried the code marked as 'best answer' to this question and it didn't work. My guess is because my iframe in my program at the time was dynamically generated. Here is the code I used (it worked for me):

Javascript inside the iframe that is being loaded:

window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };

It is necessary to add 4 or more pixels to the height to remove scroll bars (some weird bug/effect of iframes). The width is even stranger, you are safe to add 18px to the width of the body. Also make sure that you have the css for the iframe body applied (below).

html, body {
   margin:0;
   padding:0;
   display:table;
}

iframe {
   border:0;
   padding:0;
   margin:0;
}

Here is the html for the iframe:

<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>

Here is all the code within my iframe:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        display:table;
    }
    </style>
    <script type="text/javascript">
    window.onload = function()
    {
        parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
        parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
    };
    </script>
</head>
<body>
    This is a test.<br>
    testing
</body>
</html>

I have done testing in chrome and a little in firefox (in windows xp). I still have more testing to do, so please tell me how this works for you.

Extinguish

thank you this works amazing in mobile browsers from what I've tested and that's where I was having problems with iframes being resized! – Suneya

Glad you like it :-) I have found iframe for the most part to be far more efficient and offer better browser support than Ajax. – Extinguish

THANK YOU!!! Mainly, because you are the only one who specified WHERE to put the code without assuming people know. This simple solution worked perfectly for me (Firefox, Chrome, Edge), for framing dynamic content on the same domain in my Wordpress site. I have a form-select which will output dynamic content of various lengths. The iFrame adjusts beautifully. I did have to tweak the .clientHeight+5+'px'; and clientWidth+18+'px'; to be more pixels. And I'm not sure why the display:table; in the CSS was needed so I commented it out for my purposes. Thanks again. – Trimester

Answer 16

If you can live with a fixed aspect ratio and you would like a responsive iframe, this code will be useful to you. It's just CSS rules.

.iframe-container {
  overflow: hidden;
  /* Calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 
  0.5625) */
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

The iframe must have a div as container.

<div class="iframe-container">
   <iframe src="http://example.org"></iframe>
</div>

The source code is based on this site and Ben Marshall has a good explanation.

Stadium

Answer 17

It is possible to make a "ghost-like" IFrame that acts like it was not there.

See http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/

Basically you use the event system parent.postMessage(..) described in https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

This works an all modern browsers!

Singleness

Answer 18

I found this resizer to work better:

function resizer(id)
{

    var doc = document.getElementById(id).contentWindow.document;
    var body_ = doc.body;
    var html_ = doc.documentElement;

    var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight,     html_.scrollHeight, html_.offsetHeight );
    var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );

    document.getElementById(id).height = height;
    document.getElementById(id).width = width;

}

Note the style object is removed.

Evers

Doesn't work for me on Chrome/Win10 - content is chopped off partly at the bottom. – Gabardine

Answer 19

In case someone getting to here: I had a problem with the solutions when I removed divs from the iframe - the iframe didnt got shorter.

There is an Jquery plugin that does the job:

http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html

Lilith

Answer 20

In jQuery, this is the best option to me, that really help me!! I wait that help you!

iframe

<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>

jQuery

<script>            
        var valueSize = $( "#iframe" ).offset();
        var totalsize = (valueSize.top * 2) + valueSize.left;

        $( "#iframe" ).height(totalsize);            

</script>

Wont

Answer 21

Clearly there are lots of scenarios, however, I had same domain for document and iframe and I was able to tack this on to the end of my iframe content:

var parentContainer = parent.document.querySelector("iframe[src*=\"" + window.location.pathname + "\"]");
parentContainer.style.height = document.body.scrollHeight + 50 + 'px';

This 'finds' the parent container and then sets the length adding on a fudge factor of 50 pixels to remove the scroll bar.

There is nothing there to 'observe' the document height changing, this I did not need for my use case. In my answer I do bring a means of referencing the parent container without using ids baked into the parent/iframe content.

Photomicrograph

Answer 22

function resizeIFrameToFitContent(frame) {
if (frame == null) {
    return true;
}

var docEl = null;
var isFirefox = navigator.userAgent.search("Firefox") >= 0;

if (isFirefox && frame.contentDocument != null) {
    docEl = frame.contentDocument.documentElement;
} else if (frame.contentWindow != null) {
    docEl = frame.contentWindow.document.body;
}

if (docEl == null) {
    return;
}

var maxWidth = docEl.scrollWidth;
var maxHeight = (isFirefox ? (docEl.offsetHeight + 15) : (docEl.scrollHeight + 45));

frame.width = maxWidth;
frame.height = maxHeight;
frame.style.width = frame.width + "px";
frame.style.height = frame.height + "px";
if (maxHeight > 20) {
    frame.height = maxHeight;
    frame.style.height = frame.height + "px";
} else {
    frame.style.height = "100%";
}

if (maxWidth > 0) {
    frame.width = maxWidth;
    frame.style.width = frame.width + "px";
} else {
    frame.style.width = "100%";
}
}

ifram style:

.myIFrameStyle {
   float: left;
   clear: both;
   width: 100%;
   height: 200px;
   padding: 5px;
   margin: 0px;
   border: 1px solid gray;
   overflow: hidden;
}

iframe tag:

<iframe id="myIframe" src="" class="myIFrameStyle"> </iframe>

Script tag:

<script type="text/javascript">
   $(document).ready(function () {
      $('myIFrame').load(function () {
         resizeIFrameToFitContent(this);
      });
    });
</script>

Singleminded

is this can support cross browser.? – Selie

Answer 23

This is how I would do it (tested in FF/Chrome):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
    $(iframe).height($(iframe).contents().find('html').height());
}
</script>

<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>

Kyte

If Microsoft does not care about that, who should care? – Barnhill

Answer 24

Here are several methods:

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

AND ANOTHER ALTERNATIVE

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

TO HIDE SCROLLING WITH 2 ALTERNATIVES AS SHOWN ABOVE

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>

HACK WITH SECOND CODE

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>

To hide the scroll-bars of the iFrame, the parent is made "overflow:hidden" to hide scrollbars and the iFrame is made to go upto 150% width and height which forces the scroll-bars outside the page and since the body doesn't have scroll-bars one may not expect the iframe to be exceeding the bounds of the page. This hides the scrollbars of the iFrame with full width!

source: set iframe auto height

Unbroken

The examples you gave are supposed to make iframe full content, not to autoresize the height of the iframe to fit all internal content. It doesn't reply the questions. – Adventurous

Answer 25

I know the post is old, but I believe this is yet another way to do it. I just implemented on my code. Works perfectly both on page load and on page resize:

var videoHeight;
var videoWidth;
var iframeHeight;
var iframeWidth;

function resizeIframe(){
    videoHeight = $('.video-container').height();//iframe parent div's height
    videoWidth = $('.video-container').width();//iframe parent div's width

    iframeHeight = $('.youtubeFrames').height(videoHeight);//iframe's height
    iframeWidth = $('.youtubeFrames').width(videoWidth);//iframe's width
}
resizeIframe();


$(window).on('resize', function(){
    resizeIframe();
});

Radices

Answer 26

Javascript to be placed in header:

function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
      }

Here goes iframe html code:

<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>

Css stylesheet

>

.spec_iframe {
        width: 100%;
        overflow: hidden;
    }

Oke

Answer 27

For angularjs directive attribute:

G.directive ( 'previewIframe', function () {
return {
    restrict : 'A',
    replace : true,
    scope : true,
    link : function ( scope, elem, attrs ) {
        elem.on ( 'load', function ( e ) {
            var currentH = this.contentWindow.document.body.scrollHeight;
            this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
        } );
    }
};
} );

Notice the percentage, i inserted it so that you can counter scaling usually done for iframe, text, ads etc, simply put 0 if no scaling is implementation

Clearance

Answer 28

If the content is just a very simple html, the simplest way is to remove the iframe with javascript

HTML code:

<div class="iframe">
    <iframe src="./mypage.html" frameborder="0" onload="removeIframe(this);"></iframe>
</div>

Javascript code:

function removeIframe(obj) {
    var iframeDocument = obj.contentDocument || obj.contentWindow.document;
    var mycontent = iframeDocument.getElementsByTagName("body")[0].innerHTML;
    obj.remove();
    document.getElementsByClassName("iframe")[0].innerHTML = mycontent;
}

Dalton

This changes the parent document outline. If you want to have another document as a figure with a figcaption then this does not keep the document outline as succinct. Different use cases, but I wanted to move a code snippet to an iframe due to outline reasons. – Bernetta

Answer 29

This is how I did it onload or when things change.

parent.jQuery("#frame").height(document.body.scrollHeight+50);

Kynthia

Answer 30

If you are looking for a no jQuery cross-origin solution, you might want to look at my idea:

<main id="container"></main>
<script>
  fetch('https://example.com').then(response => {
    return response.text();
  }).then(data => {
    const iframeContainer = window.document.getElementById('container');
    const iframe = document.createElement('iframe');
    iframe.frameBorder = 'none';
    iframe.width = '100%';
    iframe.addEventListener("load", function() {
      iframe.height = iframe.contentWindow.document.body.scrollHeight;
    })
    const finalHtml = data;
    const blob = new Blob([finalHtml], {type: 'text/html'});
    iframe.src = window.URL.createObjectURL(blob);
    iframeContainer.appendChild(iframe);
  })
</script>

Biogeochemistry

except fetch doesn't work cross-origin unless CORS is enabled, which again causes a cross-origin problem. – Olympium

Answer 31

Simplicity :

var iframe = $("#myframe");
$(iframe.get(0).contentWindow).on("resize", function(){
    iframe.width(iframe.get(0).contentWindow.document.body.scrollWidth);
    iframe.height(iframe.get(0).contentWindow.document.body.scrollHeight);
});

Larcher

Answer 32

<iframe src="hello.html" sandbox="allow-same-origin"
        onload="this.style.height=(this.contentWindow.document.body.scrollHeight+20)+'px';this.style.width=(this.contentWindow.document.body.scrollWidth+20)+'px';">
</iframe>

Filum

This isn't CSS, it's JS. – Hexaemeron

Works like charm :) – Ratiocination

Answer 33

Use bootstrap's embed-responsive class, it's originally for youtube videos but you can adjust it's height.

If you can't use javascript I would suggest using bootstrap and playing around with embed-responsive-*** class of html. I was able to achieve the same with adding padding-bottom as percent to adjust it further accordingly.

<span class="iframe embed-responsive embed-responsive-16by9" style="display:block; padding-bottom: 10%;">
<iframe class="embed-responsive-item" width="100%" scrolling="no" src="example.com" frameBorder="0" ></iframe>
</span>

Janey

Answer 34

<iframe src="..." style="border:none; width:100%; height: 100vh;"></iframe>

Traverse

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Moneyed