保存和加载页面的ajax状态答案

【问题标题】：saving and loading the ajax state of a page保存和加载页面的ajax状态
【发布时间】：2012-11-08 15:45:06
【问题描述】：

我正在开发 Wordpress 单页作品集上的 ajax 加载功能。

原理是当你点击图库中的缩略图时，它会打开一个容器（#DrawerContainer）并将本文的ajax内容提取到其中。在很多帮助下，我已经能够在单击缩略图时打开抽屉并加载帖子内容。

如果你想看到它工作，这里有一个小提琴（ajax 不会加载，但它在本地工作）。 http://jsfiddle.net/RF6df/24/

我现在正在处理的部分：我需要我的网站是可抓取的，并且网址是可共享的。如果我将http://mywebsite.com/#!project5 给某人，我需要在他加载页面时打开 project5 内容。
我认为 hash-bang (#!) url 是完成这项工作的方法。使用下面的代码（在 jsfiddle 上注释），我可以更新 url 并添加点击缩略图的哈希。

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

但是当我加载页面时，不会记住 ajax 状态。我认为这是因为我的 ajax 容器仅在单击事件时加载，但是当我在 php 中添加持久容器时没有任何变化。

有没有办法加载已经显示帖子内容的页面，或者在页面加载 hash-bang url 时打开#DrawerContainer？

请记住，我只是在学习 jquery 和 ajax。所以如果你解释或评论你所做的事情，我真的很感激，我一定会同时学习...... :)

【问题讨论】：

Ene 的方法看起来不错，我已经评论过了。如果您需要进一步的帮助，更新小提琴以更好地反映 html 结构将有很大帮助 - 例如列表项中没有链接，很高兴看到它们的href是什么样的（例如/foo/或/foo或http://example.com/foo/bar）
我刚刚更新了小提琴（见第一个缩略图），所以你有我的确切结构。 <?php the_permalink(); ?> 正在返回此 http://example.com/foo/ 并使用哈希看起来像这样 http://example.com/#!foo

标签： php javascript jquery ajax

【解决方案1】：

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

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

【讨论】：

这看起来不错，但是，替换/删除 #! 而不是 # 并使用 [href$= 而不是 [rel= 可能会产生更好的结果。
我尝试了你的两个代码都没有积极的效果。但如果我理解得很好，我想我必须朝这个方向挖掘。
如果我错了，请纠正我，这个函数应该检查地址栏中的哈希值并在页面加载时触发点击相应的缩略图？对吗？
这是 Ene 答案的更新版本，使用 Attribute Ends with selector 匹配 href 属性 - fiddle（在脚本底部）。希望它应该有一些用处。
谢谢Fabrício，我们非常亲密！！当我重新加载页面时，抽屉会在很短的时间内打开和关闭（我什至看不到内容）。在 Ie 中的结果相同，在 Firefox 中我的图像消失了。与您拥有的代码的唯一区别是在'#portfolio-list>div:not(#DrawerContainer)' 而不是div 上检测到点击。无论如何，我更新了 jsfiddle：jsfiddle.net/RF6df/28 如果您看到其他可能阻止打开的内容，请告诉我...我会尝试回应或提醒我身边的更多信息。

【解决方案2】：

我在希望通过哈希更改触发的网站上使用了以下内容。

首先我绑定一个hashchange事件来获取hash值

 $(window).bind('hashchange', function(o){

            url = window.location.hash.substring(1);

            o.preventDefault();



        if (!url) {
            return;
        }

 }

然后我会在需要时触发 hashchange - 在您的情况下，当页面加载时，即在文档准备就绪时。

jQuery(document).ready(function($) {
   $(window).trigger('hashchange');
});

然后您可以在加载正确内容的函数中使用哈希值

【讨论】：

问题是关于打开页面，而不是点击链接。
这就是我在页面加载时触发 hashchange 的原因。当文档准备就绪时，它会触发 hashchange 函数，该函数获取当前的哈希值，然后可以使用该值加载正确的内容 - 这意味着可以使用相同的函数来点击链接和加载页面
感谢@KevPrice，但您的第一个代码是让我的浏览器跳转到另一个页面，而不是加载主页中的内容。