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.

determining iframe div distance from parent window top

I have a div inside an iframe (no problems with origin policy as both the documents are from same application/domain). I need to figure out the distance of the div from parent window top. The iframe also has scrollbar, so that's one thing to consider too.
I can't produce a semi-working jsfiddle because of the cross origin policies (iframe.contentWindow won't be available), but here's the non-working fiddle anyway.
I have an embedded iframe in the fiddle:
<iframe src="https://noc2spam.github.io/embed.html?ddd" style="display:block; border:0; width:300px; height:200px; overflow:scroll"></iframe>
The following screenshot might give you an idea of what I exactly need.
I have already tried some of the answers which do not seem work for iframes. As for example, this does not work. What is the most convenient way of doing this?

In order to get the offset from top of the div contained in the iframe you have to SUM the DIV offset inside the IFRAME to the offset of the IFRAME inside the mainWindow.
To do so in Jquery (and postMessage between iframe and MainWindow):
/**
supposed:
#example-iframe = id of iframe
#example-div = id of DIV inside the iframe
*/
/** main.html -- top page */
$("#example-iframe")[0].contentWindow.postMessage({
cmd:"getDivDistance"
});
window.onmessage = function(e){
var msg = JSON.parse(e.data)
switch(msg.cmd){
case "setDivDistance":
var frametop = $("#example-iframe").offset().top
var totaltop = frametop + msg.top;
alert("MY TOP IS "+totaltop);
break;
}
};
/** frame.html -- iframe page*/
window.onmessage = function(e){
var msg = JSON.parse(e.data)
switch(msg.cmd){
case "getDivDistance":
window.top.postMessage({
cmd:"setDivDistance",
top:$("#example-div").offest().top
});
break;
}
}

Getting the absolute size of iframe contents

I have an application in which I load an external website into an Iframe so people can QA it I need to find a way of getting the absolute size of the contents inside of the iframe so all the contents that are hidden because you havent scrolled down to that at the moment I can only seem to get the size of iframe just on the screen i.e. i have an iframe size of 800x600 and i can only get this value for some reason, but the website may be 800x1200 i need to be able to get that full size.
Currently i have this code
aWidth = document.getElementById('FrameStyle').scrollWidth - 17;
aHeight = document.getElementById('FrameStyle').scrollHeight + 500;
This is getting me the height but i have to manually add on pixels to the end which is not how i want and also the website may be longer than just 500 more pixels. So how can I go about getting the complete size of the iframes inner contents.

It looks like you can use Dot_NET Junior's suggestion if you run the code once the iframe contents have loaded, e.g.
var iframe = document.getElementById('iframeId');
iframe.onload = function () {
var width = iframe.contentDocument.body.scrollWidth;
var height = iframe.contentDocument.body.scrollHeight;
};

Iframe height [dynamic] for every 2 second

my problem is when I load iframe it's set height of iframe correctly and also when data(content) load in iframe it;s automatically set height ,BUT when page load in iframe and set height relatively page content and then if I reduce or delete content from loaded page it will not reduce iframe height.(e.g when page load first time height set 100px and dynamically load data on page iframe height set to 150px and when I reduce data it's not set height of iframe it remain 150px). This is my code:
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
setInterval("setIframeHeight_id('" + iframe.id + "')", 2000);
}
return false;
}
function setIframeHeight_id(iframeid) {
var iframe = document.getElementById(iframeid);
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
return false;
}
function resizeIframe(nm) {
setIframeHeight(document.getElementById(nm));
}
HTML
<iframe id="IframeData" scrolling="no" frameborder="0" width="100%" onload="resizeIframe('IframeData')" allowtransparency="true"></iframe>

I would highly suggest you to use jQuery instead of plain JavaScript. It won't do a miracle by itself, but will sure help you shorten your code.
When it comes to your problem, why not using percentage sizes instead of fixed pixel size? Let's say your iframe's height is set to 100%, instead of 150px. By doing this way, next time you resize the parent container, the iframe itself will stretch to parent's height.
I hope this helps.

Change iframe height based on dynamic content inside [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Resizing an iframe based on content
I'm trying to load one of my pages into an iframe. I'm never sure how big the page will be, the data on the page is loaded dynamically. I'd like the iframe to always fit the page, no matter how big or small it is. Here's what I have:
function loadModal() {
myframe = $('<iframe id="mymodal" src="MyPage.aspx" width="700"></iframe>');
myframe.appendTo($('html'));
var height = document.getElementById('modalPreview').contentWindow
.document.body.scrollHeight;
$("#mymodal").attr("height", height);
}
I've been trying to get the height of the page after it's loaded. The problem is that height comes back as 0. But if I do this:
setTimeout(function () {
$("#mymodal").attr("height", height);
}, 2000);
the correct height is loaded. I assume it's because the data needs a few seconds to load. But this looks funky if the page loads really fast, or it will still give me a height of 0 if it takes more than 2 seconds to load the page.
So is there a way to:
Wait and set the height of the iframe once the data loads, or
Set the height of the parent iframe from MyPage.aspx?

If you're going to use option #2 you can access the parent window using the DOM and set the iframe height from the child.
$(document).ready(function() {
var iframeWin = parent.document.getElementById("yourIframeID");
iframeWin.height = document.body.scrollHeight;
});

You can hook an onload event to the Iframe before you insert it. When it fires, inspect the height of the document in the iframe and adjust its height accordingly.