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。

Answer 2

删除整个内容并将其重新附加到文档中。它可以为您节省所有麻烦。

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

Src更改在Firefox中工作，而不是在IE / Chrome中

2 个答案: