Preparing Websites with Active Content for Announced Browser Changes

Nombre d'entre vous sont au courant des modifications annoncées dans Microsoft Internet Explorer. Vous vous interrogez peut-être sur leur impact sur vos sites web avec contenu et applications incorporés ("actifs"). À titre d'exemple, les fichiers Macromedia Flash, Shockwave ou Adobe Acrobat sont du contenu actif. Vous avez sans doute déjà réfléchi aux mesures à prendre pour anticiper ces changements.

Quel sera l'impact des modifications du navigateur sur mon site ?

Quelles seront exactement les conséquences des modifications du navigateur ? Quand ces changements prendront-ils effet ? Les utilisateurs pourront-ils toujours visualiser le contenu actif dans les jours qui viennent ?

Tant qu'ils n'auront pas mis à jour leur navigateur Internet Explorer sous Windows, les utilisateurs continueront de voir le contenu et les applications actifs sous leur forme actuelle. Microsoft a d'abord publié une mise à jour facultative du navigateur en février 2006. Après l'avoir appliquée, les utilisateurs doivent cliquer sur le contenu incorporé, ou "actif", pour interagir avec lui. Pour plus d'informations, consultez les ressources* de MSDN (Microsoft Developer Network).

Certains sites ne seront pas concernés par les modifications. La nouvelle version du navigateur invite l'utilisateur à cliquer pour afficher le contenu actif codé à l'aide de balises <object>, <embed> ou <applet> incorporées dans un fichier HTML. Toutefois, les pages HTML qui utilisent des balises générées par des scripts externes (JavaScript, par exemple), notamment celles qui font appel à des scripts de détection Flash complexes, devraient continuer à fonctionner normalement sans modification.

Vous serez nombreux à vouloir remanier vos sites pour pallier les modifications obligatoires du navigateur. Bonne nouvelle : l'un des correctifs proposés est applicable dès maintenant.

Éléments requis

Fichiers exemples

Téléchargez les fichiers JavaScript (zip de 4 Ko)

Remarque : Ce fichier d'archive exemple contient trois fichiers :

• AC_RunActiveContent.js : fichier permettant d'appliquer la solution pour le contenu Flash et Shockwave décrite à la section Solution JavaScript externe n° 2 : pour plusieurs occurrences de contenu actif.
• AC_ActiveX.js : fichier permettant d'appliquer la solution décrite à la section Solutions pour les autres types de contenu actif.
• SampleActiveContent.html : ce fichier fournit un exemple du code à utiliser dans votre page HTML lors de l'utilisation des fichiers AC_RunActiveContent.js et AC_ActiveX.js.

Mise en route : solution d'affichage du contenu actif

Voici quelques exemples de code "avant et après" fournis par l'équipe de développement d'Adobe, que vous pourrez utiliser pour mettre à jour les pages HTML de votre site avec contenu actif.

Code à remplacer

Voici un exemple de code (une simple balise <object>) qui ne fonctionnera plus comme avant dans la nouvelle version du navigateur :

<object classid="clsid:D27CDB6E..." ...>
    <param name="movie" value="foo.swf">
</object>

Si vous remplacez cette balise par un script appelant du code externe à votre page HTML, comme indiqué dans les deux méthodes suivantes, la page devrait continuer à fonctionner dans la version mise à jour d'IE. Pour plus d'informations, consultez les ressources de MSDN (Microsoft Developer Network) à l'adresse msdn.microsoft.com/ieupdate/*.

Nous avons testé ce correctif JavaScript ; il fonctionne pour les principaux navigateurs. Reportez-vous à notre tableau comparatif des tests pour savoir si cette solution est satisfaisante pour votre site.

Solution JavaScript externe n° 1 : pour les occurrences uniques (ou rares) de contenu incorporé

Si votre site contient un ou quelques éléments de contenu incorporé, la solution simple proposée ci-dessous est sans doute la mieux adaptée. Pour la mettre en œuvre, vous devez créer des fichiers JavaScript (JS) externes uniques pour chaque page du site présentant du contenu incorporé.

Remarque : Si une page comprend plusieurs éléments de contenu incorporé, créez des fonctions uniques (voir Étape 1) dans le fichier JS externe pour intégrer les balises de chaque élément de contenu à l'aide de l'instruction document.write. Notez que cette solution ne figure pas dans les fichiers exemples. Il vous suffit de suivre les instructions ci-dessous pour générer le nouveau code à partir de celui de votre page HTML actuelle.

Marche à suivre :

