重新加载网页上除一个 div 之外的所有内容

Posted 2023-05-07

【中文标题】重新加载网页上除一个 div 之外的所有内容

【英文标题】：Reloading everything but one div on a web page

【发布时间】：2011-10-21 16:55:05

【问题描述】：

我正在尝试设置一个基本网页，上面有一个小型音乐播放器 (niftyPlayer)。我这样做的人希望播放器在页脚中，并在用户导航到网站的不同部分时继续播放歌曲。

有没有我可以在不使用框架的情况下做到这一点？有一些关于使用 ajax 和 innerhtml 更改页面的一部分的教程，但我无法将我的头脑围绕着让音乐播放器重新加载之外的所有内容。

提前谢谢你，

--亚当

【问题讨论】：

看看 jQuery。您可以通过 AJAX 请求加载/替换页面中的内容来加载页面的各个部分。尝试简单的 AJAX 示例，看看它真正能做什么。

【参考方案1】：

将内容包装在一个 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 原生的）。

【参考方案2】：

我想你可以做的是必须 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 解决此问题，并使用主题标签在容器中加载特定内容。

【参考方案3】：

像这样使用 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>

【参考方案4】：

您正在寻找的是所谓的“单页界面”模式。这在 Facebook 等网站中很常见，在这些网站中，聊天等内容需要在各个页面上保持不变。老实说，自己编写这样的程序有点困难——所以我建议站在现有的框架之上，为你做一些腿部工作。我已经成功使用具有这种模式的主干.js：

http://andyet.net/blog/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/

【参考方案5】：

您可以通过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]);
            
        );
    );
);