I need help with existing code...

[DarrenBrothers]

Hi, all.

I have some existing Javascript code that is used on our website (http://www.hillscapital.com/) to dynamically update the contents of a DIV container. It places an external HTML file into the DIV container dynamically (without having to reload the entire page).

This allows us to keep certain portions of the page loaded all the time (our menu, quotes ticker and news ticker), while dynamically updating the content that is shown in the main part of the page.

Unfortunately, it is not cross-browser compatible, and I want it to be. It only works for IE 5 and higher right now.

Here's the code as it is now:
<!-- Start Dynamic Content Code
var doAll = (document.all!=null)

function getCSSPElement(id) {
// Return the positioned element with the specified ID
if(document.getElementById)
return document.getElementById(id)
else if (doAll)
return document.all[id]
else
return document.layers[id]
}

function checkIFrame(destID) {
var iframe = document.frames[destID+"target"]
if (iframe==null) {
document.body.insertAdjacentHTML("beforeEnd","<IFRAME STYLE='width: 0pt; height: 0pt' NAME='"+destID+"target' SRC='' ></IFRAME>")
iframe = document.frames[destID+"target"]
}
return iframe
}

function pollIFrame(destID) {
var destFrame = checkIFrame(destID)
if (destFrame.document.readyState=='complete') {
var el1 = getCSSPElement(destID)
el1.innerHTML = destFrame.document.body.innerHTML
} else
setTimeout("pollIFrame('"+destID+"')",200)
}

function updateContents(destID, src) {
var el1 = getCSSPElement(destID)
if (doAll) {
destFrame = checkIFrame(destID)
destFrame.location.href = src
setTimeout("pollIFrame('"+destID+"')",200)
}
else
el1.src = src
}

function update(destID, src) {
if (src=="none") {
var el1 = getCSSPElement(destID)
if (doAll)
el1.innerHTML = ""
else {
el1.document.open()
el1.document.write("")
el1.document.close()
}
}
else
updateContents(destID, src)
}

function openPage(page) {//Example javascript:openPage('http://www.yahoo.com/');
window.open(page , "external" , "toolbar=yes, location=no, status=yes, menubar=yes, resizable=yes , scrollbar=yes");
}
// End Dynamic Content Code -->

It is called like this:
update('content','intro.htm');

Where:
update = function name
content = DIV ID
intro.htm = external HTML file that will be placed into the DIV with the appropriate ID (in this case, 'content').

I contacted Eddie Traversa of the DHTMLNirvana.com website, and this is what he said:
"The problem you have with your script, is that you are using insertadjacentHTML which is IE specific code. If you use createElement and then use setAttribute to define the iframes properties then that should work in a cross browser fashion for you. "

Unfortunately, I don't know how to do what he suggested.

Can anyone help?

Thanks,
Darren Brothers
darrenbrothers@yahoo.com

[Charles]

Considering that 13% of users do not use JavaScript, the only way to achieve cross-browser accesiblity is to use the IFRAME element. (http://www.w3.org/TR/html4/present/frames.html#edef-IFRAME)

You'll still have problems with Netscape 4.x browsers but that's only 1% of the market. Your best bet is to use server side includes.

[DarrenBrothers]

Hi, all!
Well, it's been a long time, but I learned a bit more Javascript and a lot of DOM2, and started modifying the code on my own.

I decided to only support the newer DOM2 compatible browsers (IE 5.5+, NS6+).

Here's what I've got so far:
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('border','0px');
iframeID.style.width = '225px';
iframeID.style.height = '225px';
document.getElementById("forIFrame").appendChild(iframeID);
}
iframeID.location.replace(source);
return iframeID; //send the iframe ID
}

function pollIFrame(destID, source) {
var destFrame = checkIFrame(destID, source); //get iFrame ID
var fr = document.getElementById('"+destID+"target');
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);
}

function update(destID, source) {
var source='intro.shtml';
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.parentNode.removeChild(el1.childNodes[0]);
el1.removeChild(el1.childNodes[0]); //remove all the Nodes in target DIV
}
}
else {
pollIFrame(destID, source); //make sure iFrame is ready and update DIV contents
}
}

Issues:
The pollIFrame function still needs some way to determine whether the iFrame is done loading in the external HTML file before setting the DIV contents == iFrame contents.

I'm not sure if the appendChild in the pollIFrame function is correct, or is even right for what I'm trying to do (copy the Nodes from the iFrame to the DIV).

I'm not passing the iFrame the correct source (SRC). As such, it's not loading the external HTML file.

It doesn't work yet! :(

As you can see, I'm using only fully DOM-compatible methods... no innerHTML (a MS specific kludge that NS added at the last moment. The W3C says it may not be supported in new DOM2 compatible browsers.), no readyState=="complete" for the iFrame (that's IE only stuff). And, I want to stay away from putting code into each external HTML file to do load call-back... that's such a kludge, I can't even begin to tell you.

My reason for using only fully DOM-compatible methods is that once it's set up correctly, any DOM2 compatible browsers that are released will automatically work with this script.

My reason for using a fully self-contained method of loading the external HTML files (i.e.: no scripts inside each external HTML file to do onload callbacks) is that this will make the site easier to maintain and expand, and people who use WYSIWYG editors won't have to know how to insert the code into a newly created page to make it work (I put very little faith in the average person's ability to properly create web pages).

The reason I'm using this script in the first place is that it allows sighted users to have a DHTML effect, while not affecting the ability of search engines / text-only-browsers / screen readers to follow the 'a href=' portion of the links to the actual external HTML file. Thus, the site is easily indexed by search engines and viewed by non-graphical browsers.

So, if you've got javascript coding skills, know the DOM2, and want to help me get a great script working, be sure to post.