Question

我看到了一些非常不同的东西，我不知道该怎么做。

网站Rdio.com当您点击任何链接时，网址完全改变（不是＃）。但是页面底部的div（正在播放歌曲）不会重新加载。

他们是如何做到的？

Answer 1

使用history和pushState方法，使用JavaScript的新popState对象完成此操作。另请参阅http://diveintohtml5.info/history.html

Answer 2

您可以使用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>');
            });         
        });
};

我希望这能回答你的问题。

Answer 3

如果我错了，请纠正我 - 考虑到我没有去过他们的网站 - 但我相信他们会使用某种类型的iframe - 考虑到他们将不得不重新加载该div，如果他们不这样做

更改网址并保留div

3 个答案: