Méthode de suppression des cadres entourant les animations flash et activation automatique de leur focus lors du chargement des pages dans Internet Explorer.
Pourquoi ? Suite à son procès contre EOLAS, Microsoft a modifié son navigateur « IE » de telle sorte que tout flash dans une page doit d'abord être « cliqué » avant de devenir « actif », (voir copie d'écran ci-dessous).
Solutions Plusieurs techniques ont été proposées avec plus ou moins de succès pour contourner ce problème qui pénalise subitement beaucoup de sites. Les 2 plus célèbres sont celles de: ADOBE (propriétaire de flash) DECONCEPT (avec la technique swfOject) … Et la solution que je vais vous exposer, qui présente l'avantage de réutiliser les balises flash classiques.
Principe du JL_swf_ajax Voici la structure d'une page HTML contenant une animation flash et utilisant la technique JL_swf_ajax. <html> <head> ... </head> <body> <div id='JL_BAL_1111' title='ma_balise.txt'> <script src='jl_swf_ajax.js' type='text/javascript'></script>div> </body> </html>
Détails sur la balise <div id='JL_BAL_1111' title='ma_balise.txt'> <script src='jl_swf_ajax.js' type='text/javascript'></script></div> Donc une structure de ce type : <div><script></script></div> avec : 2 attributs pour la balise <div> : Id = 'JL_BAL_1111' C'est le nom de la balise. title='ma_balise.txt' C'est le fichier contenant la balise flash. 2 attributs pour la balise <script> : src='jl_swf_ajax.js' C'est le chemin vers le fichier javascript. type='text/javascript' Indique qu'il s'agit d'un script. Remarque : Les chemins de title et de src seront de préférence relatif. Si vous les prenez 'absolus' il faut que la page porteuse, la balise flash et le javascript soient pour des raisons de sécurité dans le même domaine.
Cinématique Comment fonctionne donc ce système ? Au chargement dès que la page rencontre la balise <script> cette dernière lance le chargement du mini-programme javascript. Le Javascript analyse alors la page et cherche la première balise <div> dont l'id commence par 'JL_BAL_'. Le javascript récupère alors dans son attribut 'title' l'adresse de la balise flash et renomme l'id et le title de la balise <div>. Le javascript lance alors une commande 'Ajax' qui va aller chercher la balise flash, attendre qu'elle soit chargée, et remplacer alors le contenu de la balise <div></div> par le contenu de la balise flash. Le flash peut alors se charger de manière traditionnelle.
Cohabitation Peut-on avoir plusieurs animations dans la même page ? OUI. Bien que la page recharge plusieurs fois le programme, ce dernier ne traite que la balise <div> qui l'encapsule. En effet dès que le programme rencontre sa <div> son premier 'travail' consiste à rendre 'invisible' aux autres scripts cette balise <div> en la renommant. Insistons sur cette codification de l'id des balises <div> Lorsque vous construisez la page il est important que les id commencent tous par 'JL_BAL_' suivi d'un nombre quelconque mais unique dans la page. (ceci afin de respecter l'unicité des ids) Dès que la balise <div> est rencontrée le script la renomme dans le format suivant : id='OK_BAL_' suivi d'un nombre aléatoire.
Conclusion Par rapport aux autres techniques celle-ci présente l'avantage de réutiliser tel quel la balise flash classique. On gagne ainsi en productivité et en simplicité. Il est ainsi par exemple très facile de 'remettre sur pied' un ancien site utilisant les balises classiques '<objet …><embed…./></object>. Du côté de la page elle-même le code est concis et ne présente pas de difficulté particulière. Le code javascript est léger, donc très rapide à charger.
Annexes (Le code javascript) function jl_loadpage(pgr, my_div){ if (pgr.readyState==4){ if (pgr.status==200){ my_div.innerHTML=pgr.responseText; } function jl_ajaxpage(url, my_div) { var pgr = false; if (window.XMLHttpRequest) pgr = new XMLHttpRequest() else if (window.ActiveXObject){ try { pgr = new ActiveXObject("Msxml2.XMLHTTP") catch (e){ try{ pgr = new ActiveXObject("Microsoft.XMLHTTP") catch (e){} else return false pgr.onreadystatechange=function(){ jl_loadpage(pgr, my_div) pgr.open('GET', url, true) pgr.send(null) var tb_div_JL = document.getElementsByTagName('div'); for (var i=0;i<tb_div_JL.length;i++) { if(tb_div_JL[i].id.substring(0,7)=="JL_BAL_"){ tb_div_JL[i].id="OK_BAL_"+Math.round(Math.random()*999999); jl_ajaxpage((tb_div_JL[i].title), tb_div_JL[i]) tb_div_JL[i].title=""; break;