javascript - Src 更改在 Firefox 中有效，在 IE/Chrome 中无效

Question

我正在尝试创建一个下拉列表，当 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 错误。

Answer 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。