Locally loading XML files

[RobG]

I am loading local XML files into an iFrame by simply setting its src
attribute to the URL of the xml file.

To get the files to display the way I want, I manually added a style
element to the top of the files, e.g.

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="validationReportNS.xsl"?>
<ValidationReport xmlns="..." id="...">
...
</ValidationReport>


however that is annoying - what I'd like to do is set the style sheet
using a function when the document is loaded. I've been trying
something like:

function loadFile(sourceID, targetID) {
var source = document.getElementById(sourceID);
var target = document.getElementById(targetID);
target.src = source.value;
addStyleSheet(targetID);
}

function addStyleSheet(id) {
var el = document.getElementById(id);
var xmlDoc = el.contentDocument;
var ss = xmlDoc.createElement('xml-stylesheet')
ss.type="text/xsl";
ss.href="validationReportNS.xsl";

// The following line is supposed to insert the stylesheet
xmlDoc.insertBefore(ss, xmlDoc.firstChild.nextSibling)
}

using a file input, button to call the function and an iFrame to
display it, e.g.

<div>
<input type="file" id="inp0">
<input type="button" value="Load"
onclick="loadFile('inp0', 'if0');">
<div style="height: 900px;">
<iframe id="if0" width="90%" height="90%"></iframe>
</div>


Is what I am trying to do possible using the method above? Or do I
have to load the document as an XML document, then add the style
element, then add it to the iFrame?

Any hints?

 

[RobG]

After searching this news group more, and reading more of Martin
Honnen's posts, I've arrived at a reasonable solution for now. Futher
work is required however.

I am loading local XML files into an iFrame by simply setting its src
attribute to the URL of the xml file.

To get the files to display the way I want, I manually added a style
element to the top of the files, e.g. [...]
however that is annoying - what I'd like to do is set the style sheet
using a function when the document is loaded.
[...]
Is what I am trying to do possible using the method above?

I don't think so, the xsl-stylesheet is used as a processing
instruction as the file loads so once it is loaded, it's now HTML (or
at least that's what my xsl file does to it).

 Or do I
have to load the document as an XML document, then add the style
element, then add it to the iFrame?

Yes, more or less. I ditched the iframe and simply replace the
content of a div with the content of the document's body. I could
probably do it more elegantly using a documentFragment, but that's for
future development.

The current code is below, it uses Mozilla's proprietary client-side
XSLT so no support for IE. I really think I should be able to drop
the entire document into an iFrame, a div works for now:

// Loads a file as an XML file to create an XML document
// IE support removed
var loadXMLFile = function(fileName) {
var xmlDoc;

// Create an empty XML DOM document
if (document && document.implementation &&
document.implementation.createDocument ) {
xmlDoc = document.implementation.createDocument("","",null);
}

// Load file into xmlDoc. Use try catch - if file isn't
// available, Firefox throws a security error
if (xmlDoc) {
xmlDoc.async = false;
try {
var loadOK = xmlDoc.load(fileName);
} catch(e) {}
}
return loadOK? xmlDoc : null;
}

// Load an XML document, do a transform, put content into
// target element.
function loadAndTransform(sourceID, targetID) {

// Get elements
var source = document.getElementById(sourceID);
var target = document.getElementById(targetID);

// Load the XML file
var xmlDoc = loadXMLFile(source.value);

// Transform and insert it
transformDoc(xmlDoc, 'validationReportNS.xsl', target);
}

// From mozilla documentation:
// <URL: https://developer.mozilla.org/en/Us...ript_interface_to_XSL_Transformationsfunction transformDoc(xmlDoc, xslURI, target) {

// Create a processor
var processor = new XSLTProcessor();

// Create a temporary document to load the stylsheet into
var tempDoc = document.implementation.createDocument("", "test",
null);

// Add a load listener so when the load finishes, processing happens
tempDoc.addEventListener("load", onload, false);

// Load the xsl file
tempDoc.load(xslURI);

// The load listener
function onload() {
processor.importStylesheet(tempDoc);

// Transform the XML document
var newDoc = processor.transformToDocument(xmlDoc);

// Replace content of target element with
// contents of transformed document's body
var body = newDoc.getElementsByTagName('body')[0];
removeContent(target);
addEls(target, body.childNodes);
}

// Helper functions
// Add all childElements of collection to el
function addEls(el, collection) {
while (collection[0]) {
el.appendChild(collection[0]);
}
}

// Remove all content from el
function removeContent(el) {
while (el.firstChild) {
el.removeChild(el.firstChild);
}
}
}