保存和加载页面的ajax状态 [英] saving and loading the ajax state of a page

问题描述

我正在研究Wordpress单页组合上的Ajax加载功能.

I'm working on an ajax loading function on a Wordpress single page portfolio.

原理是，当您单击图库中的缩略图时，它会打开一个容器(#DrawerContainer)，并将本文的ajax内容提取到其中.在很多帮助下，单击缩略图时我已经可以打开抽屉并加载帖子内容.

The principle is that when you click a thumbnail in the gallery, it opens a container (#DrawerContainer) and fetch the ajax content of this article into it. With a lot of help, I'm already able to open the drawer and load the post content when I click a thumbnail.

如果您想看到它起作用，这里是一个小提琴(Ajax将不会加载，但它可以在本地起作用). http://jsfiddle.net/RF6df/24/

Here is a fiddle if you want to see it working (the ajax will not load but it works locally). http://jsfiddle.net/RF6df/24/

我现在正在研究的部分:我需要我的网站可抓取，并且网址必须可共享.如果我给某人http://mywebsite.com/#!project5，我需要在他加载页面时打开project5内容.
我认为哈希爆炸(#！)网址是使这项工作有效的方法.通过下面的代码(在jsfiddle上进行了注释)，我可以更新url并添加单击的缩略图的哈希值.

The part I'm working on now: I need my site to be crawlable and the urls to be shareable. If I give http://mywebsite.com/#!project5 to someone, I need project5 content to be opened when he loads the page.
I thought the hash-bang (#!) urls was the way to go to make this work. With the code below (commented on the jsfiddle), I can update the url and add the hash of the clicked thumbnail.

var pathname = $(this).find('a')[0].href.split('/'),
            l = pathname.length;
        pathname = pathname[l-1] || pathname[l-2];
        window.location.hash = "#!" + pathname;

但是，当我加载页面时，不记得ajax状态.我以为是因为我的ajax容器仅在click事件中加载，但是当我在php中添加持久性容器时没有任何变化.

But when I load a page, the ajax state isn't remembered. I assumed it was because my ajax container was only loaded on click event, but there is no change when I add a persistant container in the php.

是否有一种方法可以加载已显示帖子内容的页面，或者在该页面加载哈希爆炸网址时打开#DrawerContainer?

Is there a way to load the page with a post content already displayed, or to open the #DrawerContainer when the page is loading a hash-bang url?

请记住，我只是在学习jquery和ajax.因此，如果您能解释或评论您的工作，我将不胜感激，我肯定会在同一时间学习... :)

Please keep in mind that I'm just learning jquery and ajax. So I'd really appreciate if you explain or comment a little bit what you do, I'll for sure learn at the same time... :)

推荐答案

在加载时，您应该检查window.location.hash并触发对特定链接/div的点击.

on onload you should check the window.location.hash and trigger a click on the particular link/div.

$(document).ready(function() {
    var hash = window.location.hash;
    if ( hash.length > 0 ) {
        hash = hash.replace('#' , '' , hash );
        $('a[rel="'+hash+'"]').trigger('click');
    }
}); 

这篇关于保存和加载页面的ajax状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！