在IE中,脚本不会更改div的innerhtml

时间:2012-04-21 05:56:46

标签: javascript html internet-explorer audio 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>

提前感谢你提出的任何建议。

1 个答案:

答案 0 :(得分:1)

IE是个婊子,不是吗?

如果其源已更改,则IE不会重新加载object元素。它只在页面加载时加载它。句号。

那么如何解决这个问题呢?简单:克隆现有元素,删除旧元素,然后附加新元素。例如:

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