Question

我遇到一个小问题，即使经过一个小时的尝试，我也无法解决。我正在使用JW Player播放一首歌，它可以正常播放。播放器下方是歌曲列表，一旦单击列表中的一首歌曲，我将使用AJAX重新加载包含播放器的div并更改该div下方的javascript以播放新歌曲。 div正确加载但是在AJAX Call之后播放器根本没有加载。只有玩家无法第二次实例化时没有错误。

以下是显示播放器的代码：

<div id="myDiv"><div id="myElement2">Loading the player...</div>

<script type="text/javascript">
    jwplayer("myElement2").setup({
    file: "uploads/maid.mp3",
        title: "Sintel Movie Trailer",

      width: '100%',
      skin: "six/six3.xml",
      height:30

    });
</script></div>

以下是加载新歌时会发生的事情：

document.getElementById("myDiv").innerHTML='';
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

这是来自单独的php文件的响应文本：

<div id="myElement2">Loading the player...</div>
<script type="text/javascript">
    jwplayer("myElement2").setup({
    file: "newfilename.mp3",
        title: "file name",

      width: '100%',
      skin: "six/six3.xml",
      height:30

    });
</script>

但是在AJAX Call播放器消失后，只显示加载播放器的文本....这是玩家所在的网址： contestlancer.com/davidicus

Answer 1

InnerHTML不会成为脚本的借口。你的php应该只响应音乐或视频文件的路径，然后重新设置为jwplayer。

抱歉，我出去吃晚餐; - ）

我认为你的页面不需要ajax来从你的php获取html，因为你的页面已经知道要播放哪个音乐文件。

我不确切知道jwplayer，但请尝试使用此代码而不是原始loadXMLDoc()。

function loadXMLDoc(str) {
    jwplayer("myElement2").setup({
        file: str,
        title: str,
        width: '100%',
        skin: "six/six3.xml",
        height: 30
    });
}

title将被设置为文件名，但您的页面可能没问题。

Answer 2

经过一番研究后，我发现我发现即使脚本是通过JS调用附加的，也没有执行，所以你必须执行它。所以任何有同样问题的人请注意，通过AJAX加载的脚本必须通过javascript中的eval函数执行。

因此，在我的内容AJAX文件中，我对脚本进行了id测试：

<script type="text/javascript" id="testing">

然后在JS函数中我这样做了：

if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML='';
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    eval(document.getElementById('testing').innerHTML);
    }
  }

希望能节省别人的时间。问候艾哈迈尔

通过AJAX加载javascript元素

2 个答案: