通过页面更改保持div打开？

我一直试图在页面底部留下一个div“页脚”，并通过页面更改保持打开状态。 我已经通过在主内容div上使用JQuery的.load函数来实现这一点，但是，使用该方法，当有人访问不同的页面时，URL保持不变。 有没有办法保持链接更改URL，但保持div打开？ 我计划通过所述div播放音乐，因此它无法在页面切换之间关闭，或者音乐将停止/必须重新缓冲。

Answer 1

您可以使用HTML5执行此操作：

window.history.pushState(obj, "Title", url); 

在.load()调用之后。

它会更改显示的URL以匹配调用中的URL，但只允许属于同一域的URL。

请参阅https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Answer 2

如果要支持非HTML5浏览器，则必须使用框架和哈希URL。 我会使用老式的框架。 （我简直不敢相信我实际上是在建议一个框架集。它被认为是不好的做法，而且我在11年内没有编写这样的代码，但在这种情况下，它实际上似乎是正确的解决方案。你可以使用iframe ，但我认为框架集实际上更有意义。）

使用Ben Alman的hashchange插件 ，并使用这样的脚本来管理页面导航：

 $(function () { $("frame").load(function () { document.title = w.document.title; var links = $("a[href]", this.contentWindow.document); links.attr("target", "_top"); links.click(function (e) { if (this.hostname == location.hostname) { e.preventDefault(); var path = this.pathname.replace(/^[^\/]/, "$&/"); location.hash = "#" + path + this.search + this.hash; } }); }); var w = $("#content")[0].contentWindow; $(window).hashchange(function () { var hash = location.hash.substr(1) || "/mainPage"; var contentLoc = w.location.pathname + w.location.search + w.location.hash; if (hash.toLowerCase() != contentLoc.toLowerCase()) { w.location.replace(hash); } }).trigger("hashchange"); }); 

演示： http ： //jumpingfishes.com/framed/

作为框架的替代方案，您可以使用AJAX重新加载内容，但框架可能更快实现。