2010-03-22 69 views
9

Tengo la siguiente situación.JavaScript: cambiar el atributo src de una etiqueta de inserción

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. A visual aid.

HTML

<embed src="/resources/audio/_webbook_0001/embed_test.mp3" type="audio/mpeg" id="audio_file"> 

JavaScript

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

Ahora, esto funciona bien en Firefox, Safari y Chrome, pero 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 <embed> y cómo puedo evitar esto?

Respuesta

20

Debe eliminar el elemento embed y reinyectarlo con el nuevo conjunto de parámetros src.

embed como object y similares 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 existente embed y reinsertarlo. Si escribe algún tipo de función de contenedor con el atributo src como parámetro de esto debería ser fácil

+0

lo he intentado, pero no funcionó de alguna manera. Agregó la nueva etiqueta de inserción, pero no eliminó la anterior. Estoy pensando en usar una variación de este con un iframe, pero esa no es una solución muy elegante. – Mike

+0

Tuve un problema similar y esto funcionó para mí. ¡Gracias! – petejamd

+0

Mi problema era que programáticamente cambiar el src y llamar a play() todavía causaba que se reprodujera el src original. Siguiendo este consejo, ahora elimino y vuelvo a agregar el elemento de inserción y el sonido se reproduce correctamente. Gracias – Scottm

1

jQuery sigue el CSS-esque declaración:

En vez 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".

+0

me parece que su selector es "menos específico" y podría tener un mayor rendimiento, no puede ver la conexión a su cita "Declaración de CSS-esque" ... además, si lee el OP, funciona en algunos navegadores pero no todos, por lo que probablemente no sea un error de sintaxis ... – Leon

+0

@Leon, jQuery reúne las diferentes implementaciones de Javascript en su biblioteca para que nosotros (los desarrolladores) no tengamos que preocuparnos por ello. Creo que es el uso interno de las etiquetas pertenecientes a algunos navegadores que entra en conflicto, por lo que puede ser un error de sintaxis. –

4

también estaba enfrentando mismo problema cuando quiero cambiar -attribute "src" del elemento "embed", así que lo que hice, es la siguiente:

var parent = $('embed#audio_file').parent(); 
var newElement = "<embed src='new src' id='audio_file'>"; 

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

Y esto va a funcionar bien en mi solicitud .

Conclusión: - Primero tiene que quitar el elemento de inserción y luego tiene que volver a insertarlo con el cambio en src.

Cuestiones relacionadas