Sustituir un SWF por otro sin refrescar el HTML con Ajax
En este sencillo ejemplo mostraré 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:
- http://code.google.com/p/swfobject/downloads/list
- http://docs.jquery.com/Downloading_jQuery#Download_jQuery
.
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:
function putSWF(swf){
swfobject.embedSWF(swf, "flash", "320", "240", "10.0.0", "expressInstall.swf");
};
putSWF("a.swf");
// ]]></script>
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:
<a id="a" href="#">a.swf</a>
- <a id="b" href="#">b.swf</a>
- <a id="c" href="#">c.swf</a></div>
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.
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.
$.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:
<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>
Post relacinonados:
August 4th, 2009 at 8:48 pm
Utilizando algo similar a tu codigo como puedo hacer que el boton entrar de mi pagina llame otro swf en la misma index html
August 7th, 2009 at 6:42 am
Hola, buen tip, aplicando un efecto fadeout o fadein desde jquery has detectado un bug en jquery ? Lo has solventado ?
Saludos