src 更改在 Firefox 中有效，而不是在 IE/Chrome 中答案

【问题标题】：Src changing works in Firefox, not in IE/Chromesrc 更改在 Firefox 中有效，而不是在 IE/Chrome 中
【发布时间】：2012-04-18 18:42:29
【问题描述】：

我正在尝试创建一个下拉列表，当 onchange 事件触发时，它将在后台自动播放一个 midi 文件。这在 Firefox 中运行良好，但 IE 和 Chrome 甚至没有在他们应该启动的时候启动 QuickTime 播放器。我已经用静态源测试了嵌入代码，它在所有三个浏览器中都可以正常工作。

<form name="music">
    <select name='audiomenu' onchange="midiplay(this);">
        <option value="">No Music</option>
        <option value="midi/1.mid">Background 1</option>
        <option value="midi/2.mid">Background 2</option>
     </select>
</form>

<script type="text/javascript">
    function midiplay(what) {   
        document.getElementById('midijuke').src = what.options[what.selectedIndex].value;
    }
</script> 

<embed src="#" id="midijuke" autostart="true" loop="true" type="audio/midi" width="120" height="40"></embed>

IE 和 Chrome 也不报告任何 JavaScript 错误。

【问题讨论】：

@RepWhoringPeeHaa，你有更好的建议吗？ HTML5 的 <audio> 元素通常不支持播放 MIDI 文件。

标签： javascript html list drop-down-menu midi

【解决方案1】：

使用 DOM（因为它比 jQuery 更容易操作 DOM）：

var juke = document.getElementById('midijuke');

juke.src = 'http://blah.com/foo.mid';

juke.parentNode.removeChild(juke).appendChild(juke);

HTML 标记属于 HTML 文档，而不是 JavaScript 字符串。包装器应该放在文档中，而不是字符串。操作 DOM 的正确方法是使用 DOM API。

【讨论】：

你复制了我的帖子、我的编辑和我的评论，并且你顽固地坚持你的 POV。更新您的答案，删除 removeChild(juke).appendChild(juke)，然后尝试将 juke 附加到相对于其容器内的其他元素的相同位置 (juke.parentNode)。
哦，那个。 juke.parentNode.insertBefore(juke, juke) 实际上应该可以工作。不过，我有点喜欢这篇文章。

【解决方案2】：

只需删除整个内容并将其重新附加到文档中即可。它为您省去了所有的麻烦。

function midiplay(w) {   
    var j=document.getElementById('midijuke');
    j.src = w.options[w.selectedIndex].value;
    j.parentNode.insertBefore(j,j);
}

【讨论】：