通过AJAX加载javascript元素

Loading a javascript element via AJAX

本文关键字：元素 javascript 加载 AJAX 通过      更新时间：2023-09-26

我遇到了一个小问题，即使尝试了一个小时也无法解决。我正在使用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调用播放器消失后，只有文本加载播放器。。。出现。以下是玩家所在的网址：contestlancer.com/davidicus

糟糕的是，经过一番研究，我发现即使脚本是通过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);
    }
  }

希望能节省别人的时间。当做Ahmar

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

对不起，我出去吃饭了；-）

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

我不知道关于jwplayer的确切信息，但请尝试使用此代码，而不是您原来的loadXMLDoc()。

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

title将被设置为文件名，但您的页面可能还可以。

相关文章：