Sustituir un SWF por otro sin refrescar el HTML con Ajax

En este sencillo Tip mostraré un ejemplo de como sustituir un archivo SWF de una página HTML por otro sin necesidad de refrescar la página. (ejemplo)

Para ello utilizaremos SwfObject y JQuery. En realidad JQuery no haria falta utilizarlo ya que quien sustituirá el SWF será SwfObject y podriamos hacer la llamada con una simple funcion Javascript. Pero nunca está de más ver un poco de Ajax

Para empezar nos descargaremos las librerias:

Lo primero será colocar nuestra pelicula SWF dentro de la página HTML con SwfObject de la forma típica. Creando una DIV y asignandole ahí la pelicula SWF. Lo haremos creando una función que reciba el parámetro de la URL del SWF para poder volver a llamar esa función más adelante:

Código :

<html>
    <head>
        <script type="text/javascript" src="swfobject.js"></script>
        <script>
            function putSWF(swf){
                swfobject.embedSWF(swf, "flash", "320", "240", "10.0.0", "expressInstall.swf");
            };
         putSWF("a.swf");
        </script>
    </head>
    <body>
        <div id="flash"></div>
    </body>
</html>

Ahora crearemos unos cuantos links con los que queremos cambiar de pelicula SWF pero sin cambiar de página HTML. Los colocaremos en otro DIV y asignaremos a cada enlace un ID diferente:

Código :

    <body>
        <div id="botonera">
            <p>
                <a id="a" href="#">a.swf</a>
                - <a id="b" href="#">b.swf</a>
                - <a id="c" href="#">c.swf</a>
            </p>
        </div>
        <div id="flash"></div>
    </body>

Podríamos hacer que cada enlace volviera a ejecutar la función Javascript y listo, pero haremos el ejemplo más c00l utilizando JQuery.

Primero definiremos un objeto en el que guardaremos una relación entre los ID de los enlaces y la pelicula SWF que han de abrir.

Código :

var swfRef = {
     a: "a.swf",
     b: "b.swf",
     c: "c.swf"
};

Y por último crearemos una función de JQuery que asignará a cada enlace la llamada a la función Javascript pasandole el parámetro que toca. Tambien sustituiremos la primera llamada.

Código :

$(function(){
       $.each(swfRef, function(i, val){
              $("#" + i).click(function(){
                     putSWF(val);
              });
       });
       $("#a").click();
});

Y listo, ahora cada enlace sustituye el SWF por otro dentro de la misma página.

Aqui se puede ver el ejemplo: http://www.cristalab.com/zguillez/ajax/putswf/index.html

Y el código completo:

Código :

<html>
    <head>
        <script type="text/javascript" src="swfobject.js"></script>
        <script src="lib/jquery/jquery-1.3.2.js"></script>
        <script>
            function putSWF(swf){
                swfobject.embedSWF(swf, "flash", "320", "240", "10.0.0", "expressInstall.swf");
            };
            var swfRef = {
                a: "a.swf",
                b: "b.swf",
                c: "c.swf"
            };
            $(function(){
                $.each(swfRef, function(i, val){
                    $("#" + i).click(function(){
                        putSWF(val);
                    });
                });
                $("#a").click();
            });
        </script>
    </head>
    <body>
        <div id="botonera">
            <p>
                <a id="a" href="#">a.swf</a>
                - <a id="b" href="#">b.swf</a>
                - <a id="c" href="#">c.swf</a>
            </p>
        </div>
        <div id="flash"></div>
    </body>
</html>

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Sustituir un SWF por otro sin refrescar el HTML con Ajax

Publica tu comentario

o puedes...