JAVASCRIPT

Blog Parser

Vendredi 21 Décembre 2002

Il est enfin possible d'utiliser un processeur de feuilles de style XML ailleurs que dans Internet Explorer; en effet Mozilla vient de se voir intégré, avec la sortie de sa version 1.0, un processeur XSLT identique à celui déjà présent dans l'activeX Internet Explorer MSXML.

Au résultat, le script est compatible avec tous les navigateurs fonctionnant avec Mozilla 5 comme Netscape 7.x, ainsi que bien entendu IE 5.x et supérieurs, selon que les activeX MSXML soit installée ou non( le script se charge de le détecter)

Grâce à cela il devient trés facile de transformer un document XML en une page HTML sans avoir recours à un langage serveur quelconque. En effet les deux navigateurs permettent aussi bien de charger des documents XML (donc XSL aussi) que de les parser et de les transformer en fragments HTML.

Voici le code, qui bien que compliqué aux premiers abords, relève d'une simplicité monstrueuse lorsqu'on sait qu'il aurait fallu plus d'une centaine de lignes pour écrire ce que permet de faire la feuille de style XSL en à peine une dizaine. L'exemple en téléchargement est celui utilisé pour afficher l'ancien agrrgateur de blog de la rubrique actualités de ce site.

Avertissement sur les problèmes liés à la sécurité

Il faut noter quand même que si le blog ne se situe pas sur le serveur qui en permet la consultation, les navigateurs vont tout simplement refuser d'accéder à ce fichier externe à votre site pour des raisons de sécurité de configuration de la sandbox du navigateur.

C'est donc à regret qu'il faut utiliser un petit bout de script PHP de quelques lignes pour accéder au document XML du blog concerné et le rediffuser en tant que document interne au site. Le fichier PHP en question est fourni dans l'archive à télécharger, et il est trés simple.

Cependant, si vous diffusez votre blog personnel, vous n'aurez pas à utiliser cette page PHP de redirection.
De même que lorsque vous aurez téléchargé l'exemple, il ne sera pas la peine d'intégrer la page PHP en local non plus, puisqu'Internet Explorer permet l'éxécution du script en local malgré l'inteterdiction de sa sandbox. Il vous demandera par contre d'outrepasser les droits d'accés à ce fichier aprés une alerte de sécurité dont il ne faudra pas vous inquiéter.

