JavaScript: Modification de l'attribut src d'une balise d'intégration

J'ai le scénario suivant.

Je montre à l'utilisateur des fichiers audio à partir du serveur. L'utilisateur clique sur l'un, puis onFileSelected est finalement exécutée avec à la fois le dossier et le fichier sélectionné. Ce que la fonction n'est le changement de la source de l'objet incorporé. Donc dans un sens, il est un aperçu du fichier sélectionné, avant de l'accepter et d'enregistrer le choix de l'utilisateur. Une aide visuelle.

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);
};

Maintenant, cela fonctionne très bien sous Firefox, mais Safari et Chrome tout simplement refuser de changer la source, indépendamment du Système d'Exploitation.

jQuery trouve l'objet (jQuery.size() renvoie 1), il exécute le code, mais aucun changement dans le Code HTML.

Pourquoi Safari m'empêcher de changer le <embed> source et comment puis-je contourner cela?

source d'informationauteur Mike

  1. 21

    Vous devez supprimer le embed élément et de réinjecter avec le nouveau src jeu de paramètres.

    embed comme object et similaires, sont deux éléments qui, en raison de faire de leurs usages spéciaux (vidéo, audio, flash, activex, ...), dans certains navigateurs sont traités différemment à partir d'un élément du DOM. Et donc de changer l'attribut src pourrait ne pas déclencher l'action que vous attendez.

    La meilleure chose à faire est de supprimer les embed objet d'une réinsérez-la. Si vous écrivez une sorte de fonction wrapper avec l'attribut src comme paramètre, ce devrait être facile

  2. 4

    J'ai été également confrontés à la même question lorsque je veux changer le "src"-l'attribut de "embed" de l'élément, de sorte que ce que j'ai fait, est donnée ci-dessous:

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

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

    Et cela fonctionne très bien dans mon application.

    Conclusion: - Vous devez d'abord supprimer l'élément embed puis réinsérez-le avec le changement de la src.

  3. 2

    Il y a un bug dans Chrome, donnez-lui une star de l'avoir fixé plus tôt: http://code.google.com/p/chromium/issues/detail?id=69648

  4. 1

    JQuery suit le CSS-esque déclaration:

    Au lieu de faire

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

    Plutôt ne

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

    De cette façon, jQuery récupère uniquement l'objet de la id="audio_file".