保存并加载页面的ajax状态

我正在研究Wordpress单页组合中的ajax加载功能。保存并加载页面的ajax状态

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

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

我现在正在处理的部分：我需要我的网站被抓取，并且网址可以共享。如果我给某人http://mywebsite.com/#!project5，我需要在加载页面时打开project5内容。
我认为哈希爆炸（＃！）网址是完成这项工作的方法。通过下面的代码（在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容器只在点击事件上加载，但在php中添加持久容器时没有任何变化。

有没有一种方法来加载页面的内容已经显示，或打开#DrawerContainer页面加载哈希爆炸URL？

请记住，我只是在学习jquery和ajax。所以，如果你解释或评论一下你做了什么，我会非常感激，我肯定会同时学习...... :)

来源

2012-11-08 wyem

烯的方法看起来不错，我对它发表了评论的哈希值。如果您需要进一步的帮助，更新小提琴以更好地反映html结构将极大地帮助 - 例如列表项中没有链接，可以很高兴看到它们的href如何（例如'/ foo /'或'/ foo'或'http：// example.com/foo/bar'） –

我只是更新了小提琴（请参阅第一个缩略图），以便获得我确切的结构。 '<？php the_permalink（）; ？>'正在返回这个'http：// example.com/foo /'，并且它看起来像这个'http：//example.com/#！foo' – wyem

onload你应该检查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'); 
    } 
});

来源

2012-11-08 15:48:27 Ene

这看起来不错，但是，替换/删除'＃！'而不是'＃'并使用'[href $ ='而不是'[rel ='可能会产生更好的结果。 –

我尝试了两个代码，但没有产生积极影响。但如果我理解得很好，我想我必须朝这个方向挖掘。 – wyem

纠正我，如果我错了，这个函数应该检查哪个哈希是在地址栏中，并触发点击相应的缩略图，当页面加载？是对的吗？ – wyem

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

首先我绑定一个hashchange事件获得哈希值

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

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

      o.preventDefault(); 



     if (!url) { 
      return; 
     } 

}

然后，我触发，当我想hashchange - 在你的情况下，即在页面加载的文件准备好。

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

然后，您可以使用您的函数加载正确的内容

来源

2012-11-08 15:59:37

问题是关于打开页面，没有点击链接。 – Ene

这就是为什么当页面加载时我触发hashchange。当文档准备就绪时，它会触发hashchange函数，该函数获取当前的散列值，然后可以用它来加载正确的内容 - 这意味着可以使用相同的函数来单击链接并加载页面 –

谢谢@KevPrice但你的第一个代码是让我的浏览器跳转到另一个页面，而不是在家中加载内容。 – wyem

保存并加载页面的ajax状态

回答

相关问题