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.

Resize video embeds on Tumblr blog with JavaScript

I have a Tumblr theme with responsive design enabled, and want to resize video iframes. Here is a sample of how the page's HTML might look like:
/* rest of blog */
<div id="box-content">
/* other posts; may contain more video posts */
<div class="post video">
<iframe src="[REDACTED]"
style="display:block;background-color:transparent;overflow:hidden"
class="embed_iframe tumblr_video_iframe"
scrolling="no" frameborder="0"
data-can-gutter="" data-can-resize=""
data-width="500" data-height="500"
width="500" height="500" allowfullscreen=""
mozallowfullscreen="" webkitallowfullscreen="">
</iframe>
<div class="post-content">
/* post content */
</div>
</div>
/* other posts; may contain more video posts */
</div>
/* rest of blog */
I have this function that (I think; I never really learned JavaScript) stores the original width and height of the iframe, as well as the width of the parent, in variables, and changes the width and height of the iframe.
My intended method was
Get all the elements with the class "video"
There is a child iframe element for each of them. Store each of the following in its variable:
a. that iframe's original width (ow),
b. that iframe's original height (oh), and
c. the parent element's width (cw for container width)
Set the iframe's width to cw.
Set the iframe's height to oh * cw / ow. (Explanation: cw / ow calculates the scaling factor to maintain the aspect ratio of the iframe.)
Run the function once on load.
Set an event listener for window resize.
...and the function that didn't work was:
function resizeVideos() {
var videoPostNodeList = document.getElementsByClassName("video");
for (var i = 0; i < videoPostNodeList.length; i++) {
var videoNode = videoPostNodelist[i].getElementsByTagName("iframe")[0];
var ow = videoNode.offsetWidth;
var oh = videoNode.offsetHeight;
var cw = videoPostNodelist[i].offsetWidth;
videoNode.offsetWidth = cw;
videoNode.offsetHeight = oh * cw / ow;
}
}
resizeVideos();
window.addEventListener("resize", resizeVideos);
The current version of this theme is available at testing-html.tumblr.com, on which I currently have three videos reblogged: one square video, one horizontal widescreen video, and one vertical widescreen video. What amateur mistake did I make with this?

An element's offsetWidth and offsetHeight are measurements of what's visible, including the element's borders, padding, scrollbar (if present & rendered) and CSS width.
You do have other options though, like clientWidth and clientHeight
and scrollWidth and scrollHeight (which unfortunately doesn't have a good image on MDN)
Based on your description of what you want, I'd say you should set your ow and oh based on the scrollWidth and scrollHeight properties instead.
All of these properties are read-only, so you can't just set them directly.
If I understand the situation correctly, your best bet is likely to be setting the elements max-width and max-height CSS properties (though you may prefer to directly override width and height):
function resizeVideos() {
var videoPostNodeList = document.getElementsByClassName("video");
for (var i = 0; i < videoPostNodeList.length; i++) {
var videoNode = videoPostNodelist[i].getElementsByTagName("iframe")[0];
var ow = videoNode.scrollWidth;
var oh = videoNode.scrollHeight;
var cw = videoPostNodelist[i].offsetWidth;
videoNode.style.maxWidth = cw;
videoNode.style.maxHeight = oh * cw / ow;
}
}
Finally, wait till the content is loaded before you run it (and as you did before, run it on window resize too):
document.addEventListener("DOMContentLoaded", resizeVideos);
window.addEventListener("resize", resizeVideos);
See Determining the dimensions of elements on MDN for more info.

Resize iframe height according to resizable content

I have an iframe and I want to re-size the height according to the content which may resize if user makes certain actions.
I don't want a scroll bar so it appears as a normal page

Use a div instead of an iFrame. Try posting some sample code so we can help you more. Generally, you cannot resize an iframe based on its content.

scrollHeight is the major property to retrieve the height of the IFRAME's content like this:
contentWindow.document.body.scrollHeight
After the IFRAME is loaded, you can then change the height by doing the following:
<script type="text/javascript">
function resizeIframe() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
var cont = iFrameID.contentWindow.document.body || frame.contentDocument.body
// here you can make the height
iFrameID.height = cont.scrollHeight + "px";
}
}
</script>
On the IFRAME load event, you can call this function:
But sure..iframe should not be loaded from other website

How to make the content of a page readjust to iframe size

this is my first question here so please, bear with me.
I have a page with a small gallery, ming I have a few thumbnails that are links so that certain images load onto an iframe. Below that I have text.
Right now, my iframe adjusts to the size of its content which is exactly what I want, also, my images are not all the same size, so when they load to the iframe, they push the text down.
So far so good.
The problem is that if I load an image with a height of 600px, and then load one with a height of 200px, the text below stays where the 600px image pushed it.
What I want is for the text to readjust to the height of the currently loaded image on de iframe.
Help?

I wrote this for you withjQuery1.10.2, this will be set the text's width dynamically depend on your iframes width.
first, add jQuery to your page;
<script type="text/javascript" src="../jQuery/jquery-1.10.2.min.js"></script>
and then give your iframe's width and set this width for your textwrapper:
<script type="text/javascript" language="javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
$(document).ready(function(e) {
$('#columnthumb img').click(function(){
var width = $('iframe').width();//if you want to write it for your img, write img instead of iframe
//alert(width + '<-----Width');//this is for test and figure out your iframe's width
$('p.textocorpo').css({'width':width, 'text-align':'justify'});
});
});
</script>

You need to do it like this
Conceptual:
onclick get image height then set image height to iframe height.
Code:
<script type="text/javascript" language="javascript">
$(document).ready(function(e) {
$('#ImagesColumn img').click(function(){
var imgHeight = $(this).height();
var imgWidth = $(this).width();
$('#iframeId').css({height: imgHeight, width: imgWidth})
$('p.textocorpo').css({'width':imgWidth, 'text-align':'justify'});
});
});
</script>

auto re-sizing iframe that dynamically changing height (smaller or bigger)

I know there's a lot of post about re-sizing iframe but all i found is this code:
<script type="text/javascript" language="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);
document.getElementById(id).width = (newwidth);
};
//-->
</script>
and this is the sample mark-up code:
Home
Profile
<iframe src="index.php" name="content" height="500px" width="100%" id="Main_Content" onload="autoResize('Main_Content');"></iframe>
those codes above are working, but I have one problem. consider this scenario:
index.php page height is 800px
and
profile.php page height is 1200px
when i click on the link to index.php page, the iframe resizes to 800px, and then I click the link to profile.php page and the iframe resizes to 1200px BUT this is my problem, when I click again the link to index.php which is the height is smaller than the profile.php page, the iframe is not resizing and not adapting the 800px height and it results in excess space below the content of the index.php which is not looking good, I do not have a problem on growing an iframe height but having some trouble on shrinking it,anyone can give me a hand? any help is appreciated. thanks!

Why not just do:
height: auto;
max-height: 1200px;
On the iframe itself within style="" or thru a css doc.
If height is set to auto, then it won't need to use the 1200px for the index.php. But when displaying the profile.php it's allowed to use a maximum of 1200px.

I reproduced the problem.
The problem seems to be the use of scrollHeight and scrollWidth which by intention return the current or needed space of the scrollbar, which is not equal to the size of the document itself.
The problem goes away for me when I change
newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
newwidth = document.getElementById(id).contentWindow.document.body.scrollWidth;
into
newheight = document.getElementById(id).contentWindow.document.body.style.height;
newwidth = document.getElementById(id).contentWindow.document.body.style.width;
is that doable for you, or is this not under your control?