我正在尝试设置一个基本网页，上面有一个小型音乐播放器 (niftyPlayer)。我这样做的人希望播放器在页脚中，并在用户导航到网站的不同部分时继续播放歌曲。
有没有我可以在不使用框架的情况下做到这一点？有一些关于使用 ajax 和 innerHTML 更改页面的一部分的教程，但我无法将我的头脑围绕着让音乐播放器重新加载之外的所有内容。
提前谢谢你，
--亚当
【问题讨论】：
标签： ajax html reload innerhtml
将内容包装在一个 div 中，并将播放器包装在一个单独的 div 中。将内容加载到内容 div 中。
你会有这样的东西：
<div id='content'>
</div>
<div id='player'>
</div>
如果您使用的是框架，这很简单：$('#content').html(newContent)。
编辑：
此语法适用于 jQuery 和 ender.js。我更喜欢安德，但每个人都有自己的。我觉得 MooTools 是类似的，但我已经有一段时间没有使用它了。
ajax 代码：
$.ajax({
'method': 'get',
'url': '/newContentUrl',
'success': function (data) {
// do something with the data here
}
});
您可能需要声明您期望的数据类型。我通常发送 json 然后在浏览器中创建 DOM 元素。
编辑：
你没有提到你的网络服务器/服务器端脚本语言，所以我不能给出服务器端的任何代码示例。大多数时候这很简单。您只需要确定一种格式（再次，我强烈推荐 JSON，因为它是 JS 原生的）。
【讨论】：
我想你可以做的是必须 div 的.. 一个用于您的页脚，其中包含播放器，另一个用于其他所有内容；让我们称它为“容器”，当然两者都在你的身体内。然后在网站中导航时，只需单击通过 ajax 调用在容器内重新加载页面内容：
$('a').click(function(){
var page = $(this).attr('page');
// Using the href attribute will make the page reload, so just make a custom one named 'page'
$('#container').load(page);
});
HTML
<a page="page.php">Test</a>
然后您面临的问题是您不会真正重新加载页面，因此 URL 也不会得到更新；但您也可以使用一些 javascript 解决此问题，并使用主题标签在容器中加载特定内容。
【讨论】：
像这样使用 jQuery：
<script>
$("#generate").click(function(){
$("#content").load("script.php");
});
</script>
<div id="content">Content</div>
<input type="submit" id="generate" value="Generate!">
<div id="player">...player code...</div>
【讨论】：
您正在寻找的是所谓的“单页界面”模式。这在 Facebook 等网站中很常见，在这些网站中，聊天等内容需要在各个页面上保持不变。老实说，自己编写这样的程序有点困难——所以我建议站在现有的框架之上，为你做一些腿部工作。我已经成功使用具有这种模式的主干.js：
http://andyet.net/blog/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/
【讨论】：
您可以通过jQuery.ajax() 和JSON 重新加载所需的DIV：
例如：
index.php
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<a href='one.php' class='ajax'>Page 1</a>
<a href='two.php' class='ajax'>Page 2</a>
<div id='player'>Player Code</div>
<div id='workspace'>workspace</div>
one.php
<?php
$arr = array ( "workspace" => "This is Page 1" );
echo json_encode($arr);
?>
两个.php
<?php
$arr = array( 'workspace' => "This is Page 2" );
echo json_encode($arr);
?>
ajax.js
jQuery(document).ready(function(){
jQuery('.ajax').click(function(event) {
event.preventDefault();
// load the href attribute of the link that was clicked
jQuery.getJSON(this.href, function(snippets) {
for(var id in snippets) {
// updated to deal with any type of HTML
jQuery('#' + id).html(snippets[id]);
}
});
});
});
【讨论】：