什么是让网页上的一个元素保持静态而其余元素发生变化的最简单方法？

Question

不确定这是否是一个非常明显的问题，但是当用户查看网站的其余部分（点击链接以查看不同的页面等）时，我需要继续播放嵌入式音乐播放器。所以基本上将页面拆分成不同的段，单独加载。几年前我会用HTML框架做到这一点，但这显然不再是一个热门的想法了。

希望这是有道理的，并感谢所有回复的进步。

Answer 1

如果您不想使用框架，则必须使用javascript根据用户请求加载每个部分。使用像jQuery库这样的东西让你自己很容易，你可以设置它，以便所有请求根据点击的内容更新某些包含DIV的请求。

Answer 2

让我们解决使用“框架”一词时的含糊之处。虽然在将来的HTML版本中确实会停用<frame>标记，但<iframe>标记将继续得到支持，并且可以为您的问题提供理想的解决方案。您的整个网站将由正文中的两个主要元素组成：

1. 音乐播放器，
2. 一个不错的大<iframe>来保存您网站的可导航部分。

这将允许音乐播放器连续播放，而所有导航都在单独的帧中进行，有效地保持音乐播放器“静态”，并且页面的其余部分保持动态。最重要的是，一旦浏览器开始支持HTML 5，您就可以使用新的seamless属性来帮助将框架集成到页面外观中。在此之前，您需要手动删除边框和滚动条，以便在所有浏览器中保持一致。您可以通过以下方式实现此目的：

<iframe src="navigable_page.html"
             frameborder="0" 
             scrolling="no" 
             marginwidth="0" 
             marginheight="0" 
             vspace="0" 
             hspace="0">
</iframe>

请记住使用CSS设置高度。使用这种方法，您的布局也具有很大的灵活性，如果您不愿意，则无​​需重新设计任何内容。选项包括让框架占据整个网页，将音乐播放器放在其他一切的前面，可拖动，可调整大小等等。网页设计师会想知道你是如何创建一个独立于其他变化内容的音乐播放器。您还可以拥有一个占用整个页面的表，其中包含两行。顶行可以有音乐播放器，底行可以包含高度设置为100％的帧。使用框架，如iframes中所示，您不会失望。

Answer 3

今天的“热门”想法是让一切都成为AJAX。所有的导航和东西。它在技术上被认为是一件坏事，但用于你在一些大型网站中描述的用法，即Facebook（用于聊天，非常类似于你的情况）和Twitter（用于标题和更新）。

您可以为每个网页提供一个类似mysite.com/#some-folder/some-page/someQueryKey/someValue的网址

请注意，它是“＃/”，因为所有页面都只是同一页面中的ajax调用。

由于它是同一页面，因此您可以在进行AJAX传输时保留您想要保持不变的部分

有关如何实现此功能的技术细节，请搜索有关实现哈希爆炸AJAX的内容（这就是所谓的官方格式，谷歌可以将其称为索引，并且URL通常是哈希标志后的感叹号“＃！/ ”

这不是最容易实现的，并且意味着重新设计整个网站，因此，您可能需要考虑其他选项：

1. 弹出窗口：他们尚未100％死亡，“可能”适合您的情况。
2. 重新加载：也许只是每隔一段时间（使用JS）存储一些cookie你想要的数据，并在页面加载时检查它以从你结束的地方恢复，但用户之间会稍微停下来。因此，它可能不适合音乐播放器。

对于窗口小部件本身的UI，如果您需要它位于页面中的某个位置而不管滚动或其他任何内容（始终可见），您可以使用CSS positioning：

.music-player
{
    position:fixed;
    bottom:5px;
    right:5px;
}