I've got some code that basically reads an external HTML file into a hidden iFrame, then sets the contents of a DIV container equal to the new contents of the iFrame. It's used to make a dynamically updateable web site (certain things on the page stay loaded, other things change... kind of like frames or tables layout, without the frames or tables). I like to think of it as Dynamic Client Side Include. or a type of client side SSI.
It's got the ability to update nested DIVs (you can place external HTML into the content DIV, that's got a DIV inside it, in which you can place other external HTML content). I need to maintain that functionality. I need it to work for web pages programmed to the HTML 4.01 Strict standard.
It's got two problems... it only works in Internet Explorer, and it messes up the browser history (I think I've got a solution for this, but I'm not sure how to implement it in the code. See below...)
I need for it to be able to work well across browsers that support the Document Object Model, iteration 2 (DOM2). I don't care to support the older browsers.
It's called like this:
--------------------------
----------
----------
----------
----------
----------
----------
--------
<a href="somepage.htm" onclick="update('content',
'somepage.
htm');retu
rn false;">Go To Some Page</a>
<div id="content">(external HTML file will be injected into this DIV)</div>
--------------------------
----------
----------
----------
----------
----------
----------
--------
Where:
update = javascript function name
content = target DIV ID
somepage.htm = external HTML file to be injected into the target DIV
Here's the existing code:
--------------------------
----------
----------
----------
----------
----------
----------
--------
var docgetElement = (document.getElementById!=
null) //test for newer browsers
var docAll = (document.all!=null) //test for older browsers
function getElement(id) {
// Return the positioned element with the specified ID
if(docgetElement)
return document.getElementById(id
) //newer browsers
else if (docAll)
return document.all[id] //older browsers
else if (!docgetElement && !docAll) { //error message for really 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) {
if (docAll) {
var iframeID = document.frames[destID+"ta
rget"] //get iFrame ID, if it exists
if (iframeID==null) { //if not, create it
document.body.insertAdjace
ntHTML("be
foreEnd","
<iframe style='width: 0pt; height: 0pt' name='"+destID+"target' src='' ></iframe>")
iframeID = document.frames[destID+"ta
rget"]
}
return iframeID; //send the iFrame ID
}
else if (docgetElement) {
var iframeID = window.frames[destID+"targ
et"] //get iframe ID, if it exists
if (iframeID==null) { //if not, create it
iframeID=document.createEl
ement('ifr
ame');
iframeID.setAttribute('id'
,'"+destID
+"target')
;
iframeID.setAttribute('nam
e','"+dest
ID+"target
');
iframeID.setAttribute('src
','');
iframeID.style.border='0px
';
iframeID.style.width='0px'
;
iframeID.style.height='0px
';
document.body.appendChild(
iframeID);
}
if (navigator.userAgent.index
Of('Gecko'
) !=-1) { // we have to give NS time to recognize the new IFrame
setTimeout('checkIFrame(de
stID)',500
);
return false;
}
return iframeID; //send the iframe ID
}
}
function pollIFrame(destID) {
var destFrame = checkIFrame(destID) //get iFrame ID
if (destFrame.document.readyS
tate=='com
plete') { //wait for iFrame to be ready
var el1 = getElement(destID) //get DIV id
el1.innerHTML = destFrame.document.body.in
nerHTML //set DIV content equal to iFrame contents
} else
setTimeout("pollIFrame('"+
destID+"')
",200) //otherwise, try again if iFrame not ready
}
function updateContents(destID, src) {
var el1 = getElement(destID) //get DIV id
destFrame = checkIFrame(destID) //get iFrame id
destFrame.location.href = src //set iFrame src to update content
setTimeout("pollIFrame('"+
destID+"')
",200) //make sure iFrame is ready and update DIV contents
}
function update(destID, src) {
if (src=="none" || src=="") {
var el1 = getElement(destID)
el1.innerHTML = ""
}
else {
updateContents(destID, src)
}
}
--------------------------
----------
----------
----------
----------
----------
----------
--------
I read that if you create the iFrame, fill it with content, set the DIV contents equal to the contents of the iFrame, then destroy the iFrame, it doesn't mess up the browser history. That's something I'd like to see implemented in the code above, along with making it work cross-browser.
Or, conversely, if you can think of a totally different way of accomplishing the same thing, and it still does what I need it to do, that'd be great, as well.
There's a 200 point bonus for the first person to come up with a complete, workable, copy-and-paste, drop-it-in-and-it-works-cr
oss-browse
r code solution. (I'll post a separate 'question' worth 200 for you.)
Thanks for your help.
