JavaScript: modifica dell'attributo src di un tag embeddato

Question

Ho il seguente scenario.

Mostrare all'utente alcuni file audio dal server. L'utente fa clic su uno, quindi onFileSelected viene infine eseguito con la cartella e il file selezionati. Che cosa fa la funzione è cambiare la fonte dall'oggetto incorporato. Quindi in un certo senso, è un'anteprima del file selezionato prima di accettarlo e salvare la scelta dell'utente. 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); 
}; 

Ora, questo funziona bene in Firefox, Safari e Chrome, ma semplicemente si rifiutano di cambiare la sorgente, indipendentemente dal sistema operativo.

jQuery trova l'oggetto (jQuery.size() restituisce 1), esegue il codice, ma nessuna modifica nel codice HTML.

Perché Safari mi impedisce di modificare la sorgente <embed> e come posso eludere questa situazione?

Answer 1

È necessario rimuovere l'elemento embed e reinserirlo con il nuovo set di parametri src.

embed come object e simili sono due elementi che, a causa dei loro usi speciali (video, audio, flash, activex, ...), in alcuni browser sono gestiti in modo diverso da un normale elemento DOM. Pertanto, la modifica dell'attributo src potrebbe non attivare l'azione prevista.

La cosa migliore è rimuovere l'oggetto esistente embed e reinserirlo. Se si scrive un qualche tipo di funzione wrapper con l'attributo src come parametro di questo dovrebbe essere facile

Answer 2

JQuery segue la dichiarazione CSS-esque:

Invece di fare

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

Piuttosto che fare

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

In questo modo, jQuery recupera solo oggetto id = "file_udio".

Answer 3

ero anche affrontando lo stesso problema quando voglio cambiare -attribute "src" di elemento "embed", quindi quello che ho fatto, è il seguente:

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

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

E questo funziona bene nella mia applicazione .

Conclusione: - È necessario rimuovere prima l'elemento embed e quindi reinserirlo con change in src.

Answer 4

C'è un bug in Chrome, dare una stella per avere la fissa prima: http://code.google.com/p/chromium/issues/detail?id=69648