Question

这很简单但我在搜索的最后8小时内没有找到解决方案。

我需要的是从jQuery实现历史推送状态，但我不知道如何。

我试图了解如何使用history.js和其他代码，但它们似乎很复杂。

是否有一个简单的解决方案，或者我还是太业余了？

我需要的功能：网址更改没有内容。返回并显示按钮而不会丢失ajax调用。

我有以下代码：

作为JS，我有：

<script>
$(document).ready(function(){
    $("#module").load("module.php?module=home");
    $("#home_button").click(function(){
        $("#module").load("module.php?module=home");
    });
    $("#account_button").click(function(){
        $("#module").load("module.php?module=account");
    });
    $("#raul_button").click(function(){
        $("#module").load("module.php?module=profile&user_url=raul");
    });
});
</script>

正如我所拥有的HTML：

<button id="home_button">HOME</button>
<button id="raul_button">RAUL PROFILE</button>
<button id="account_button">ACCOUNT</button>
<div id="module"></div>

htaccess的

RewriteRule members(.*)\.aspx$ /?module=profile
RewriteRule ^([^/]*)\.aspx$ /?module=$1 [L]
RewriteRule ^([^/]*)\.html$ /index.php?module=profile&user_url=$1 [L]

Answer 1

$('a').on('click', function(){
    var pageurl = $(this).attr('href');

    if (pageurl != window.location){
        window.history.pushState('', '', pageurl);
    }
});

Answer 2

我建议使用普通链接而不是按钮。让我们不要让事情变得比他们需要的更难！

首先，您需要捕获链接上的所有点击。在这里，一些魔法发生。

$(document).on('click', 'a', function(event) {
    event.preventDefault();

    var href = $(this).attr('href'); // what page are you getting?

    $.get(href, function(data) {

        $('#module').html(data);

        var current_page = $('html').html();

        // add an item to the history log
        history.pushState(current_page, event.target.textContent, event.target.href);

    });

});

您还需要确保，如果您转到您的网址，则会将内容保存到历史记录中，以防您需要在历史记录中倒退。

var current_page = $('html').html();

// Store the initial content so we can revisit it later
history.replaceState(current_page, document.title, document.location.href);

最后，捕捉所有状态变化（按下后退或前进按钮时）。

// Revert to a previously saved state
window.addEventListener('popstate', function(event) {
    console.log('popstate fired!');
    $('html').html(data);
});

当我需要对此进行一个小项目时，我已经从这个主题的多个SE答案中编译了这段代码。 History.js似乎非常压倒性，但您基本上可以使用与此相同的代码，但将历史记录替换为历史记录。

另外，我建议在特定divs中加载内容并使用fadeIn / fadeOut效果以获得更好的用户体验！（见http://usatoday.com）

注意：此代码并非100％完美且已准备好启动，因此请根据需要进行调整。当您使用它时，您可能会注意到更改某些代码将更有助于您的事业。

PHP，jQuery和Ajax历史

2 个答案: