Question

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

Answer 1

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

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

在.load()来电后

。

它会更改显示的网址以匹配通话中的网址，但只允许属于同一网域的网址。

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

Answer 2

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

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

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

2 个答案: