低成本页面转换[重复]答案

【问题标题】：low cost page transitions [duplicate]低成本页面转换[重复]
【发布时间】：2013-08-01 07:00:37
【问题描述】：

我对 Web 开发比较陌生，所以这可能是一个奇怪的问题。我希望我的网站的一部分加载一个新页面。但重要的部分不需要改变。我现在要做的是将内容加载到 div 中。

$('#rightdiv').load("about.html");

这样做的缺点是地址不会改变，我相信有一个很好的解决方案，但我不知道如何。我试过用谷歌搜索它，但我找不到任何好的东西。所以我很想看看解决方案和解决方案的名称（希望你明白我的意思）。

感谢您的时间和精力。

【问题讨论】：

你可以找到自己的解决方案，这很容易。它被称为“HTML5 历史 API”。谷歌那个。
非常感谢，我将在今天晚些时候阅读。（如果您发布是作为答案，我可能会接受它）。

标签： javascript jquery html

【解决方案1】：

支持 HTML5 的 pushState 的浏览器将允许您更改路径：

$('#rightdiv').load("about.html", function pushState(){
    if(history && history.pushState){
        history.pushState('','','about.html');
    }
});

【讨论】：

【解决方案2】：

标准方法是使用location.hash。例如，如果您在mysite.com/ 上，并加载了about.html 页面，您可以将哈希设置为#about。这不会导致页面重新加载，但会更改 URL（以提供书签/后退按钮支持）。

例如，使用load()的成功回调：

$('#rightdiv').load('about.html', function() {
    location.hash = 'about';
});

HTML5 添加了一个名为pushState 的新API。这允许对 URL 进行更完整的修改，而不会导致页面重新加载。阅读更多关于 here 的信息。

【讨论】：

支持书签和返回按钮需要的还不止这些。
这会让他走上正确的道路。
location.hash 是 HTML5 之前的标准，但 pushState 可能更适合新的 HTML5 开发。请参阅here 的竞争答案，但要对它们持保留态度，并注明发布日期。查看浏览器支持here
HTML5 尚未正式标准化。很快，但还没到。

【解决方案3】：

这可以通过利用 HTML5 及其功能轻松实现。
Myspace 的功能与您所要求的类似。 HTML5 History API 在不刷新页面的情况下更改浏览器 URL。将其与 JQuery $.ajax 结合可以产生在 myspace、github 和 facebook 中显示的效果。 “arundavid”对此链接有很好的解释tinywall.info

【讨论】：

【解决方案4】：

这是使用 AJAX 将数据加载到 div 的正确方法。不过我个人更喜欢使用jQuery.ajax() 函数。

【讨论】：