JavaScript: cambio de src-atributo de una etiqueta de inserción

Tengo el siguiente escenario.

Le muestro al usuario algunos archivos de audio del servidor. El usuario hace clic en uno, luego en el archivo seleccionado se ejecuta con la carpeta y el archivo seleccionados. Lo que hace la función es cambiar la fuente del objeto incrustado. Entonces, de alguna manera, es una vista previa del archivo seleccionado antes de aceptarlo y guardar la elección del usuario. Una ayuda visual .

HTML

 

JavaScript

 function onFileSelected(file, directory) { jQuery('embed#audio_file').attr('src', '/resources/audio/'+directory+'/'+file); }; 

Ahora, esto funciona bien en Firefox, pero Safari y Chrome simplemente se niegan a cambiar la fuente, independientemente del sistema operativo.

jQuery encuentra el objeto (jQuery.size () devuelve 1), ejecuta el código, pero no cambia en el código HTML.

¿Por qué Safari me impide cambiar la fuente y cómo puedo eludir esto?

Debe eliminar el elemento de inserción y reinyectarlo con el nuevo conjunto de parámetros src .

embed like object y similar son dos elementos que, debido a sus usos especiales (video, audio, flash, activex, …), en algunos navegadores se manejan de forma diferente a un elemento DOM normal. Por lo tanto, cambiar el atributo src podría no desencadenar la acción que espera.

Lo mejor es eliminar el objeto embed existente y reinsertarlo. Si escribe algún tipo de función de envoltura con el atributo src como parámetro, esto debería ser fácil

También estaba enfrentando el mismo problema cuando quiero cambiar el atributo “src” del elemento “embeber”, así que lo que hice fue lo siguiente:

 var parent = $('embed#audio_file').parent(); var newElement = ""; $('embed#audio_file').remove(); parent.append(newElement); 

Y esto funcionará bien en mi aplicación.

Conclusión: – Primero debe eliminar el elemento de inserción y luego debe volver a insertarlo con el cambio en src.

Hay un error en Chrome, dele una estrella para que se solucione antes: http://code.google.com/p/chromium/issues/detail?id=69648

JQuery sigue la statement CSS-esque:

En lugar de hacer

 function onFileSelected(file, directory) { jQuery('embed#audio_file').attr('src', '/resources/audio/'+directory+'/'+file); }; 

Más bien hacer

 function onFileSelected(file, directory) { jQuery('#audio_file').attr('src', '/resources/audio/'+directory+'/'+file); }; 

De esta forma, jQuery solo recupera el objeto de id = “archivo de audio”.