Pour utiliser la page PHP qui permettra de mettre en ligne l'application sans se voir refuser l'accés aux blogs externes à votre site, il vous suffira de changer l'URL d'exemple (ici le blog de www.nodrugnobug.com par l'URL de la page PHP de redirection sans bien faire pointer cette même page sur l'URL du blog de votre choix.

Pour le script en lui-même, vous remarquerez qu'aucun des deux langages de script (Jscript/Javascript) ne permettent de gérer aisemment le téléchargement asynchrone des fichiers de par l'impossibilité de faire appeler la méthode du gestionnaire d'évènement en fin de téléchargement. dans le scope de la classe Il faut donc ruser à coup de setInterval() et de déclarations de variables statiques dans les méthodes du gestionnaire d'évement. C'est sans risque et pratique dans un cas de téléchargement unique comme celui-ci, mais franchement déconseillé en général.

Télécharger:
Icone archive
Poids: 4Ko
Format: zip
/*-------------------------------------*/
/* CLASSE RESERVEE A INTERNET EXPLORER
/*-------------------------------------*/        

IE_RSSparserCLASS = function(){}

//INTERVAL DESTINE A ATTENDRE LA FIN DU CHARGEMENT DES FICHIERS XML ET XSL
IE_RSSparserCLASS.prototype.interval = function()
{
    //LA FONCTION PORTE SON CONTROLLEUR
    that = arguments.callee.controller;

    //UNE ERREUR EST RETOURNEE SI LE DOCUMENT XSL N'A PUT ETRE RENDU ACCESSIBLE
    if(that.XMLdoc.readyState == 4 && that.XMLdoc.parseError.errorCode != 0)
        return that.onError('Le téléchargement du fichier XML a échoué');

    //UNE ERREUR EST RETOURNEE SI LE DOCUMENT XSL N'A PUT ETRE RENDU ACCESSIBLE
    if(that.XSLdoc.readyState == 4 && that.XSLdoc.parseError.errorCode != 0)
        return that.onError('Le téléchargement du fichier XSL a échoué');

    //SI LES DEUX FICHIERS SONT ACCESSIBLES ET LE DOCUMENT CHARGE
    if(
        that.XMLdoc.readyState == 4 &&
        that.XSLdoc.readyState == 4 &&
        document.readyState == 'complete'
    ){
        clearInterval(that.intervalNum);
        that.onLoad()
    }
}

//CREES UN OBJET ACTIVEX MSXML DE LA VERSION LA PLUS RECENTE INSTALLEE
//SI AUCUN N'A PU ETRE TROUVE, RETOURNES FALSE.
IE_RSSparserCLASS.prototype.getLatestMSXML = function()
{
    var i,activeXarr;

    activeXarr = new Array
    (
        "MSXML4.DOMDocument",
        "MSXML3.DOMDocument",
        "MSXML2.DOMDocument",
        "MSXML.DOMDocument",
        "Microsoft.XmlDom"
    );

    for(i=0; i<activeXarr.length; i++)
    {
        try
        {
            new ActiveXObject(activeXarr[i]);
            return activeXarr[i];
        } 
        catch(objException){}
    }

    return false;
}

IE_RSSparserCLASS.prototype.load = function(XMLurl,XSLurl)
{
    var latestMSXML;

    //SI AUCUN OBJET ACTIVEX MSXML N'A PU ETRE CREE RENVOIES UNE ERREUR (MAC IE par exemple)
    latestMSXML = this.getLatestMSXML();
    if(!latestMSXML) this.onError('Vous n\'avez pas l\'activeX MSXML nécessaire à visualiser les NEWS');

    //CHARGE LE FICHIER XML DE MANIERE ASYNCHRONE
    //LE RESTE DU SCRIPT EST EXECUTT AVANT LA FIN DU TTLLCHARGEMENT
    this.XMLdoc = new ActiveXObject(latestMSXML);
    this.XMLdoc.resolveExternals = false;
    this.XMLdoc.validateOnParse = true;
    this.XMLdoc.async = true;

    //CHARGE LE FICHIER XML DE MANIERE ASYNCHRONE
    //LE RESTE DU SCRIPT EST EXECUTT AVANT LA FIN DU TTLLCHARGEMENT
    this.XSLdoc = new ActiveXObject(latestMSXML);
    this.XSLdoc.resolveExternals = false;
    this.XSLdoc.validateOnParse = true;
    this.XSLdoc.async = true;

    this.XMLdoc.load(XMLurl);
    this.XSLdoc.load(XSLurl);

    this.interval.controller = this;
    this.intervalNum = setInterval(this.interval,50);
}

//GESTION BASIQUE DES MESSAGES D'ERREUR
IE_RSSparserCLASS.prototype.onError = function(sError)
{
    window.RSSID.innerHTML = '<span style="font-weight:bold; font-size:20pt;">Erreur:</span><br />' + sError;
}

//EXECUTION DE LA TRANSFORMATION DU DOCUMENT XML PAR LA FEUILLE DE STYLE XSL 
IE_RSSparserCLASS.prototype.onLoad = function()
{
    this.HTMLdoc = this.XMLdoc.transformNode(this.XSLdoc);

    //LE RESULTAT LA TRANSFORMATION DU DOCUMENT XML PAR LA FEUILLE DE STYLE XSL EST ENVOYE
    //DANS L'OBJET DOM HTML DE LA PAGE HTML DONT L 'ID EST *RSSID* 
    xDestination = document.getElementById('RSSID');
    xDestination.innerHTML = this.HTMLdoc;

}


//------------------------------------------------------------------------


/*--------------------------*/
/* CLASSE RESERVEE A MOZILLA
/*--------------------------*/

MOZ_RSSparserCLASS = function(){}

MOZ_RSSparserCLASS.prototype.load = function(XMLurl, XSLurl)
{
    var latestMSXML;

    //CREATION D'UN PRELOADER POUR LE DOCUMENT XHTML
    this.HTMLdocLoaded.controller = this;
    window.addEventListener
    (
        "load",
        this.HTMLdocLoaded,
        false
    );

    //CREATION D'UN PRELOADER POUR LE DOCUMENT XML
    this.XMLdocLoaded.controller = this;
    this.XMLdoc = document.implementation.createDocument
    (
        "http://www.w3.org/1999/XML/",
        "xml",
        null
    );
    this.XMLdoc.addEventListener
    (
        "load",
        this.XMLdocLoaded,
        false
    );

    //CREATION D'UN PRELOADER POUR LE DOCUMENT XSL
    this.XSLdocLoaded.controller = this;
    this.XSLdoc = document.implementation.createDocument
    (
        "http://www.w3.org/1999/XSL/Transform",
        "stylesheet",
        null
    );
    this.XSLdoc.addEventListener
    (
        "load",
        this.XSLdocLoaded,
        false
    );

    this.XMLdoc.load(XMLurl);
    this.XSLdoc.load(XSLurl);
}

MOZ_RSSparserCLASS.prototype.HTMLdocLoaded = function()
{
    //LE DOCUMENT HTML EST ACCESSIBLE
    document.readyState=4;
    arguments.callee.controller.onLoad();
}

MOZ_RSSparserCLASS.prototype.XMLdocLoaded = function()
{
    //LE DOCUMENT XML EST ACCESSIBLE
    arguments.callee.controller.XMLdoc.readyState=4;
    arguments.callee.controller.onLoad();
}

MOZ_RSSparserCLASS.prototype.XSLdocLoaded = function()
{
    //LE DOCUMENT XSL EST ACCESSIBLE
    arguments.callee.controller.XSLdoc.readyState=4;
    arguments.callee.controller.onLoad();
}

MOZ_RSSparserCLASS.prototype.onLoad = function()
{

    var xDestination,xslProcessor,domFragment

    //SI LE DOCUMENT HTML,XSL ET XML SONT CHARGES
    if(
        document.readyState != 4 ||
        !(this.XMLdoc && this.XMLdoc.readyState == 4) ||
        !(this.XSLdoc && this.XSLdoc.readyState == 4)
    ) return;

    //LE DOCUMENT XML EST TRANSFORME EN FRAGMENT HTML PAR LE PROCESSEUR XSLT INTEGRE AU NAVIGATEUR
    xslProcessor = new XSLTProcessor();

    //NETSCAPE 7.0
       if(!xslProcessor.importStylesheet)
       {
        var out = document.implementation.createDocument("text/html","",null);
        xslProcessor.transformDocument(this.XMLdoc,this.XSLdoc,out,null);
        this.HTMLdoc = out.lastChild;
    }
    
    else
    
    //BROWSER MOZILLA
    {
        xslProcessor.importStylesheet(this.XSLdoc);
        this.HTMLdoc = xslProcessor.transformToFragment(this.XMLdoc,document);
    }
    
    /*
    SEUL MOYEN DE VISUALISER LA SOURCE DU RESULTAT DE LA TRANSFORMATION XSL
    var serializer = new XMLSerializer();
       var text = serializer.serializeToString(this.HTMLdoc);
       alert(text);
       */

    //LE RESULTAT LA TRANSFORMATION DU DOCUMENT XML PAR LA FEUILLE DE STYLE XSL EST ENVOYE
    //DANS L'OBJET DOM HTML DE LA PAGE HTML DONT L 'ID EST *RSSID* 
    xDestination = document.getElementById('RSSID');
    xDestination.removeChild(xDestination.firstChild);
    xDestination.appendChild(this.HTMLdoc);

}


//------------------------------------------------------------------------

/*****************************************************/
//CHARGEMENT DES FICHIERS SELON LE TYPE DU NAVIGATEUR
/*****************************************************/

var XMLurl = 'http://www.nodrugnobug.com/nodrugnobugRss.xml';
var XSLurl = 'style.xsl';
window.isIE = navigator.appName.substring(0,9) == 'Microsoft';
window.isWin = String(navigator.platform).indexOf('Win') >=0;
window.isMoz5 = navigator.userAgent.substr(0,'Mozilla/5.0'.length) == 'Mozilla/5.0';

//MOZILLA ET NETSCAPE 7.0
if(window.isMoz5)
{
    new MOZ_RSSparserCLASS().load
    (
        XMLurl,
        XSLurl
    );
}

else

//INTERNET EXPLORER
if(window.isIE && window.isWin)
{
    new IE_RSSparserCLASS().load
    (
        XMLurl,
        XSLurl
    );
}

else

//NN 4< / OPERA / IE MAC/ IE 4< / AMAYA / LINX
document.write("Votre navigateur ne supporte pas les transformations XSL et c'est bien fait pour vous !!!");
  rss rss english xhtml 1.1 css 2.0 wdg