JavaScript：更改嵌入标签的 src 属性

Question

我有以下场景。

我向用户展示了来自服务器的一些音频文件。用户单击其中一个，然后最终对选定的文件夹和文件执行 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 阻止我更改 源以及如何规避此问题？

Answer 1

您应该删除 embed 元素，并使用新的 src 参数集重新注入它。

embed 与 object 类似，是两个元素，由于它们的特殊用途（视频、音频、flash、activex...），在某些浏览器中的处理方式与一个普通的 DOM 元素。因此，更改 src 属性可能不会触发您期望的操作。

最好的办法是删除现有的嵌入对象并重新插入它。如果您使用 src 属性作为参数编写某种包装函数，这应该很容易

Answer 2

当我想更改“embed”元素的“src”属性时，我也遇到了同样的问题，所以我所做的如下：

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

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

这将在我的应用程序中正常工作。

结论： - 您需要首先删除嵌入元素，然后必须通过更改 src 重新插入它。

Answer 3

这是 Chrome 中的一个错误。替代解决方案是不要更改嵌入元素的 src，而是尝试用新的 src 替换克隆的嵌入

$('embed').replaceWith($('embed').clone().attr('src','anotherfile.swf'));

Answer 4

Chrome 中存在一个错误，请给它加星号以便尽快修复： http://code.google.com/p/chromium/issues/detail?id=69648

Answer 5

将 div 添加到嵌入标签，

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

在脚本中：

            var pdfId = document.getElementById("pdfId");
            pdfId.removeChild(pdfId.childNodes[0]);
            var embed = document.createElement('embed');
            embed.setAttribute('src', embedUrl);
            embed.setAttribute('type', 'audio/mpeg');
            pdfId.appendChild(embed);

Answer 6

JQuery 遵循 CSS 式声明：

而不是

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" 的对象，

Answer 7

var element = document.getElementById('element-embed');
changeSrcEmbed(element,'https://coccoc.com');
function changeSrcEmbed(element, src) {
    var id = element.id;
    element.src = src;
    var embedOld = document.getElementById(id);
    var parent = embedOld.parentElement;
    var newElement = element;
    document.getElementById(id).remove();
    parent.append(newElement);
}

<embed id="element-embed" style="width:1100px; height: 700px;">