jorgemaestre.com

DhtmlHistory (+ bug en IE7)

dhtmlHistory

DhtmlHistory es un interesante mini framework para simular el comportamiento del botón “Atrás” en aplicaciones web realizadas con AJAX, desarrollado por Brad Neuberg.

En la página del autor podeis encontrar varios ejemplos de funcionamiento junto a una explicación mas detallada, así como descargaros la última versión.

Error en IE7

A continuación un caso curioso que me ha acontecido recientemente usando DhtmlHistory junto a IE7.

Estamos desarrollando una aplicación web con AJAX que requería controlar el botón “Atrás”. En IE7 experimentaba un comportamiento extraño al cambiar estilos dinámicamente, siempre que tenían que ver con ocultar o mostrar partes de la página. El efecto era que la página se desplazaba o centraba en la venta aleatóriamente.

Finalmente pudimos comprobar que eliminando el javascript dhtmlHistory.js el efecto no se producía. Centrados en el objeto de error nos dimos cuenta gracias al DOM Explorer Toolbar que el HTML se estaba generando incorrectamente, con todo el código HTML en la etiqueta HEAD y únicamente con un TEXTAREA en el BODY:

Al eliminar el dhtmlHistory.js, el HTML se generaba corréctamente. Supongo que, pese a que renderizaba bien el HTML generado por incorrecto que fuese (recuperación de errores lo llaman), cuando se aplicaban estilos de manera dinámica se hacía incorrectamente al encontrarse en el HEAD.

La solución

La solución es sencilla: generar el HTML necesario una vez que la página se ha cargado, para lo que se han modificado los métodos init() y create() en dhtmlHistory.js:

init():

   /** private */ init: function() {
      // write a hidden form into the page
      var styleValue = "position: absolute; top: -1000px; left: -1000px;";
      if (this.debugging == true) {
         styleValue = "width: 30em; height: 30em;";
      }

      var newContent =
         "<form id='historyStorageForm' "
               + "method='GET' "
               + "style='" + styleValue + "'>"
            + "<textarea id='historyStorageField' "
                      + "style='" + styleValue + "'"
                              + "left: -1000px;' "
                      + "name='historyStorageField'></textarea>"
         + "</form>";
      document.body.innerHTML+=newContent; // CHANGED:

      this.storageField = document.getElementById("historyStorageField");

   },

create():

   /** private */ create: function() {
      // get our initial location
      var initialHash = this.getCurrentLocation();

      // save this as our current location
      this.currentLocation = initialHash;

      // write out a hidden iframe for IE and
      // set the amount of time to wait between add() requests
      if (this.isInternetExplorer()) {
         var aux = "<iframe style='border: 0px; width: 1px; "
                               + "height: 1px; position: absolute; bottom: 0px; "
                               + "right: 0px; visibility: visible;' "
                               + "name='DhtmlHistoryFrame' id='DhtmlHistoryFrame' "
                               + "src='blank.html?" + initialHash + "'>"
                               + "</iframe>";
        document.body.innerHTML+=aux; // CHANGED
         // wait 400 milliseconds between history
         // updates on IE, versus 200 on Firefox
         this.WAIT_TIME = 400;
      }

Y finalmente, mover la inicialización que hay al final del fichero al manejador de carga de la página, en nuestro caso:

    Event.observe(window, 'load', init_page, false);

    function init_page(){
        /* Initialize dhtmlHistory*/
        window.historyStorage.init();
        window.dhtmlHistory.create();
    }

Actualización [28.feb.2007]

La solución que aporta Stefan Gustafsson en los comentarios es bastante más secilla y además funciona en IE 5. Consiste en mover la inicialización al final de la página, os la recomiendo.

Que aproveche.

Esta entrada fué escrita el Martes, 23 Enero 2007 a las 5:08 y etiquetada con Desarrollo Web. Puedes seguir lo comentarios en el feed RSS 2.0. Deja tu comentario, o traza desde tu sitio web.