在IE中，腳本不會更改div的innerhtml

Question

我正在制作一個函數，可以在單擊歌曲的標題時更改embed標簽的來源。 這在Chrome和Firefox中有效，但在Internet Explorer中無效。

這是函數：

function loadSong(title) {
    var wav = "samples/" + title + ".wav";
    var ie = "<embed id='ie' src='" + wav + "'></embed>";
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { 
        //test for MSIE x.x
        var newSong = document.getElementById("playerwrapper")
        newSong.innerHTML = ie;
    } else {
        var audio = document.getElementById("audio");  
        audio.pause();
        audio.src = wav;
        audio.play();
    }
}

是的，我嘗試在Chrome和Firefox中使用嵌入式播放器，並嘗試在IE中將html5音頻元素與m4a文件一起使用（源的更改方式與在Chrome和firefox中相同）。

接下來，這是音頻播放器本身（包括整個內容，以防萬一；如果不重要，請對不起）：

<?php
if($samples == 1) {
    if (isset($_SERVER['HTTP_USER_AGENT']) && 
        (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false)) 
    {
        print "
            <div id='playrwrapper'>
                <embed id='ie' src='samples/alright.wav' autostart='false'>
                </embed>
            </div>";
    } else {
        print "
            <div id='playerwrapper'>
                <audio id='audio' preload='auto' tabindex='0' controls>
                    <source id='wav' type='audio/wav' src='samples/alright.wav'/>
                </audio>
            </div>";
    };
};
?>

最后，這是函數的調用方式：

<p onclick='loadSong("songtitle")'>Song Title</p>
<p onclick='loadSong("anothersongtitle")'>Another Song Title</p>
<p onclick='loadSong("doomkittiesofmars")'>Doom Kitties of Mars</p>

預先感謝您的任何建議。

Answer 1

IE是個a子，不是嗎？

如果源更改，IE不會重新加載object元素。 僅在頁面加載期間加載它。

那么如何解決呢？ 簡單：克隆現有元素，刪除舊元素，然后追加新元素。 例：

// innerHTML bla bla bla
newS = newSong.cloneNode( true ) // Deep copy
newSong.parentNode.replaceChild( newS, newSong )