Cross-browser XML/XSL check JavaScript

What does this script do?

This script checks whether a browser supports client side XML/XSL transformations, if you have no idea what I'm talking about: don't bother wasting your time here, 'cos you'll need to create your own XML/XSL pages before this script can be of any use. I recommend visiting w3schools.com if you want to learn it.

Introduction

XML can be used for a lot of things. One of them is storing data on a website. XML files contain raw data, you'll need some sort of style sheet to give them a layout. XSL will do just that, however this technique is fairly new, you'll need a modern browser to view XML/XSL pages.

One workaround is converting the XML file to HTML on the server using a scripting language like ASP, JSP or PHP. However, this method puts a lot of strain on your server and might make pages slow, this problem will get bigger when the amount of visitors increases.

Ideal would be the ability to check whether someone's browser supports XML/XSL or not, and depending on that give them a client or server side transformation.

A method of doing this making a list of all the browsers that support this technique and compare the the visitors browser to this list. Making such a list will be a lot of work, would need constant updating as new browsers keep coming out and wouldn't be really fool proof, anyone can change their browser's name.

A better way of doing this is by serving an XML file and see whether it renders or not, simple as that and almost fool proof, users can still get around it by turning off JavaScript support, but what good would it do them?

Setting things up

In order to make this work you'll need quite an amount of tiny files.

• xmlcheck.js
  Contains all the JavaScript code that checks whether the XML/XSL files are rendered properly.
• xmlcheck.xml
  A tiny XML file with only one value in it (why need more?)
• xmlcheck.xsl
  The XML style sheet that will be called upon if XML is supported.

You'll also need to make an HTML page (like this one) and put in the following code:

<iframe src="xmlcheck.xml" name="xml" style="display: none;" onload="xmlCheck()"></iframe>
<script type="text/javascript" src="xmlcheck.js"></script>

This code makes a hidden iframe with the XML page in it, once it is loaded it calls a JavaScript function in xmlcheck.js. Simple as that!

The code is rather useless in it's current state, doing nothing more than giving an alert whether XML is working or not. In order to make something useful out of it is important that we understand this little piece of JavaScript works.

function xmlCheck() {
    
    if(frames['xml'].document.getElementById('xmlworks').value == "true") {
        alert("XML Works!");

        //send to a different URL: (remove comment slashes)
        //location.replace("mypage.xml");

    } else {
        alert("Your browser does not support client side XML/XSL transformations!");
    }
}

It's nothing more than a single function named xmlCheck(), it looks for a frame named xml and then searches that page for an element called xmlworks and if it's value is "true". If it can be found a message saying that XML works is displayed.

Instead of showing a message like that it is far more useful to redirect a user to an XML page, now that we know that it works. It's easy, just use the location.replace() that is already in the code.

By the way, don't use location.href, it will register the page in your browser's history and if the user uses the back-button the browsers goes to the XML check page and then redirects the user again to the next page... very annoying. Stick with location.replace()!

Of course you can change it into anything you want, the same thing counts for the else {} part, if XML not works you can redirect visitors to an HTML page, or display a message that they should upgrade their browser. Do whatever you think makes sense.

If you find this page useful, or have any comments to it; leave a message on the bottom. If your comments make any sense I will update this page.

Download the script

To download the script you'll need the files mentioned above (they're blue, you can click on their name!) and the little piece of HTML code. Or, if that is too much work you can always clock the button below and download a tiny ZIP file below.

Seperate files:

• index.html
• xmlcheck.js
• xmlcheck.xml
• xmlcheck.xsl

---