Question

我正在制作一个音乐网站。我已经在页脚上方的div中安装了一个音频播放器。但问题是每当我移动到下一页时，歌曲就会停止播放。我怎样才能克服这种情况。我很长一段时间都在努力，但还没有成功。有人建议我使用i帧，但另一个人说它不是一个好选择。我该怎么办？

这对我来说非常重要。

如果有人告诉我快速解决方案，我会非常乐于助人。

感谢 shail

Answer 1

解决方案一：使用AJAX

Javascript库jQuery促进了对您内容的异步请求。

例如，在包含必要的.js文件后，您可以使用：

$("#SampleLink").click(function() {
  $.ajax({
     url : 'TargetPage.php',
     success: function(data){
        $('#MainBodyContentDIV').html(data);
     }
  });
});

在点击ID为MainBodyContentDIV的链接时，将目标网页的HTML加载到ID为SampleLink的DIV中。

此解决方案要求您使用Javascript和jQuery，因此使用它们的所有缺点（和专业人员！）都有。我建议你在对网站进行任何重大更改之前先阅读（如果你还没有）。

例如，您必须将上面的代码包含在函数中并通过onClick事件运行它，完全通过jQuery或通过HTML属性（也称为onClick）运行。

此解决方案将减少中断音乐的页面刷新。

解决方案二：无论如何使用iFrame

如果设计得当，这不会成为一个视觉问题。这是关于使用iFrame的问题的link。

我可能错了，但我相信解决这个问题的最简单方法是使用iFrame。

Answer 2

你是这么问的，你会收到的。顺便说一句，这绝不是有效或安全的。它只是作为参考帮助您。我添加了一个YouTube视频来复制音乐播放器。

信用就在哪里，谢谢Thauwa！

<强> Main.php

<!DOCTYPE html>
<html>
<head>

<style>
body{
    font-family:arial;
    margin:0px;
}
ul{
    margin:0px;
}
a{
text-decoration:underline;
cursor:pointer;
}
h3{
margin:0px;
float:left;
}
#category{
    width:980px;
    margin:0px auto;
    background-color:#eee;
    padding:30px 0px;
}
#songs{
    width:980px;
    margin:0px auto;
    background-color:#eee;
    padding:30px 0px;
}
#musicplayer{
    width:980px;
    margin:0px auto;
    background-color:#ccc;
    text-align:center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function cate(page){
  $.ajax({
     url : page,
     success: function(data){
        $('#songs').html(data);
     }
  });
}

</script>
</head>
    <body>
        <div id="category">
            <h1>Categories</h1>
            <ul>
                <li><a onclick="cate('cat1.php')">Category 1</a></li>
                <li><a onclick="cate('cat2.php')">Category 2</a></li>
                <li><a onclick="cate('cat3.php')">Category 3</a></li>
            </ul>
        </div>
        <div id="songs"></div>
        <div id="musicplayer">
            <h3>Music Player</h3>
            <iframe width="560" height="315" src="//www.youtube.com/embed/uiUAq4aVTjY" frameborder="0" allowfullscreen></iframe>
        </div>
    </body>
</html>

<强> cat1.php

<h2>Songs</h2>
<ol>
    <li>Category 1 - Song 1</li>
    <li>Category 1 - Song 2</li>
</ol>

<强> cat2.php

<h2>Songs</h2>
<ol>
    <li>Category 2 - Song 1</li>
    <li>Category 2 - Song 2</li>
</ol>

<强> cat3.php

<h2>Songs</h2>
<ol>
    <li>Category 3 - Song 1</li>
    <li>Category 3 - Song 2</li>
</ol>

当我移动到另一个页面时，我的音频停止了

2 个答案: