Comments on: Adjusting the height of iframes to match the content across domains http://www.bearfruit.org/2008/05/08/adjusting-the-height-of-iframes-to-match-the-content-across-domains/ Matthew Nuzum's Blog Mon, 26 Jul 2010 07:26:52 +0000 hourly 1 http://wordpress.org/?v=3.0 By: matt http://www.bearfruit.org/2008/05/08/adjusting-the-height-of-iframes-to-match-the-content-across-domains/comment-page-1/#comment-144 matt Thu, 08 May 2008 10:39:55 +0000 #comment-144 OK, I've done my research, I think I was imagining the past ability to remove items from the history. However, here's a solution that decreases the chances of breaking the back button in the browser: __In the parent frame__: (instead of what's shown above) <code> <lt;iframe src="http://path/to/iframe.html" width="100%" frameborder="0" marginheight="0" marginwidth="0" id="downloadframe" style="height:350px"></iframe> <script type="text/javascript"> function checkFragment() { h = document.location.href.indexOf('#h'); l = document.location.href.length; if( h > 0) { u = document.location.href.substring(h+2,l); // u will be like 312 or 312-123456 and we only want the 312 height = parseInt(u.split('-')[0]); setFrameHeight(height); clearInterval(frameint); // fix for browsers whose navigation gets confused by this script if(history.length > his) history.go(-1) } } function setFrameHeight(height) { var frame = document.getElementById("downloadframe"); frame.height = height + 20; // there's a bit of scroll without the 20 } // used for fixing the history in ff his = history.length // our interval var frameint = self.setInterval('checkFragment()', 500); </script> </code> Again, feedback is welcome. OK, I’ve done my research, I think I was imagining the past ability to remove items from the history. However, here’s a solution that decreases the chances of breaking the back button in the browser:

__In the parent frame__: (instead of what’s shown above)

</iframe>
<script type="text/javascript">
function checkFragment() {
h = document.location.href.indexOf('#h');
l = document.location.href.length;
if( h > 0) {
u = document.location.href.substring(h+2,l);
// u will be like 312 or 312-123456 and we only want the 312
height = parseInt(u.split('-')[0]);
setFrameHeight(height);
clearInterval(frameint);
// fix for browsers whose navigation gets confused by this script
if(history.length > his)
history.go(-1)
}
}

function setFrameHeight(height)
{
var frame = document.getElementById("downloadframe");
frame.height = height + 20; // there's a bit of scroll without the 20
}
// used for fixing the history in ff
his = history.length
// our interval
var frameint = self.setInterval('checkFragment()', 500);
</script>

Again, feedback is welcome.

]]> By: matt http://www.bearfruit.org/2008/05/08/adjusting-the-height-of-iframes-to-match-the-content-across-domains/comment-page-1/#comment-80 matt Unknown, 30 Nov -0001 00:00:00 +0000 #comment-80 Joel, I'm sorry to say that this won't work for you. There still needs to be a level of communication between both sites. However it is still better than some solutions because you only need two pages, the parent and the child frame (some solutions require a third page embedded in the child frame, hosted in the same domain as the parent). Still not a solution to Joel's problem but another idea that may work and not have the nasty page-refresh problem in firefox is http://ajaxian.com/archives/whats-in-a-windowname Joel, I’m sorry to say that this won’t work for you. There still needs to be a level of communication between both sites. However it is still better than some solutions because you only need two pages, the parent and the child frame (some solutions require a third page embedded in the child frame, hosted in the same domain as the parent).

Still not a solution to Joel’s problem but another idea that may work and not have the nasty page-refresh problem in firefox is http://ajaxian.com/archives/whats-in-a-windowname

]]> By: Joel http://www.bearfruit.org/2008/05/08/adjusting-the-height-of-iframes-to-match-the-content-across-domains/comment-page-1/#comment-101 Joel Unknown, 30 Nov -0001 00:00:00 +0000 #comment-101 So... just so I'm clear -- your addendum only modified step #2 of your original instructions, right? I'd still need to embed the mootools stuff within the document that will be appearing in the iframe? I initially thought your solution was the one i was looking for, but it doesn't appear to be... I'm looking for a something that will work without having to attach anything to the pages that will be appearing within the frame. The site I administer will be featuring a few third-party solutions that we'd like to frame within our template. And I can't modify those pages and add scripts to them. But I hate the scroll bars people inevitable have to wrestle with when these pages grow outside of the dedicated frame size. So... I'll keep looking for options unless I'm not understanding correctly how to implement your solution. Thanks for your work, though. Looks like good stuff. And your site looks interesting, too. I love running into techy theologians like myself :) So… just so I’m clear — your addendum only modified step #2 of your original instructions, right? I’d still need to embed the mootools stuff within the document that will be appearing in the iframe?

I initially thought your solution was the one i was looking for, but it doesn’t appear to be…

I’m looking for a something that will work without having to attach anything to the pages that will be appearing within the frame. The site I administer will be featuring a few third-party solutions that we’d like to frame within our template. And I can’t modify those pages and add scripts to them.

But I hate the scroll bars people inevitable have to wrestle with when these pages grow outside of the dedicated frame size. So… I’ll keep looking for options unless I’m not understanding correctly how to implement your solution.

Thanks for your work, though. Looks like good stuff. And your site looks interesting, too. I love running into techy theologians like myself :)

]]> By: matt http://www.bearfruit.org/2008/05/08/adjusting-the-height-of-iframes-to-match-the-content-across-domains/comment-page-1/#comment-244 matt Unknown, 30 Nov -0001 00:00:00 +0000 #comment-244 I'm not sure I understand what you mean. It does not create any new HTML, the top frame merely adjusts the height of the iframe to match what it was told by the javascript running in the iframe. The javascript communicates this information by changing the URL of the top frame, however that URL shouldn't cause anything to actually happen since it's only changing the hash fragment to something that wouldn't normally exist. I’m not sure I understand what you mean. It does not create any new HTML, the top frame merely adjusts the height of the iframe to match what it was told by the javascript running in the iframe. The javascript communicates this information by changing the URL of the top frame, however that URL shouldn’t cause anything to actually happen since it’s only changing the hash fragment to something that wouldn’t normally exist.

]]> By: Tammy M Freeman http://www.bearfruit.org/2008/05/08/adjusting-the-height-of-iframes-to-match-the-content-across-domains/comment-page-1/#comment-254 Tammy M Freeman Unknown, 30 Nov -0001 00:00:00 +0000 #comment-254 Hello, Firstly, thank you so much for this script. I do have one question though. So when you script runs, it creates something like a new html instead of updating the page where the iframe is held. Is there anyway around that? I only ask because the whole reason Im using the iframe is to be able to center the page and bc it goes back to the source page, it is uncentered. Any help would be appreciated....thanks again! Hello,

Firstly, thank you so much for this script. I do have one question though. So when you script runs, it creates something like a new html instead of updating the page where the iframe is held. Is there anyway around that? I only ask because the whole reason Im using the iframe is to be able to center the page and bc it goes back to the source page, it is uncentered. Any help would be appreciated….thanks again!

]]>