jQuery JavaScript：更改嵌入标签的 src 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2493706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript: Changing src-attribute of a embed-tag
提问by Mike
I have the following scenario.
我有以下场景。
I show the user some audio files from the server. The user clicks on one, then onFileSelected is eventually executed with both the selected folder and file. What the function does is change the source from the embedded object. So in a way, it is a preview of the selected file before accepting it and save the user's choice. A visual aid.
我向用户展示了一些来自服务器的音频文件。用户单击一个，然后 onFileSelected 最终会与选定的文件夹和文件一起执行。该函数所做的是更改嵌入对象的源。所以在某种程度上，它是在接受之前预览所选文件并保存用户的选择。一个视觉辅助。
HTML
HTML
<embed src="/resources/audio/_webbook_0001/embed_test.mp3" type="audio/mpeg" id="audio_file">
JavaScript
JavaScript
function onFileSelected(file, directory) {
jQuery('embed#audio_file').attr('src', '/resources/audio/'+directory+'/'+file);
};
Now, this works fine in Firefox, but Safari and Chrome simply refuse to change the source, regardless of Operating System.
现在，这在 Firefox 中运行良好，但 Safari 和 Chrome 只是拒绝更改源，无论操作系统如何。
jQuery finds the object (jQuery.size() returns 1), it executes the code, but no change in the HTML Code.
jQuery 找到对象（jQuery.size() 返回 1），它执行代码，但 HTML 代码没有变化。
Why does Safari prevent me from changing the <embed>source and how can I circumvent this?
为什么 Safari 会阻止我更改<embed>源，我该如何规避？
回答by jitter
You should remove the embedelement and reinject it with the new srcparameter set.
您应该删除该embed元素并使用新的src参数集重新注入它。
embedlike objectand similar are two elements which, due do their special uses (video, audio, flash, activex, ...), in some browsers are handled differently from a normal DOM element. Thus changing the src attribute might not trigger the action you expect.
embedlikeobject和 similar 是两个元素，由于它们的特殊用途（视频、音频、flash、activex 等），在某些浏览器中，它们的处理方式与普通 DOM 元素不同。因此更改 src 属性可能不会触发您期望的操作。
The best thing is to remove the existing embedobject an reinsert it. If you write some kind of wrapper function with the src attribute as parameter this should be easy
最好的办法是删除现有embed对象并重新插入它。如果您使用 src 属性作为参数编写某种包装函数，这应该很容易
回答by Durgaprasad Budhwani
I was also facing same issue when I want to change "src"-attribute of "embed" element, so what I did, is given below:
当我想更改“嵌入”元素的“src”属性时，我也遇到了同样的问题，所以我所做的如下所示：
var parent = $('embed#audio_file').parent();
var newElement = "<embed src='new src' id='audio_file'>";
$('embed#audio_file').remove();
parent.append(newElement);
And this will work fine in my application.
这将在我的应用程序中正常工作。
Conclusion: - You need to first remove the embed element and then you have to reinsert it with change in src.
结论： - 您需要首先删除嵌入元素，然后您必须通过更改 src 重新插入它。
回答by niutech
There is a bug in Chrome, give it a star to have it fixed sooner: http://code.google.com/p/chromium/issues/detail?id=69648
Chrome 中存在一个错误，请给它一个星星以尽快修复它：http: //code.google.com/p/chromium/issues/detail?id= 69648
回答by Buhake Sindi
JQuery follows the CSS-esque declaration:
JQuery 遵循 CSS 风格的声明：
Instead of doing
而不是做
function onFileSelected(file, directory) {
jQuery('embed#audio_file').attr('src', '/resources/audio/'+directory+'/'+file);
};
Rather do
而是做
function onFileSelected(file, directory) {
jQuery('#audio_file').attr('src', '/resources/audio/'+directory+'/'+file);
};
That way, jQuery only retrieves object of id="audio_file".
这样，jQuery 只检索 id="audio_file" 的对象。
回答by Deepa
Add div to embed tag,
添加 div 以嵌入标签，
<div id="pdfId">
<embed src="/resources/audio/_webbook_0001/embed_test.mp3" type="audio/mpeg" id="audio_"/>
</div>
In script:
在脚本中：
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);
回答by D?ng Ph?m Ti?n
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;">