Css iframe height to content

Resize Iframe to Fit Content (Same Domain Only)

Normally you set and width and height for iframes. If the content inside is bigger, scrollbars have to suffice. The script below attempts to fix that by dynamically resizing the iframe to fit the content it loads.

1. The source of the iframe content must reside on the same domain
2. if the content inside the iframe changes height, this won’t adapt
3. I left Google Analytics code off the demo above, as when I added it in it seems to interfere and not resize the iframe, despite seemingly generating no errors.

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

does anyone experienced bug on IE? …IE didnt resize the iframe instead it rendered a fixed height for the iframe. Any fix yet? Thanks

Hi Chris, I’m wondering if you know of any script that would adapt the height of the iframe if the content inside the iframe changed height. Thanks!

tested with success in IE9 for windows.
Set doctype transitional on top of html code. Still need some tweaks to adjust the page width I want.

Hello .
Your code not work in chrome explorer ( your code = other codes ).
Please send true code for me.
thanks.

Thanks for the script. I decided to used it for now. If it breaks for different browsers I’ll try and think or find something else. Meanwhile I also found this:
http://www.iframehtml.com/iframe-scripts.html#resizeable-iframe Thought I’d share it here. Seems easy and quick to use, the demo page works fine but this solution didn’t agree with my code.

Does anybody know how to do this when you embed a PDF in the iframe? I’m generating the PDF dynamically with a server-side script (ASP.NET MVC). The problem I’ve found is that, when the .load function, the PDF hasn’t been rendered to the iframe yet, so the “current” height is something like 150px (default maybe). Any ideas? (Great post by the way!)

Try to add edit your code on if statement replace your code on this code, hope it works: if ($.browser.safari || $.browser.opera || $.browser.msie && $.browser.version==”6.0″) < iFrames.load(function()<
setTimeout(iResize, 0);
>);

I didn’t think this was possible for some reason. I’m building a site right now with various tables loading from another site (sport scores). Being able to resize the iframe like this will make it look like part of the main site. Awesome!

Hey, so is there maybe an update on this article? I have tried several versions and i still get problems with Safari for example. Is there really a workaround that works on all browsers IE7+?
Cheers

Hello,
thanks for useful script.
It works fine for file from same domain.
But I want to show Google spreadsheet in iframe.
and above script does not work for me.
Please can you suggest solution.

In Firebug I see next error: Error: Permission denied to access property ‘document’ this.style.height = this.contentWindow.document.body.offsetHeight + ‘px’;

Hi, i am trying to add iframe blog using this code. Just want your help, how you removed that error ? Please reply. Thanks.

You can do the same by making the script run inside the iFrame body, when body loads, find the iframe in window.top and change its style height unfortunately I found a very nasty bug on IE9 (fixed in IE10), when I change height, it some how affects the main window, and rolls down my css media to match the rule that fits the iframe WIDTH! so if iframe width is 900px, it will render the whole page under media rule @media only screen and (max-width: 960px) :'( how do we prevent an iframe change in height from re-running the parent css media queries?

Problematic issue #2 can be addressed with a touch of JS after the function! Here’s a trick @grahamkennery showed me: setInterval(iResize, 1000); Essentially this will ask the function to double-check its work every second. This is ideal if the source of the iframe changes size!

@ArleyM Either I don’t know where to put the setInterval(iResize, 1000);
or it just doesn’t work. Hope it works and I’m just plain wrong Thanks!

var iFrames = $('.myFrame'); function iResize() < for (var i = 0, j = iFrames.length; i < j; i++) < iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';>> if ($.support.safari || $.support.opera) < iFrames.load(function()< setTimeout(iResize, 0); >); for (var i = 0, j = iFrames.length; i < j; i++) < var iSource = iFrames[i].src; iFrames[i].src = ''; iFrames[i].src = iSource; >> else < iFrames.load(function() < this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; >); > setInterval(iResize, 1000); 

Also, note that recent versions of jQ need the if ($.browser.safari || $.browser.opera) < bit to be updated to if ($.support.safari || $.support.opera) < Hope this helps, Thanks!

Help Me
How to add CSS class and control elements inside of the Iframe using javaScript…
Please Please Help
Thanks

yes, its works ,thanks
but
1.i got the access denied error in script
2. my Iframe have static content its working fine.
3.if I have combox box ,based on that I can load the content.its not working.