1. Créez le fichier JS externe et placez-le sur votre site. Dans cet exemple, nommez-le foo.js . Ce script doit intégrer la balise object/embed complète qui figurait précédemment dans votre fichier HTML à l'aide de l'instruction document.write  :

   function RunFoo()
   {
       document.write('<object classid="clsid:D27CDB6E..." ...>\n');
       document.write('<param name="movie" value="foo.swf" />\n');
       document.write('</object>\n');
   }
   

2. Ajoutez une instruction include JavaScript qui pointe vers le fichier JavaScript de l'Étape 1 dans la section <head> de la page web incorporant le contenu.

   <script src="[path]/foo.js" type="text/javascript"></script>
   
   

3. Remplacez chaque balise <object>, <embed> et <applet> par un appel des fichiers externes appropriés, comme suit :

   <script type="text/javascript">RunFoo();</script>
   
   

Solution JavaScript externe n° 2 : pour plusieurs occurrences de contenu incorporé

Si votre site comporte un grand nombre d'éléments de contenu incorporés ou si vous incorporez le contenu de différentes façons, cette solution présente des avantages considérables. Elle vous permet en effet d'utiliser un seul fichier JS externe pour tous vos contenus Flash et Shockwave incorporés, plutôt que d'en créer un pour chaque fichier concerné (comme avec la solution n° 1). Le fichier JS contient des fonctions qui incorporent votre contenu actif selon les paramètres qu'il reçoit de la page principale.

Pour mettre en œuvre cette solution, procédez comme suit :

1. Copiez le fichier JS externe contenant les fonctions de la solution palliative à un emplacement partagé sur votre site web. Attribuez-lui le nom AC_RunActiveContent.js pour cet exemple, ou tout autre nom de votre choix.

   Téléchargez les fichiers JavaScript (zip de 4 Ko)

   Le code du fichier AC_RunActiveContent.js utilise des arguments que vous lui transmettez (voir Étape 3) pour construire une chaîne de balises complète qu'il écrit dans votre document.

2. Ajoutez une instruction include JavaScript qui pointe vers les fichiers JavaScript partagés de l'Étape 1 dans la section <head> de chaque page web de votre site incluant une balise object/embed.

   <script src="[path]/AC_RunActiveContent.js" type="text/javascript"></script>

3. Remplacez chaque instance des balises <object> et <embed> de vos pages par les appels de fonctions appropriés. Vous avez le choix entre ces deux appels de fonction : celui pour le contenu Flash et celui pour le contenu Shockwave.

   AC_FL_RunContent(
       "att1Name","att1Value", 
       "att2Name","att2Value", 
       ... 
       "attnName","attnValue" 
   );

   AC_SW_RunContent( 
       "att1Name","att1Value", 
       "att2Name","att2Value", 
       ... 
       "attnName","attnValue" 
   );
   

   Remarque : JavaScript doit être activé pour que ces fonctions puissent être effectives. Pour que les utilisateurs de navigateurs où JavaScript n'est pas activé visualisent le contenu actif, faites suivre chaque fonction des balises <object>/<embed> classiques au sein de balises <noscript>, comme indiqué à la section Que se passe-t-il lorsque JavaScript est désactivé ?
   
   Lorsque vous remplacez les balises object et embed par ces nouveaux appels de fonction, modifiez les paires d'arguments (att1Name, att1Value) pour y inclure les attributs appropriés et les valeurs de vos balises d'origine telles que movie, id, bgcolor, etc. Vous pouvez consulter un exemple de ce code pour un fichier Flash précis dans le fichier exemple SampleActiveContent.html à télécharger.

   Lorsque vous modifiez l'appel de fonction pour transmettre l'attribut movie, n'ajoutez pas d'extension de fichier au nom de l'animation. Transmettez le nom de l'animation comme suit :

   "movie", "foo".

   Le code JavaScript externe ajoute l'extension appropriée.

   Si vous transmettez les paramètres à votre fichier Flash, il se peut que l'attribut movie d'origine se présente comme suit :

   foo.swf?username=Bob&color=red

   Pour que le nom et les attributs de couleur soient correctement transmis, incluez-les en tant qu'arguments dans votre fonction, comme suit (sans ajouter d'extension de fichier) :

   "foo?username=Bob&color=red"

   Veillez à fournir la liste de vos arguments par paires nom/valeur. Vous devez transmettre un nombre pair d'éléments au code AC_RunActiveContent.js pour que ce dernier fonctionne. Ce code insère automatiquement les autres paramètres requis (par exemple, classid et mimeType) comme résultat de l'appel de fonction propre au lecteur. Si vous devez mettre à jour la valeur d'un de ces paramètres requis, modifiez-la dans les fonctions AC_FL_RunContent() ou AC_SW_RunContent(), qui se trouvent dans le code AC_RunActiveContent.js. Dans votre page HTML, transmettez uniquement les arguments des paramètres facultatifs.

   Voici un exemple de remplacement selon cette méthode de balises object et embed incorporées standard qui lisent un fichier Flash. Si vous deviez remplacer le code suivant :

   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="550" height="400" align="middle">
       <param name="allowScriptAccess" value="sameDomain" /> 
       <param name="movie" value="foo.swf" /> 
       <param name="quality" value="high" />
       <param name="bgcolor" value="#ffffff" />
   <embed src="foo.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="foo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
   </object>

   Vous devriez insérer l'appel de fonction suivant :

   <script type="text/javascript" >
   AC_FL_RunContent('codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','550','height','400','align','middle','src','foo','quality','high','bgcolor','#ffffff','name','foo','allowscriptaccess','sameDomain','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','foo' );
   </script> 
   
   

