Réaliser un widget à partir d’une zone de page

Cet article explique comment réaliser un widget égal à une fenêtre fixe (iframe) dans une page externe, zone de taille fixe et délimitée (ancre), selon le modèle suivant :

<iframe src='http://hilsz.com/wiki#news-content' height=421 width=120 style='border:2px solid #ccc' scrolling=no></iframe>

Ancrage (appelé)

L’ancrage (#ancre) dans un iframe ne s’exécute pas correctement dans tous les navigateurs, versions, et systèmes.

La solution est :… Heureusement il y a jQuery.

Modifier chaque page ancrée. Ceci est possible avec un éditeur tolérant qui permette d’éditer en HTML et JavaScript, en ajoutant :

<script src="jquery.js"></script>

<script>
if (location.hash) $(document).ready(function(){
 $(document).scrollTop($(location.hash).offset().top);
 $(document).scrollLeft($(location.hash).offset().left);
});
</script>

Ancrage dynamique (appelé)

Une erreur affecte l’appelant (gigue d’affichage) avec certains navigateurs. Notamment IE8 (moteur Trident) et les versions récentes de la famille Chromium et Safari (moteur Webkit). Au premier chargement, l’ancrage s’applique aussi à la page appelante.

#ancre n’est donc pas satisfaisant. L’idéal est de pouvoir transmettre l’ancre comme paramètre d’URL ?hash=ancre, selon le modèle suivant :

<iframe src='http://hilsz.com/wiki?hash=news-content' height=421 width=120 style='border:2px solid #ccc' scrolling=no></iframe>

Et en ajoutant dans la page fenêtrée, grâce au plugin jQuery purl.js http://github.com/allmarkedup/jQuery-URL-Parser :

<script src="purl.js"></script>

<script>
$(window.top).bind("load resize focus",function() {
 h=$.url().param('hash');
 if (h) $(document).ready(function(){
  $(document).scrollTop($('#'+h).offset().top);
  $(document).scrollLeft($('#'+h).offset().left);
 }); 
});
</script>

Ancrage dynamique (appelant)

Mais comment remplacer l’ancre (#) par une options (?) ?
Ceci suppose de pouvoir modifier l’application appelante.

Par chance, ce widget est édité par un wiki (hilsz.com/wiki), OddMuse, un script Perl très compact, issu directement du premier des wikis, UseMod, le premier éditeur de Wikipedia, il y a 10 ans.

Remplacer :

hilsz.com/wiki/Any_Page#Ancre

par :

hilsz.com/wiki?hash=Ancre[;id=Any_Page]

Avec OddMuse, il suffit de rajouter l’option ?hash au moyen de quelques lignes de code dans le moteur du script.
Rajouter dans la procédure de traitement des options :

sub DoBrowseRequest {
. . .
  my $hash = GetParam('hash', '');
. . .
  } elsif ($hash) {
    if ($id) {
      BrowseResolvedPage($id);
    } else {
      BrowseResolvedPage($HomePage);
    }
. . .

Remarques

  • Cette recette suppose que les contenus, appelé et appelant, soient suffisamment et aisément modifiables, ainsi que le moteur de l’appelé.
  • L’option d’iframe scrolling=no est dépréciée dans HTML5, rajoutant systématiquement des barres de défilement.
  • Le nouvel attribut seamless, à ce jour traité encore incorrectement par les dernières versions de Chromium Snapshot, ne supprime malheureusement pas les barres.

03 décembre 2012 par Admin
Catégories : IT, Tech | Tags: , , , | Laisser un commentaire

Laisser un commentaire