Изменить URL и сохранить div

Question

Изменить URL и сохранить div

0

Я видел что-то совсем другое, и я понятия не имею, как это сделать.

Сайт Rdio.com, когда вы нажимаете любую ссылку, полностью меняет URL (не #). Но div в нижней части страницы (которая играет песню) не перезагружается.

Как они это делают?

Henrique Kieckbusch 15 фев. 2014, в 20:38

Источник

Теги:

javascript

html

url

browser-history

3 ответа

2

Это делается с использованием JavaScript-объекта history, используя методы pushState и popState. См. Также http://diveintohtml5.info/history.html

D. Strout 15 фев. 2014, в 16:49

0

Исправьте меня, если я ошибаюсь - учитывая, что я не был на их сайте, но я считаю, что они будут использовать iframe в некотором роде, считая, что им придется перезагрузить этот div, если они сделали иначе

BruceWayne 15 фев. 2014, в 18:31

1

нет, это не Iframe .. это действительно странно .. Я думаю, что это новая функция, о которой сказал D.Strout .. Это бесплатный radio.com, взгляните, это действительно приятно. Измените нижний div или меню, используя Firebug или что-то еще, после чего вы увидите
Henrique Kieckbusch 15 фев. 2014, в 19:39

Ещё вопросы

нет, это не Iframe .. это действительно странно .. Я думаю, что это новая функция, о которой сказал D.Strout .. Это бесплатный radio.com, взгляните, это действительно приятно. Измените нижний div или меню, используя Firebug или что-то еще, после чего вы увидите

Falk · Accepted Answer · 2014-02-15T18-15-00.000Z

вы можете сделать это с помощью нагрузки ajax, а затем включить историю браузера. вот так:

/*clickhandler Hauptmenü*/
$('#main-nav a').on('click', function(e){
    var href = $(this).attr('href'),
        title = $(this).text();
    loadContent(href,title);
    /*manipulate Browser history */
    history.pushState({path: href, titel: title}, $(this).attr('href'), 'http://www.example.com/'+$(this).attr('href'));
    e.preventDefault();
});

window.addEventListener('popstate', function(e){
    loadContent(e.state.path, e.state.titel);
}, false);

function loadContent(href,title){
    var href = href,
        container = $('#main-cont');
        container.fadeOut(100, function(){
            container.load( href +' #main-cont', function(){
                container.fadeIn(200);
                $('title').replaceWith('<title>' + title + '</title>');
            });         
        });
};

Надеюсь, это ответит на ваш вопрос.

здорово! :) Я буду использовать Modernizr.history, чтобы обнаружить так