Que se passe-t-il lorsque JavaScript est désactivé ?

Les deux méthodes présentées ci-dessus reposent sur JavaScript. Il se peut qu'un faible pourcentage de visiteurs de votre site aient désactivé JavaScript dans leur navigateur. Les techniques proposées ci-dessus ne fonctionneront pas dans ce cas de figure (le contenu incorporé ne sera pas du tout visible). N'oubliez pas que la plupart des utilisateurs d'IE qui auront désactivé JavaScript auront peut-être également désactivé la prise en charge d'ActiveX. Or, ceux qui désactivent ActiveX ne voient pas le contenu Flash ou Shockwave dans leur navigateur. La migration du contenu incorporé vers les techniques JavaScript ne change donc pas leur perception. Résultat : vous devez uniquement vous préoccuper des utilisateurs qui ont désactivé JavaScript mais pas ActiveX.

Pour offrir une solution au faible pourcentage d'utilisateurs ayant désactivé JavaScript mais pas ActiveX, insérez les balises <object> et <embed> directement dans le code HTML, mais au sein d'une balise <noscript>. La balise <noscript> est une balise standard qui fournit du code fiable pour les utilisateurs ayant désactivé JavaScript. Voici un exemple d'animation Flash incorporée standard, imbriquée dans une balise <noscript> :

<noscript>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" id="foo" align="middle">
    <param name="allowScriptAccess" value="sameDomain" /> 
    <param name="movie" value="foo.swf" /> 
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
<embed src="foo.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="foo" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</noscript>

Ceux qui ont désactivé JavaScript devront cliquer pour activer le contenu dans le navigateur mis à jour lorsqu'ils visiteront une page comportant du code similaire à celui présenté ci-dessus. Ils pourront dès lors interagir avec le contenu, comme avant.

Solution pour les autres types de contenu actif

Les fichiers exemples associés à cet article incluent également un fichier JavaScript appelé AC_ActiveX.js. Vous n'avez pas besoin de ce script pour afficher le contenu Flash ou Shockwave à l'aide des méthodes décrites ci-dessus. Les développeurs qui manipulent d'autres types de contenu actif dans les pages web peuvent cependant l'utiliser de sorte que ces contenus s'affichent sans activation par clic. Considérez-le comme un script générique fonctionnant avec un grand nombre de contenus. Il s'utilise à peu près de la même façon que le script AC_RunActiveContent.js décrit ci-avant.

Pour le mettre en œuvre, commencez par inclure les fichiers externes dans la section <head> de votre page HTML à l'aide du code suivant :

<script src="[path]/AC_ActiveX.js" type="text/javascript"></script> 
<script src="[path]/AC_RunActiveContent.js" type="text/javascript"></script>

Tout comme dans la méthode Flash/Shockwave, remplacez ensuite le code <object> et <embed> en modifiant les paires attribut-valeur en fonction de votre contenu :

<script type="text/javascript" >
     AC_AX_RunContent( 'classid','clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFB','width','150','height','100','src','fakefile.foo' );
</script>

Remarque : Vous trouverez un exemple de code similaire dans le fichier exemple HTML SampleActiveContent.html à télécharger.

Restez au fait de l'actualité : Pôle de développement de contenu actif

Adobe est convaincu que vous réussirez à mettre en œuvre la solution sur votre site à l'aide de l'une des méthodes proposées. Par mesure de sécurité, nous continuerons néanmoins à vous fournir toutes les informations nécessaires à mesure qu'elles seront publiées. Consultez régulièrement ce site afin d'être au fait des mises à jour et des nouvelles méthodes d'affichage du contenu actif.

A propos de l'auteur