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

【问题标题】：JavaScript: Changing src-attribute of a embed-tagJavaScript：更改嵌入标签的 src 属性
【发布时间】：2011-01-30 10:11:48
【问题描述】：

我有以下场景。

我向用户展示了一些来自服务器的音频文件。用户单击一个，然后 onFileSelected 最终会同时使用选定的文件夹和文件执行。该函数所做的是更改嵌入对象的源。所以在某种程度上，它是在接受它并保存用户选择之前对所选文件的预览。 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);
};

现在，这在 Firefox 中运行良好，但 Safari 和 Chrome 只是拒绝更改源，无论操作系统如何。

jQuery 找到对象（jQuery.size() 返回 1），它执行代码，但 HTML 代码没有变化。

为什么 Safari 会阻止我更改 <embed> 源，我该如何规避？

【问题讨论】：

标签： jquery html embedded-resource

【解决方案1】：

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

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

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

【讨论】：

我试过了，但它没有以某种方式工作。它附加了新的嵌入标签，但没有删除旧的。我正在考虑使用 iframe 的变体，但这不是一个非常优雅的解决方案。
我的问题是，以编程方式更改 src 并调用 play() 仍然会导致播放原始 src。按照这个建议，我现在删除并重新添加嵌入元素，声音播放正确。谢谢

【解决方案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);

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

结论： - 你需要先移除 embed 元素，然后你必须重新插入它并在 src 中进行更改。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

在我看来，您的选择器“不太具体”，可能对性能有更高的影响，无法真正看到与您的报价“CSS-esque declaration”的联系......此外，如果您阅读OP，它适用于某些浏览器但不是全部，所以它可能不是语法错误......
@Leon，jQuery 将不同的 Javascript 实现捆绑到他们的库中，这样我们（开发人员）就不必担心了。我认为这是与某些浏览器相关的标签的内部使用发生冲突，因此可能是语法错误。

【解决方案6】：

添加div到embed标签，

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

【讨论】：

【解决方案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);
}

&lt;embed id="element-embed" style="width:1100px; height: 700px;"&gt;

【讨论】：