beer2beer

Cargar un fichero javascript externo desde un bookmarklet es una buena forma de darle superpoderes a nuestro favelet para hacer lo que queramos, y olvidarnos así de la conocida restricción de 500 y pico caracteres de IE y de los abominables e inmantenibles chorizos de una sola línea. Unido a que podemos tener otras “ventajas” como compresión js desde el servidor, pre-procesado PHP, etc. la convierte en una técnica la mar de útil a la hora de hacer un bookmarklet un poquito más “elaborado”.

El otro día descubrí que Safari es un poco peculiar a la hora de usar esta técnica.

Por ejemplo, lo que en otros navegadores (FF, Opera, IE) funcionaría sin más, en Safari no rula:

Nota: los ejemplos están formateados en multilínea bonitos para que se vean mejor.

<a href="javascript:void(
        z = document.body.appendChild(document.createElement('script'));
    );
    void( z.language = 'javascript' );
    void( z.type = 'text/javascript' );
    void( z.src = 'http://blabla.com/test.js' );
    void( z.id = 'testScript' );
">

Pues como digo, Safari es un poco tocapelotillas y hay que elaborarlo un poquito más:

<a href="javascript:( function() {
    function load(source,ident) {
        var d = document;
        if ( !d.getElementById(i) ) {
            var scriptExt = d.createElement('script');
            scriptExt.src = source;
            scriptExt.id = ident;
            d.body.appendChild(scriptExt);
         }
    }
    load('http://blabla.com/test.js','testScript')
})();
">

Fijaros en el closure que tiene el bookmarklet. Ojo, nuestro fichero javascript externo también debería estar encapsulado con un closure para evitar que interfiera con el código existente en la página en la que lo invoquemos.

Y para rematar la faena, otra pequeña tonteria de Safari. Esta vez cargando una hoja de estilos CSS externa desde el propio bookmarklet:

var cssFile = d.createElement("link");
cssFile.rel = "Stylesheet";
cssFile.type="text/css";
cssFile.id="testCSS";
cssFile.href="http://blabla/test.css";

document.body.appendChild(cssFile);

Eso funcionaría en todos los navegadores mencionados arriba menos en Safari. Ahora veamos la versión cross-browsing que le gusta a Safari:

var cssFile = d.createElement("link");
cssFile.rel = "Stylesheet";
cssFile.type="text/css";
cssFile.id="testCSS";
cssFile.href="http://blabla/test.css";

//we have to create the css in the head instead of the body for Safari
var h = d.getElementsByTagName("head")[0];
if (!h || h == undefined) {
    //creating head under html
    d.documentElement.appendChild( d.createElement(’head’) );
    h = d.getElementsByTagName(”head”)[0];
}
h.appendChild(cssFile);

Como habréis notado la diferencia está en insertar el CSS en el elemento head. Ya aprovechamos y comprobamos que existe el elemento head y sino lo creamos bajo html.

En fin, ya sabéis, estas son las pequeñas chorraditas cross-browsing que hacen que nuestra vida como desarrolladores sea entretenida y amena.

Compártelo
October 7th, 2007 | Javascript, Programación, Web |