Embedding websites and iframes... :sigh:

Hello all. I'm a fairly experienced coder, but pure HTML and stylistic concerns were never really an issue for me to focus my attention on. The current site (www.PiratesOnly.com) I am working on has run into an issue. I needed to force the persistence of a menu bar across the top of the screen, as we are implementing the use of Movable Type blogs and, eventually, personal webpages and subdomains.

I first considered using PHP to just include the menu and footer on each page, but that quickly became untenable. There are infinite amounts of comment pages generated from an active user's update of their blog. To combat this, I decided to embed an iframe in the center of the page, much to my dismay. Frames would have worked too, but I desire the appearance that each page is standalone and is just preceded by a menu and followed by a footer.

In order to establish this appearance, I need to have the iframe auto-resize in order to not have a scroll-bar, the scroll-bar then appearing on the browser. However, when you navigate links inside of the iframe, the iframe will not auto-update it's size. Here is the code I am using to update iframe height:

/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}

}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)

if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}


//Retrieve background color and set it as current
document.body.style.background=document.getElementById("myframe").contentDocument.body.bgColor;



}

function readjustIframe(loadevt) {


//Retrieve background color and set it as current
document.body.style.background=document.getElementById("myframe").contentDocument.body.bgColor;



var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

function openLoginWindow()
{
window.open("../sites/login.php", "_blank",
"height=340px width=240px");
}

Now my question here is two-fold. First, I would like to know how to update the size of my iframe when you navigate links inside of it. The caveat to this, however, is that I cannot edit the websites that I will be navigating in the iframe. Is there a jscript listener, perhaps, that I can install on the iframe from the parent?

Thanks for any help you can offer!

If the urls in the iframe are external then you can't resize the iframe for security reasons sorry.

Well, they are my personal webpages, they are just infinite (comment pages automatically created on journal entry). And if I load an external page using a link on the main page, it automatically resizes...

Perhaps there's a better way to do this?

Okay just looked at your site. Your urls are on your own server. That script should be working just fine. At least it seems to on the dynamicdrive site. I also clicked on a few links within the iframe and the iframe resized just fine. I guess I'm not seeing the issue.

Okay what seems to be happening is the main url is http://www.piratesonly.com however the links inside of the iframe are http://piratesonly.com without the www. This is enough to cause the script to error out.

Would I have to change the way the links function inside the website, such as the blogs, or could I get the jscript to take that into account?

I would make all of the links have the www or leave it off. You can use htaccess for this. What type of server are you on?

Jscript and javascript are different things don't confuse them. I wouldn't rely on the JS to check the urls. I would make them all uniform using htaccess like I said. We need to know if you can use htaccess first however.