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

【问题标题】：Keep div open through page changes?通过页面更改保持 div 打开？
【发布时间】：2011-12-19 17:43:13
【问题描述】：

我一直试图让 div 'footer' 留在页面底部，并在页面更改时保持打开状态。我通过在主要内容 div 上使用 JQuery 的 .load 函数实现了这一点，但是，使用该方法，当有人转到不同的页面时，URL 保持不变。有没有办法保持链接更改 URL，但保持 div 打开？我打算通过上述 div 播放音乐，所以它不能在页面切换之间关闭，否则音乐将停止/必须重新缓冲。

【问题讨论】：

标签： javascript jquery css reload

【解决方案1】：

您可以使用 HTML5 做到这一点：

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

在您拨打.load() 之后。

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

见https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

【讨论】：

出于某种原因，它不想为我工作。最有可能的兼容性问题。我正要发布我的代码，但我是新来的，我似乎无法正确格式化。
只需在您的代码前面放四个空格，或者粘贴它，选择它，然后按{} 按钮。

【解决方案2】：

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

<frameset border="0" rows="*,100">
    <frame src="/mainPage" id="content" />
    <frame src="/footer" id="footer" />
</frameset>

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

$(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 重新加载内容，但框架可能更快实现。

【讨论】：

+1 好例子 gilly3！（顺便说一句，这就是插件的用途，对吧？！:)