使用History API进行Ajax div加载

Question

In my WP site I have post content loaded into a div with ajax on a click event. 在我的WP网站中，我在click事件中使用ajax将内容发布到了div中。
I need it now to change the url for the current post, would prefer not using hashes. 我现在需要它来更改当前帖子的网址，宁愿不使用哈希。
How would I implement this using my js? 我将如何使用我的js来实现呢？

JS: JS：

    jQuery(document).ready(function() {
    jQuery('#main-content').on('click', '.page a', function(e) {
        e.preventDefault();
        var url = jQuery(this).attr('href');
        jQuery('#main-content').html('<h4>Loading...</h4>').load(url+ ' #main-content');
      });
    });

I have researched History API but I'm not sure how to implement it with my js. 我研究了History API，但不确定如何用js实现它。

Answer 1

I haven't done this yet myself, but this should be very simple using the pushState: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history 我本人还没有完成此操作，但是使用pushState应该很简单： https : //developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

var stateObj = { foo: "bar" };
history.pushState(stateObj, "New Page Title", "newPath.html");

Here's an extended example, where you would replace the content, path, and title with the results from your WordPress query that would grab the next post. 这是一个扩展的示例，其中您将用WordPress查询的结果替换内容，路径和标题，以获取下一篇文章。

<!doctype html>
<html>
    <head>
        <title>Push State Testing</title>
        <script type='text/javascript'>
            var i = 1;
            function goToPage( pageNumber, pushState ) {
                var content  = "Hello World " + pageNumber,
                    path     = "hello_world_" + pageNumber,
                    title    = content,
                    stateObj = {"content":content}
                ;
                document.title = title;
                document.getElementById('content').innerHTML = content;
                if( pushState ) {
                    history.pushState({index:pageNumber}, title, path);
                }
                i = pageNumber;
            }
            function nextPage() {
                goToPage( i+1, true );
            }
            window.onload = function() {
                goToPage(1);
                history.replaceState({index:1}, "Hello World 1", "hello_world_1");
            }
            window.onpopstate = function(event) {
                goToPage(event.state.index, false);
            }
        </script>
    </head>
    <body>
        <div id='content'>Push State Testing</div>
        <button type='button' onclick='nextPage()'>Next</button>
    </body>
</html>

In answer to the question in the comments. 在评论中回答问题。 No, you don't need to know the path of the URL until you know the content. 不，在知道内容之前，您不需要知道URL的路径。 You replace the content and do the pushState at the exact same time: 您替换内容并在同一时间执行pushState：

$('#mainContent').html( contentFromWp );
history.pushState( state, titleFromWp, pathFromWp );

Okay, so to take the above and try to write it for you, which I can't test, so I can't guarantee that this will be working like my above examples...it would be something like this: 好的，因此，请接受上面的内容并尝试为您编写代码，我无法对其进行测试，因此，我无法保证它会像上面的示例一样工作...类似这样：

jQuery(document).ready(function() {
jQuery('#main-content').on('click', '.page a', function(e) {
    e.preventDefault();
    var url = jQuery(this).attr('href'),
        title = jQuery(this).attr('title')
    ;
    jQuery('#main-content').html('<h4>Loading...</h4>').load(url+ ' #main-content');
    document.title = title;
    history.pushState({url:url,title:title}, title, url );
  });
});

window.onpopstate = function(event) {
    document.title = event.state.title;
    jQuery('#main-content').html('<h4>Loading...</h4>').load(event.state.url+ ' #main-content');
}

Note the need for onpopstate to make the back button work. 请注意需要onpopstate才能使后退按钮起作用。 You will also want to call a history.replaceState when your webpage first loads like I did in my example so that when users go back to the very first page the first page they were on will reload...otherwise, the user will only be able to go back to the second page they navigated to since going back to the first won't have a stateObj. 您还希望像在我的示例中一样在首次加载网页时调用history.replaceState，以便当用户返回首页时，他们所在的第一页将重新加载...否则，该用户只会能够返回到他们导航到的第二页，因为回到第一页将没有stateObj。

使用History API进行Ajax div加载

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-11-14 16:41:09

使用History API进行Ajax div加载

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-11-14 16:41:09

解决方案1
1 已采纳 2014-11-14 16:41:09