通过AJAX加载javascript元素

Question

我有一个小问题，即使经过一个小时的尝试，我仍然无法解决。 我正在使用JW Player播放歌曲，并且可以正常运行。 播放器下方是歌曲列表，单击列表中的歌曲后，我会使用AJAX重新加载包含播放器的div，然后更改该div下面的javascript以播放新歌曲。 div正常加载，但AJAX调用后播放器根本不加载。 玩家无法第二次实例化就没有错误。

这是显示播放器的代码：

<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呼叫播放器消失之后，仅显示加载播放器的文本...。 这是玩家所在的网址： Competitionlancer.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调用附加的，它也没有执行，所以您必须执行它。 因此，任何有相同问题的人都请注意，必须通过javascript中的eval函数执行通过AJAX加载的脚本。

因此，在我的内容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);
    }
  }

希望它可以节省别人的时间。 问候阿马尔