Roger Kovack

Hi,

Very informative site. I really appreciate your work.

I've been using hidden iframes to load 'pages' from the server, then
display them in a div which is then made visible. Both the iframe and the
div are loaded in the main page. On some click event the iframe src
attribute is set to the desired content URL. That content contains an
onLoad attribute on the body tag which fires the function that copies the
innerHTML from the iframe into the innerHTML of the display div. This all
works great, has lots of control and none of the hassles of displaying the
iframe directly.

In brief, this div shows a left scrolling list of subjects. By clicking on
a subject the main content area of the div is populated with some of the
other data, really mark-up, that is also a part of the iframe content. So
the div that is bound to the hidden iframe is a mini application in itself.

Then development continues and I find that the content size has grown to
close to 200Kbyte. That's a really long download time on an analog modem.
Since I use server side XSL:T to generate the web pages, I modified my
stylesheet and found that the real data stipped of all the markup is about
16Kbyte, less than 10% of the full markup. So it's clear that most of the
weight of the page is markup and even worse than that, repeated data.

I next modified the original XSLT stylesheet again to just add the markup
to the raw XML data and have that run on the browser. The result is almost
great. The download time has dropped by 90%. And the code was (almost)
simple:

// get a reference to the hidden iframe
edSrc = document.getElementById('ttedsrc');
// and get the desired XML from the server, using relative URI
edSrc.src = '../viewer.xml?_xslv=xsl/wf/tt-edit-xmlsrc.xsl&wfmd=tsk&wiid=' + wiid ;

// later on when the onLoad event fires, move the content to the display div
function ttEditSrc(doc){
  // doc is the document passed by the onLoad event as ttEditSrc(document)
  //edDiv is the displayable div
  edDiv = document.getElementById('ttedit');
  edDiv.innerHTML = doc.body.innerHTML;
  edDiv.style.visibility = 'visible';
}

So amazingly this all works great in FireFox. IE sort of shows the content
but doesn't quite get it right. Only part of it appears to be transformed.
Do you think there is any relatively painless way of making IE do this
trick?

I looked at the script to use XMLHttpRequest and that responded with the
XML but never did the transform. The XML data starts off with
<?xml-stylesheet type="text/xsl" href="/builder/docs/xsl/tt-edit-client.xsl"?>

Looks like a major piece of code to fire off the transform engine by script.
The iframe just does it automatically.

Is there an easy fix? Or a pointer to a complete sample to do this in
script? I suppose if I wanted an easy fix I wouldn't be in this business to
start with. But sometimes coding an enormous module doesn't make sense for
the benefit.

Thanks for your time and consideration,

Roger Kovack

Thanks for your thoughtful response, Mark.

I think I'm going to be stuck with two versions for the time being. I'll 
try browser sniffing and just use this technique on Firefox while 
sending HTML to everything else.

This part of the application is only available to client's employees, 
not the general public. If they want the performance they either use 
Firefox or get a high speed connection. But neither is necessarily easy 
for the user. This could be used at an employee's home or unknown remote 
location, not necessarily a well equiped office. What's more, the 
burglary problem is enormous at the remote locations so leaving a 
computer there in a locked office isn't wise. This will lead to a 
somewhat unpredictable computer population that will be using the 
application. So installing FireFox may be an impractical thing to do.

Yes, web applications in a hostile environment.

Thanks for your tips and great explanations!

Roger Kovack