更改 url 并保留一个 div答案

【问题标题】：Change the url and keep a div更改 url 并保留一个 div
【发布时间】：2014-03-15 04:14:53
【问题描述】：

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

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

他们是怎么做到的？

【问题讨论】：

标签： javascript html url browser-history

【解决方案1】：

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

【讨论】：

不，它不是 iframe.. 它真的很奇怪.. 我认为是 D.Strout 说的这个新功能.. 它的免费 radio.com，看看真的很好。使用 Firebug 或其他东西更改底部 div 或菜单，而不是导航你会看到

【解决方案2】：

这是通过 JavaScript 的新 history 对象完成的，使用 pushState 和 popState 方法。另见http://diveintohtml5.info/history.html

【讨论】：

【解决方案3】：

您可以使用 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 来检测