JavaScript: src-Attribut eines Embed-Tags ändern

Question

Ich habe folgendes Szenario.

Ich zeige dem Benutzer einige Audio-Dateien vom Server. Der Benutzer klickt auf einen, dann wird onFileSelected schließlich mit dem ausgewählten Ordner und der Datei ausgeführt. Die Funktion ändert die Quelle aus dem eingebetteten Objekt. In gewisser Weise ist es eine Vorschau der ausgewählten Datei, bevor Sie sie akzeptieren und die Auswahl des Benutzers speichern. 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); 
}; 

Nun, dies funktioniert in Firefox, aber Safari und Chrome weigern sich einfach, um die Quelle zu ändern, unabhängig vom Betriebssystem.

jQuery findet das Objekt (jQuery.size() gibt 1 zurück), es führt den Code aus, aber keine Änderung im HTML-Code.

Warum verhindert Safari, dass ich die Quelle <embed> ändere und wie kann ich das umgehen?

Answer 1

Sie sollten das embed Element entfernen und es mit dem neuen src Parametersatz erneut einspeisen.

embed wie object und ähnliche sind zwei Elemente, die wegen ihrer speziellen Verwendungen (Video, Audio, Flash, Activex, ...) in einigen Browsern anders behandelt werden als ein normales DOM-Element. Wenn Sie also das Attribut src ändern, wird die erwartete Aktion möglicherweise nicht ausgelöst.

Die beste Sache ist, das vorhandene embed Objekt zu entfernen und es wieder einzufügen. Wenn Sie irgendeine Art von Wrapper-Funktion mit dem Attribut src als Parameter schreiben sollte dies einfach sein

Answer 2

JQuery die CSS-artige Erklärung folgt:

Statt tun

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

tun Rather

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

Auf diese Weise ruft jQuery nur das Objekt id = "audio_file" ab.

Answer 3

ich auch gleiche Problem konfrontiert wurde, wenn ich will „src“ -Attribut von „einbetten“ Element ändern, so was ich getan habe, ist unten angegeben:

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

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

Und das wird in meiner Anwendung gut funktionieren .

Fazit: - Sie müssen zuerst das Einbettungselement entfernen und dann müssen Sie es mit Änderung in Src neu einfügen.

Answer 4

Es gibt einen Fehler in Chrome ist, geben ihm einen Stern es früher festgelegt haben: http://code.google.com/p/chromium/issues/detail?id=69648