We Keep Coding

page has different height when inside an iframe

I've googled a bit and there were a few leads, but I couldn't get any of those leads to work:
I have a page that has an iframe with the src pointing to an external page (cross domain). When the child/iframed page loads, it posts a message of its height. I put a console.log of the height in the javascript. If I open that page in a separate window (type the iframe's src URL in a separate tab, in other words), the console logs the expected height.
However, when I open the parent page with the iframe, the console logs either 0 or a very incorrect value of 150. I've looked through the css and html, and I don't have any specifications of 150.. Anyone have a clue what's going on here?
Abstracted code:
Parent HTML:
...
<iframe src="example.childpage.com" scrolling="no" frameBorder="0"></iframe>
...
Parent Javascript:
...
$(document).ready(function(){
window.addEventListener('message', function(m){
var messageData = m.data;
if(messageData.type=='document-loaded' &&
messageData.hasOwnProperty('height'){
resize_iframe(messageData.height); //function defined else where
//and works
};
});
...
IFrame Javascript:
...
$(document).ready(function(){
var body = document.body;
var html = document.documentElement;
var maxHeight = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
//Logs height correctly when opened in a separate window but not when
//iframed
console.log("POSTING HEIGHT", maxHeight);
window.parent.postMessage({'type':'document-loaded', 'height': maxHeight},
PARENT_HOST_URL); //PARENT_HOST_URL defined elsewhere
});
...
I realize I have a mixture of jquery and vanilla javascript here; I've done both $(document).height() and the Math.max() shown above to get the height, but both ways still have the same issue.
Much thanks!

ok I finally found a good solution:
$('iframe').load(function() {
this.style.height =
this.contentWindow.document.body.offsetHeight + 'px';
});
Because some browsers (older Safari and Opera) report onload completed before CSS renders you need to set a micro Timeout and blank out and reassign the iframe's src.
$('iframe').load(function() {
setTimeout(iResize, 50);
// Safari and Opera need a kick-start.
var iSource = document.getElementById('your-iframe-id').src;
document.getElementById('your-iframe-id').src = '';
document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
document.getElementById('your-iframe-id').style.height =
document.getElementById('your-iframe-
id').contentWindow.document.body.offsetHeight + 'px';
}

I had a function that looped through not-yet-accessible elements and called $(element).hide() on them -- which sets the style display: none.
Turns out calculating the height of an element is respective of its visibility on the actual page, regardless of it being in an iframe. So the browser couldn't see it, so the height was being miscalculated (still weird it was returning a random 150px value). That explains why it was calculating correctly on a separate page.
Instead of doing hide(), I just set the visibility to hidden and that fixed my issue of getting the incorrect heights.

iframe inside a div. scrolling the div not working

I know that trying to scroll the iframe itself in not the way to go and instead i should be scrolling the div. Thing is it doesn't work. What is wrong with this code? Is it a google thing? I'm using the custom search so it shows up in the frame but I know google and frames don't like to play with each other.
HTML
<div id="googleframe"><iframe id="googleseo" src="http://www.google.com/custom?q=hey+there&btnG=Search"></iframe></div>
JS
var seoFrame = document.getElementById('googleseo');
seoFrame.src = googleSearch;
seoFrame.onload = function () {
document.getElementById('googleframe').scrollTop = 300;
}
}

It was a CSS issue. The iframe wasn't long enough to scroll. It was the same height as my div so I made it longer and it works perfectly.

This is due to the scrollTop referencing the iframe, not the body within the frame. The iframe itself doesn't have a scrollbar, it's the document within it.
Fiddle of it working http://jsfiddle.net/ebzxzgmo/
var seoFrame = document.getElementById('googleseo');
var elem = (seoFrame.contentDocument||seoFrame.contentWindow.document).documentElement;
elem.getElementsByTagName('body')[0].scrollTop = 300;
Notice that it's requesting jsfiddle. Browsers block accessing the DOM of iframes from other domains.
Reference for scrolling cross domain: Scroll a cross-domain child iframe?

Can't fix the width of popup element (colorbox jquery override)

I have the following code on my site that's supposed to show a popup window
<span class="fbridge-signup-form" data-widget-id="21378"></span>
<script type="text/javascript">
(function() {
var secure = ("https:" == document.location.protocol);
var fb_js_host = (secure ? "https://www.fanbridge.com" : "http://widget-platform.fanbridge.com");
window._FBRIDGE_WIDGETS_HOST = fb_js_host; var p, s, id = 'fbridge-widgetjssdk-v1';
p = document.createElement('script'); p.id = id; p.type = 'text/javascript'; p.async = true;
p.src = (secure ? "https://ssl.fbridgecdn.net" : "http://static.fbridgecdn.net") + '/js/fb/widget/v1/platform.js?_=' + ((new Date()).getTime());
s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(p, s);
})();
</script>
It works fine, but the problem is that there's some setting with lightboxes on my Drupal site that makes this window of a smaller width and height than the actual content inside.
I tried getting the element with getElementByClassName or writing the width and heightparameters into the style property of fbridge-signup-form but it didn't work out.
Do you know what I could do to force it to be a certain width and height? Say 480px by 400px?
You can check the actual page on http://waytorussia.net/Moscow/Intro.html (it has a cookie set to show only once).
UPDATE: maybe it's possible to use another kind of popup so this one is not overridden by my other settings?

According to the HTML source, the element you should resize is (id) cboxContent.
But the black frame around it doesn't seem "ready" (from an HTML/Css point of view) to be resized.
See the screenshot here:
I resized it 400x400.
EDIT -
By resizing all the appropriate elements, you can manage to get what you want. Here's an example done manually:
Just inspect the element (right-click > Inspect) with a modern browser, and look at the divs that you need to resize on load (with JavaScript).

i opened your page in Firefox with the developer tools to see how things work width and height wise and the results are interesting.
Basically the frame of the lightbox is made up of numerous divs all seem to be hard coded to a specific width and height. When you hover over the inner content using the inspector tool you can see that the inner content is actually the correct width and height but the container ( your collection of divs is not )
Try expanding the height and width of the container divs using css maybe??
I wouldnt have used this as answer but unfortunately i cant provide screenshots using just the comments section to my knowledge.
To see the image at full screen open it in a new tab.
For a good alternative try colorbox its a great JQuery modal plugin that can be used for just about anything.
Demos are here. Have a look at inline HTML example it seems to be similar to what you need.

Thanks to #Vincent G and #KyleT for their help I found that I had to edit the CSS styles for colorbox module.
#cboxLoadedContent iframe{display:block; min-width: 480px; min-height: 400px; border:0;}
and
#colorbox{min-width: 480px !important; min-height: 400px !important; }
in the colorbox.css file which was part of my Drupal installation.
After that the widget was loading fine.

jQuery.contents() Gives a strange result

I'm having a very strange occurrence when using an IFrame and jQuery.Contents.
We have a number of reports that are built in seperate pages, and a display page that uses jQuery Tabs to display a number of these pages at once.
These reports are of varying sizes based on the data and the inputs by the user, since they can vary we needed to dynamically set the height of the IFrame to be the height of the contents. To get the height of the contents I am using this following code :
var iframeHeight = $(this).contents().height();
iframeHeight += 50;
console.log(iframeHeight);
This code works fine on first load, but after the IFrame Postsback/Refreshes the iframeHeight that is logged is always 83px more than the previous height, regardless of the actual contents of the child page.
i.e. First report is 500px high,
Second report should be 300px high
but $(this).contents().height(); returns 583px.
Here is an example jsFiddle to demonstrate the problem. If you open the console and then click the JSFiddle Icon in the top left of the IFrame, you will notice that the logged height will be 83px more than the previous.
Is there anything that could explain this issue?
Am I miss-understanding how the jQuery.Contents function works?
If this will not work this way is there a better way to get the content height? (I've tried the height of the body + the height of the form object but this didn't work in IE).
Tested this in IE10 + Chrome Version 31.0.1650.57 m

Here is an implementation that seems to work (for expanding/shrinking contents..)
assuming that iframe's src is from the same domain and that there are not scripts that resize the iframe's contents once loaded
$(document).ready(function() {
$('#frameID').on('load', function () {
$('#ReportBuild').hide()
$(this).show();
var iframeHeight = $(this.contentDocument.documentElement).outerHeight(true);
$(this).css({ height: iframeHeight + 'px' });
this.contentWindow.onbeforeunload = function () {
$('.tabFrame').hide();
$('#ReportBuild').show();
}
});
});
Demo at http://jsfiddle.net/rq5S5/8/

With help I managed to finally find a solution, suggested examples worked on JSFiddle's but would not work when applied to my issue using ASP.NET controls generated on PostBack.
To handle this, on each of my Child pages I have wrapped the entire content inside a <div></div> and retrieved the height of this element.
Example :
<div id="ReportContent">
<!-- HTML Content -->
</div>
And the jQuery Code :
var iframeHeight = $(this).contents().find('#ReportContent').outerHeight(true);
This now works correctly for my problem in both IE10 and Google Chrome Version 31.0.1650.57 m

How to auto-size an iFrame? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Resizing an iframe based on content
I'm loading an iFrame and want the parent to automatically change the height based upon the height of the iFrame's content.
To simply things, all pages belong to the same domain, so I shouldn't run into cross-site scripting issues.

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.

Try:
jquery-iframe-auto-height
iframe-resizer

I just happened to come by your question and i have a solution. But its in jquery. Its too simple.
$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );
There you go!
Cheers! :)
Edit: If you have a Rich Text Editor based on the iframe method and not the div method and want it to expand every new line then this code will do the needful.

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>

This solution worked best for me. It uses jQuery and the iframe's ".load" event.

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

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

My solution, (using jquery):
<iframe id="Iframe1" class="tabFrame" width="100%" height="100%" scrolling="no" src="http://samedomain" frameborder="0" >
</iframe>
<script type="text/javascript">
$(function () {
$('.tabFrame').load(function () {
var iframeContentWindow = this.contentWindow;
var height = iframeContentWindow.$(document).height();
this.style.height = height + 'px';
});
});
</script>

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);
}

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.

My workaround is to set the iframe the height/width well over any anticipated source page size in CSS & the background property to transparent.
In the iframe set allow-transparency to true and scrolling to no.
The only thing visible will be whatever source file you use. It works in IE8, Firefox 3, & Safari.

Actually - Patrick's code sort of worked for me as well. The correct way to do it would be along the lines of this:
Note: there's a bit of jquery ahead:
if ($.browser.msie == false) {
var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}