JavaScript: изменение src-атрибута встраиваемого тега

У меня есть следующий сценарий.

Я показываю пользователю несколько аудиофайлов с сервера. Пользователь нажимает на один, а затем onFileSelected в конечном итоге выполняется как с выбранной папкой, так и с файлом. То, что делает функция, это изменение источника из встроенного объекта. Таким образом, это предварительный просмотр выбранного файла, прежде чем принимать его и сохранить выбор пользователя. Визуальная помощь.

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

Теперь это прекрасно работает в Firefox, но Safari и Chrome просто отказываются менять источник, независимо от операционной системы.

jQuery находит объект (jQuery.size() возвращает 1), он выполняет код, но без изменения кода HTML.

Почему Safari не позволяет мне изменить источник <embed> и как я могу обойти это?

Ответ 1

Вы должны удалить элемент embed и повторно установить его с помощью нового набора параметров src.

embed like object и аналогичные - это два элемента, которые благодаря своим особым потребностям (видео, аудио, flash, activex,...) в некоторых браузерах обрабатываются иначе, чем обычный элемент DOM. Таким образом, изменение атрибута src может не вызывать ожидаемое действие.

Лучше всего удалить существующий объект embed, чтобы повторно вставить его. Если вы пишете какую-то функцию обертки с атрибутом src в качестве параметра, это должно быть легко

Ответ 2

Мне также пришлось столкнуться с такой же проблемой, когда я хочу изменить "src" -трибут элемента "embed", поэтому то, что я сделал, приведен ниже:

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

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

И это будет хорошо работать в моем приложении.

Заключение: - вам нужно сначала удалить элемент embed, а затем вам нужно вставить его с изменением в src.

Ответ 3

В Chrome есть ошибка, дайте ей звезду, чтобы она была исправлена раньше: http://code.google.com/p/chromium/issues/detail?id=69648

Ответ 4

JQuery следует объявлению CSS-esque:

Вместо того, чтобы делать

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

Скорее сделайте

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

Таким образом, jQuery только извлекает объект id = "audio_file".