Jquery 创建不跨网页重新加载的DIV标记

我试图在我的页面顶部创建一个div，当用户浏览我的网站时，它不会自动重新加载。该div将包含一个MP3播放器，可以在整个站点上持续播放。我该如何编写这样的代码来工作呢

主站点正在运行joomla，我想避免使用Iframes，因为该站点需要保持对搜索引擎友好

<div id="siteWidePlayer">
 <audio controls>
  <source src="audiostream.ogg" type="audio/ogg">
  <source src="audiostream" type="audio/mpeg">
  Your browser does not support the audio element.
 </audio>
</div>

您的浏览器不支持音频元素。

使用Iframe来保存站点正文。让站点的主布局包含顶部div，并为iframe设置一个div。这样，您的顶级div将是静态的。

使用ajax将内容加载到包含非静态内容的div中

<div id="siteWidePlayer">
    <audio controls>
    <source src="audiostream.ogg" type="audio/ogg">
    <source src="audiostream" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
</div>
<div id="content">
    // Your default content here
</div>
<script>
    $(document).ready(function() {
        $(someElement).on(someEvent, function() {
            $('#content').load(somePage);
        });
    });
</script>

为此，您有3种方法：

1-第一个解决方案是使用iframe，正如您所说，它不是您最喜欢的解决方案

2-为你的浏览器创建一个插件，这不是一个好方法，因为你的最终用户将被迫安装它，但对于你的SEO关注这是最好的

3-更改加载页面的方式，并使用jQuery加载函数加载实际页面，为此，您必须创建一个包含jQuery的新html页面，在页面顶部使用数据创建div元素，并为要加载的站点页面创建另一个div，但是这样的话，你的问题是如何处理joomla，以确保所有joomla页面以及这些页面中的所有链接和脚本都可以安全地以这种方式加载。请尝试以下示例：

jQuery('#question-header').load('http://stackoverflow.com/', function(){
    //Your callback to-dos
})

这将通过页面顶部的标题框加载stackoverflow主页

最后，如果我是你，我肯定会使用iframe，因为我必须承担的风险较小。
如果有问题要求我们推荐或查找工具、库或最喜欢的非现场资源，则会导致堆栈溢出，因为这些问题往往会吸引自以为是的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决问题所做的工作。基本上，您希望的是在浏览站点时保持顶部框架。看看通过AJAX请求加载新数据的iFrame和/或客户端方法。像这样的推荐问题往往会过时，并不能真正“让互联网变得更好”。找出你想要的功能（它与soundcloud或音频播放器无关），然后你可以在你的请求中更加具体。好的，我将编辑并改写问题：）不幸的是，没有办法不改变网站导航的工作方式。如果不希望div刷新，则必须不刷新页面。要做到这一点，唯一的办法是通过ajax或iframes使您的网站导航正常工作，这两种方法都需要特别注意以保持SEO正常工作。iframes似乎是一种过时的技术，对搜索引擎不友好，我希望有更好的方法做到这一点？@WebblyBrown是的，您可以使用ajax完成100%的网站导航，有效地将其转化为一个单页应用程序。@WebblyBrown-您应该通过AJAX调用加载HTML内容-这样您就不需要将用户重定向到新页面以向他们显示新内容。他当然可以，但这可能不是最简单的实现。在不了解更多要求的情况下，很难说SPA是一条出路。我会在问题中添加更多的内容，伙计们，让我们更清楚一点，对此表示歉意谢谢大家，看来我需要用AJAX来实现这一点，这就是我试图建立的：）