Hi, all.
We've been using this script for quite a while in our website (http://www.hillscapital.com/). And, I've been trying to get it to work in a cross-browser fashion for quite a while, as well.
I'm trying to make it work only for DOM2 compatible browsers (i.e.: I don't want to support older browsers... it's too much headache. I'm a supporter of the Browser Upgrade Initiative.) I don't want to use innerHTML, as I read on the W3C website that innerHTML is a MS specific kludge that NS adopted at the last moment due to popular demand, and there are no guarantees that it will be supported in future DOM2 compatible browsers. So, I'm trying to work with only DOM2-specific stuff.
Here's the code I've got so far. It doesn't work, and I was wondering if Scott Isaacs or someone else could help me.
var docgetElement = (document.getElementById!=null) //test for newer browsers
function getElement(id) {
// Return the positioned element with the specified ID
if(docgetElement)
return document.getElementById(id) //newer browsers
else if (!docgetElement) { //error message for old browsers
upgrdmsg = "Your browser does not support the necessary"
+ "\r\n\r\n"
+ "technology to properly view this website."
+ "\r\n\r\n"
+ "Please upgrade your browser.";
alert(upgrdmsg);
}
}
function checkIFrame(destID, source) {
var iframeID = document.getElementByID(destID+"target"); //get iframe ID, if it exists
if (iframeID==null) { //if not, create it
iframeID=document.createElement('IFRAME');
iframeID.setAttribute('id','"+destID+"target');
iframeID.setAttribute('name','"+destID+"target');
iframeID.setAttribute('style','border : 0px;');
iframeID.setAttribute('style','width : 0px;');
iframeID.setAttribute('style','height : 0px;');
document.body.appendChild(iframeID);
}
iframeID.setAttribute('src',source);
return iframeID; //send the iframe ID
}
function pollIFrame(destID) {
var destFrame = checkIFrame(destID); //get iFrame ID
var fr = document.getElementById('"+destID+"target').cloneNode(true);
document.getElement(destID).appendChild(fr) //get DIV id and set content equal to iFrame content
var fr = document.getElementById('"+destID+"target');
fr.parentNode.removeChild(fr); //remove iFrame (supposed to fix back button problem)
}
function updateContents(destID, source) {
var el1 = getElement(destID) //get DIV id
destFrame = checkIFrame(destID) //get iFrame id
setTimeout("pollIFrame('"+destID+"')",200) //make sure iFrame is ready and update DIV contents
}
function update(destID, source) {
if (source=="none" || source=="") {
var el1 = getElement(destID) //get target DIV
var el1Len=el1.childNodes.length; //count number of Nodes in target DIV
for (i=0;i<el1Len;i++){
el1.removeChild(el1.childNodes[0]); //remove all the Nodes in target DIV
}
}
else {
updateContents(destID, source)
}
}
Some issues:
1) I still can't get it to work!
2)The pollIFrame function can't use readyState because that's an IE specific thing... so another way to determine that the content has been fully loaded into the iFrame has to be used. I'm not sure what to use.
3) The Back button is broken by this code. I'm thinking of implementing a feature where the javascript monitors the SRC attribute of the iFrame, and if it changes (by the user clicking the back button), it will trigger the update function. Of course, you'd also have to keep track of which DIV the content was loaded into.
By updating the code, I hope to:
1) make it work cross-browser
2) make it compatible with any new DOM2 compatible browsers that are released
3) fix the Back button problem
I think once this thing is working in the manner I have envisioned, it will be a widely used script, as it will allow layout that works similar to tables or frames, without the problems that those layouts entail (ie: back button problem, search engine indexing problems, otherly-abled persons accessibility problems, etc.)
I'd like to thank Scott Isaacs for coming up with the script in the first place... it's pure genius, allowing a flexibility and freedom in website design that already solves several problems inherent in Frames and Tables layouts.
