我正在开发一个播放音乐的网站。由于浏览网站时音乐需要连续播放，因此我使用AJAX将内容加载到div中，并将播放器保留在另一个div中。每当有人播放音乐时，播放器页面就会加载到播放器div中，并且内容会显示在内容div中。现在，当某人从网站的一个页面导航到另一个页面时，内容div会加载另一页面的新内容，并且播放器div保持相同，除非需要播放新音乐。但是有时，在导航到其他页面的过程中，播放器有时不可用，但音乐仍在后台播放，此后，如果我尝试发出新的播放音乐请求，则上一个和新的音频都会继续播放。但是，当我使用iFrame而不是AJAX进行相同操作时，这没有问题。我完全不熟悉AJAX，因此无法弄清为什么会出现这些问题。
这是导航到另一页的代码
function nextpage(id,type) //this is call when someone clicks a link
{
var URL = "list.php?id="+id+"&t="+type;
$.ajax({
url: URL
}).done(function(data) {
$('#content').html(data);
});
history.pushState(null,null,URL);
}
这是当某人单击任何页面上的任何音乐时呼叫播放器的功能
function play(index,type)
{
var URL = "player.php?i="+index+"&t="+type;
$.ajax({
url: URL
}).done(function(data) {
$('#player').html(data);
});
}
这是我所有页面的主体，每个页面都有一个内容div和播放器div，每个页面的内容都位于该内容div之内
//Suppose page1.php
<div id="content">
//codes of page1
</div>
<div id="player">
</div>
//Suppose page2.php
<div id="content">
//codes of page2
</div>
<div id="player">
</div>
//Suppose page3.php
<div id="content">
//codes of page3
</div>
<div id="player">
</div>
在每个页面上放置内容和播放器div是否会出现问题？当我第一次尝试AJAX时，有人可以帮助我修复它。
<html> <!--sample-->
<body>
<header>
<!--menu links page1, page2 , page3, pae 4 ...-->
</header>
<div id="content"></div>
<div id="player"></div>
</body>
</html>
您的标题和播放器div将保持不变，单击链接时仅内容div将被更新/更改。第二个js
// ajax to change content
function nextpage(id,type) //this is call when someone clicks a link
{
// ajax
$.ajax({
url: URL
}).done(function(data) {
$('#content').html(data);
// js code if you have some specific page related, for example
$('#list').select2();
});
}
第三个内容，页面，您的页面不应具有id＃content div，您的页面将是您要在内容div中显示的内容（音乐列表，艺术家列表等）。将content div视为一个页面，您的所有页面都是您要在页面中显示/加载的内容或数据。
[为了获得更多的了解，请考虑一下stackoverflow，您在左侧留一列，中间是rght和content div，当您打开任何问题时，div的新内容就会发生变化。