您可以使用jQuery AJAX单击要在其他页面中加载的链接,有两种类型,globalTabs和localTabs,它们将内容加载到不同的面板中.注意：每个页面实际上是整页,但我们只使用jQuery find方法获取我们想要的内容.
为了增强这一点,我使用的是HTML5 History API(用于跨浏览器的History.js).
标题和网址变化很好,历史堆栈正在成功推送,当我使用后退和前进按钮时,网址和标题会恢复原状.
现在,复杂的部分正在加载回来自先前状态的内容,并且更加复杂地加载正确的类型,例如全球或本地的ajax.为了实现这一点,我想我需要将数据和类型传递给推送状态,以便它可以再次用于popstate …
谁能帮助我指出正确的方向？我有所有的第一部分工作,只是将ajax类型传递给pushState然后重新使用popstate更改的情况.
为了改进这一点,我重写如下,以显示我传递类型和数据的计划：
注意：大写历史是因为我正在使用History.js
var App = {
init: function() {
$(document).ready(function() {
$('.globalTabs li a').live('click',function (e) {
e.preventDefault();
App.globalLoad( $(this).attr('href') );
});
$('.localTabs li a').live('click',function (e) {
e.preventDefault();
App.localLoad( $(this).attr('href') );
});
});
window.addEventListener('popstate',function(event) {
// Load correct content and call correct ajax request...
});
},localLoad: function ( url ) {
$.ajax({
url: url,success: function (responseHtml) {
$('.localContent').html($(responseHtml).find('#localHtml'));
$data = { $(responseHtml).find('#localHtml'),'local'};
History.pushState($data,$(responseHtml).filter('title').text(),url);
}
});
},globalLoad: function ( url ) {
$.ajax({
url: url,success: function (responseHtml) {
$('.mainContent').html($(responseHtml).find('#globalHtml'));
$data = { $(responseHtml).find('#globalHtml'),'global'};
History.pushState($data,url);
}
});
}
};
App.init();
更新：澄清这个问题,他们是我寻求帮助的两个问题.
解决方法
object = {key:'value'};
$data = { text:$(responseHtml).find('#globalHtml'),type:'global',url:'the_url'};
不
$data = { $(responseHtml).find('#globalHtml'),'global'};
使用对象定义,您将使用History.getState()获取数据
History.Adapter.bind(window,'statechange',function(){
var data = History.getState().data;
if(data){
var html = data.text;
var type = data.type;
var type = data.url;
if(html && type){
if(type == 'global'){
// just change html
$('.mainContent').html(html);
// call the App object's function
if(url) App.localLoad(url);
}else{
$('.localContent').html(html);
}
}
}
})
注意：
>当statechange事件被触发时,如果存在任何数据,它将触发ajax调用
>模拟ajax调用而不仅仅改变标题,我认为这将涵盖它
编辑
>数据对象实际上取自History.getState().数据不是History.getState()
>为存储的对象添加了另一个param以保留url
>使用url和类型可以调用与onClick事件相同的函数
问题：
Uncaught TypeError: Converting circular structure to JSON
一个对象在某处引用自己;因此消息“循环结构”.这意味着您正在尝试对具有对自身的引用的对象进行字符串化,这通常会发生在DOM元素中.你应该考虑改变
$data = { $(responseHtml).find('#localHtml'),'local'};
至：
$data = { html:$(responseHtml).find('#localHtml').html(),type:'local'};
注意对象的键(html和类型)和html函数调用(.html()),这样你就不会发送不必要的数据,只是html.如果在将其作为DOM对象加载时需要使用html数据,请使用以下命令：
var DOM_Element_loaded = $('<div>').html(html_loaded);
现在您可以使用DOM_Element_loaded来搜索/操作加载的html中的数据,而无需将其附加到正文.