yes, its works ,thanks very much. while I load dynamic content ,I used
//parent page
function Resize() var iFra = $(‘iframe’);
for (var i = 0, j = iFra.length; i < j; i++) iFra[i].style.height = iFra[i].contentWindow.document.body.offsetHeight + ‘px’;
>
> // Iframe page.
parent.Resize();

That’s cool but I need codes for that when we click a text, a page with forms etc. comes up.

 $(function () < var iFrames = $('iframe'); function iResize() < for (var i = 0, j = iFrames.length; i < j; i++) < iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px'; >> if ($.browser.safari || $.browser.opera) < iFrames.load(function () < setTimeout(iResize, 0); >); for (var i = 0, j = iFrames.length; i < j; i++) < var iSource = iFrames[i].src; iFrames[i].src = ''; iFrames[i].src = iSource; >> else < iFrames.load(function () < this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; >); > >); function Resize() < var iFra = $('iframe'); for (var i = 0, j = iFra.length; i < j; i++) < iFra[i].style.height = iFra[i].contentWindow.document.body.offsetHeight + 'px'; >> 

Privacy Policy
You may choose to give us personal information, such as your name and address or e-mail id that may be needed, for example, to correspond with you, to download our white papers or to provide you with a subscription. If you tell us that you do not want us to use this information as a basis for further contact with you, we will respect your wishes. We intend to protect the quality and integrity of your personally identifiable information. Cookies, and other technologies

** ** Iframe Page: In this I am used Combo and GridView .Based on Combo value the gridview row has been binded.
(Dynamically Loaded data from DB.)

 function loadgrid() < var applyTimeList = document.getElementById('DropDownList1'); var value = applyTimeList.options[applyTimeList.selectedIndex].value; $.ajax(< type: "POST", url: "loadadminlist.aspx/CurrentUpdate", data: '', contentType: "application/json; charset=utf-8", dataType: "json", success: OnSuccess, failure: function (response) < alert(response.d); >, error: function (response) < alert(response.d); >>); > function OnSuccess(response) < var xmlDoc = $.parseXML(response.d); var xml = $(xmlDoc); var customers = xml.find("vpagetitle"); var row = $("[id*=GridView1] tr:last-child").clone(true); $("[id*=GridView1] tr").not($("[id*=GridView1] tr:first-child")).remove(); var $grid = $("[id*=GridView1]"); for (i = 0; i < customers.length; i++) < var cont = "" + customers[i].textContent + ""; $grid.append(cont); > parent.Resize(); > 

Hi.
Thank you very much for this, it could be a life saver.
I have a concern, and a problem to ask if you know of any fix, please.
The concern is, I have 2 iFrames within one DIV, the first and topmost one if for a range of “thumbnail” images of photographs that a visitor can look and select.
The selected one then loads the full size photo the iFrame below.
It works wonderfully apart from the fact that the photographs are all different heights, so the default page has to all different sizes to accommodate…….. 🙁
Your script works wonderfully in adjusting the page to suit the size of the photograph, apart from the fact that it seems to cut off a small portion of both the Thumbnail and the main photo frame along the bottom…….
Any thoughts please would be greatly appreciated.
Below is the “iFrame” code with your fix put in place.
Thank you very much in advance.
Glen

$(function() < var iFrames = $('iframe'); function iResize() < for (var i = 0, j = iFrames.length; i < j; i++) < iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';>> if ($.browser.safari || $.browser.opera) < iFrames.load(function()< setTimeout(iResize, 0); >); for (var i = 0, j = iFrames.length; i < j; i++) < var iSource = iFrames[i].src; iFrames[i].src = ''; iFrames[i].src = iSource; >> else < iFrames.load(function() < this.style.height = this.contentWindow.document.body.offsetHeight + 'px'; >); > >);   

Is there any way to ad say 25 pixels to the offset query, I have a page that I want scrolling on when it’s resized, but when the iframe fits in the window, there seem to be 25 pixels that are still not accounted for, so it always has a scrollbar for that extra 25 pixels. Thanks

is there any way to use scrollTop in this code instead of, offsetHeight?
I can’t seem to get it to work, the iframe just disappears

Hi. The .browser property has been removed from jQuery and browser sniffing is not recommended. What is the actual quirk that requires the workaround for safari and opera? If known, this can probably be feature detected. Thanks.

Источник

How to adjust the width and height of an iframe to fit with content in it HTML?

We can adjust the width and height of an iframe by using CSS to set the dimensions. This can be done by setting the width and height properties to a specific value or to a percentage of the parent container. Additionally, we can use JavaScript to dynamically adjust the dimensions based on the content within the iframe. The term iframe is short for Inline frame.

Here are the possible approaches −

Using JavaScript

You can use JavaScript to adjust the width and height of an iframe to fit its content. This can be done by getting the element of the iframe and then setting its width and height properties to the values of the content inside −

Using CSS

You can also use CSS to adjust the width and height of an iframe to fit its content. This can be done by setting the width and height properties of the iframe to 100% and then using the padding-bottom property to adjust the height of the iframe based on the aspect ratio of the content inside −

 #myiframe

Using HTML

You can also use HTML to adjust the width and height of an iframe to fit its content. This can be done by setting the width and height attributes of the iframe element to 100% −

Note − Keep in mind that when using JavaScript or CSS to adjust the size of an iframe, it can cause issues with cross-domain iframes as the browser may block access to the content inside the iframe. It is recommended to use the HTML method in this case.

Example

Here is a full working example of using JavaScript to adjust the width and height of an iframe to fit its content −

    window.onload = function()   

Источник

How to Scale the Content of Element

Below, we are going to show how to scale the content of an step by step.

Create HTML

div id="wrap"> iframe id="scaled-frame" src="/tool/"> iframe> div>

Add CSS

• Use the width, height, padding, and overflow properties to set the dimensions for the «wrap».
• Use the width, height, and border properties to set the dimensions for the “scaled-frame”.
• Add the zoom property to scale the content to 75%.
• Use the transform and transform-origin properties.

#wrap < width: 750px; height: 1500px; padding: 0; overflow: hidden; > #scaled-frame < width: 1000px; height: 2000px; border: 0px; > #scaled-frame < zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; -o-transform: scale(0.75); -o-transform-origin: 0 0; -webkit-transform: scale(0.75); -webkit-transform-origin: 0 0; > @media screen and (-webkit-min-device-pixel-ratio:0) < #scaled-frame < zoom: 1; > >

Here is the result of our code.

Example of scaling the content of the element:

html> html> head> title>Title of the document title> style> #wrap < width: 750px; height: 1500px; padding: 0; overflow: hidden; > #scaled-frame < width: 1000px; height: 2000px; border: 0px; > #scaled-frame < zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; -o-transform: scale(0.75); -o-transform-origin: 0 0; -webkit-transform: scale(0.75); -webkit-transform-origin: 0 0; > @media screen and (-webkit-min-device-pixel-ratio:0) < #scaled-frame < zoom: 1; > > style> head> body> div id="wrap"> iframe id="scaled-frame" src="/tool/"> iframe> div> body> html>

In the example mentioned above, we scaled the that is 1000px wide down to 750px. If you want to scale the content to 75%, 1000px x 2000px will become 750px x 1500px. We also used prefixes with the transform and transform-origin properties for maximum browser compatibility.

Also note that if the @media screen and (-webkit-min-device-pixel-ratio:0) is not defined, the will be scaled twice in Chrome.

Example of scaling the content of the element using internal CSS:

html> html> head> title>Title of the document title> style> #target < width: 400px; height: 300px; overflow-y: auto; overflow-x: auto; resize: both; position: relative; z-index: 2; > iframe < width: 100%; height: 100%; border: none; > style> head> body> div id="target"> iframe src="/quiz/"> iframe> div> body> html>

Here, we used an internal style sheet where the overflow property controls the content that doesn’t fit into an area.

In our last example, JavaScript is used. We use the contentWindow property to adjust the height of the according to the contents. Note that scrollbars do not appear.

Example of scaling the content of the element using JavaScript:

html> html> head> title>Title of the document title> style> body < background-color: #ffffff; > div < width: 50%; > style> head> body> iframe src="/snippets/css.html" id="target"> iframe> script> var div = document.getElementById("target"); div.onload = function( ) < div.style.height = div.contentWindow.document.body.scrollHeight + 'px'; > script> body> html>

Источник