Держите div открытым через изменения страницы?

Question

Я пытался сделать так, чтобы div-колонтитул оставался внизу страницы и оставался открытым при изменениях страницы.Я добился этого с помощью функции JQuery .load в главном div контента, однако, используя этот метод, когда кто-то переходит на другую страницу, 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

Вам придется использовать фреймы и URL-адреса хешей, если вы хотите поддерживать не-HTML5 браузеры.Я бы использовал старомодный набор фреймов.(Я не могу поверить, что на самом деле предлагаю набор фреймов. Это считается плохой практикой, и я не писал подобный код, вероятно, в течение 11 лет, но в этом случае это действительно кажется правильным решением. Вы могли бы использовать iframes, но я думаю, что на самом деле набор фреймов имеет больше смысла.)

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

Используйте 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 для перезагрузки содержимого, но фреймы могут быть быстрее реализованы.