历史API问题

我在我的网站做了一些Ajax调用，并试图实现历史API，使我可以浏览浏览器的历史。这是“返回”按钮的代码：历史API问题


$(document).ready(function(){ 
    window.addEventListener("popstate", function(e) { 

    //Flag I use to not fire it on the first page load 
    if (!ajaxhistory) 
     return; 

    do_my_ajaxs_things(); 

    }, false); 
});

但我有2个问题

1）当我在地址栏中键入URL加载页面的第一次。这也会触发ajax调用，这显然是不受欢迎的。 Theres不需要Ajax，因为我必须加载整个页面。这一个，我已经设法用一面旗子来解决它，但我不知道是否一个更优雅的方式来做到这一点

2）可以说我在“google.com”，我键入我的网址“www。 mysite.com“，然后我打一个ajax电话，然后转到”www.mysite.com/contacts“。如果我按回退按钮一次，我会去“www.mysite.com”好，但如果我再次按下BACK，我仍然会在“www.mysite.com”，我发现自己我不能回到谷歌。我怎么能解决这个问题？

所有帮助表示赞赏。谢谢。

来源

2011-08-23 Enrique Moreno Tent

现在这是很多的解释，但最重要的问题是没有回答：你想达到什么？为什么你在'popstate'处理程序中启动AJAX调用？ –

我试图实现的是当我使用ajax加载页面时，我可以使用后退和前进按钮 –

我认为你的方法是错误的。每次用户返回时都不需要执行AJAX请求 - 这就是状态，您应该已经拥有所有相关数据。恕我直言逻辑应该是以下几点：

如果窗口载荷和window.history.state已经设置 - 只要将此状态。
否则触发一个AJAX请求来检索默认状态并用替换与它的当前状态。
每当用户导航到一个新的“页面”，触发一个AJAX请求来检索新的状态并推送它。
在您的popstate处理程序中，您应该简单地应用您在event.state中获得的状态，而不执行任何新的AJAX请求。

下面是一些假代码loadPage函数的示例代码，通常您会将您的AJAX调用放在那里。功能和状态数据也是绝对最小的。

<script type="text/javascript"> 
window.onload = function() 
{ 
    if (window.history.state) 
    { 
    applyState(window.history.state); 
    } 
    else 
    { 
    loadPage(0, function(state, title, loc) 
    { 
     window.history.replaceState(state, title, loc); 
    }); 
    } 

    window.addEventListener("popstate", function(event) 
    { 
    applyState(event.state); 
    }); 
} 

function goToPage(pageId) 
{ 
    loadPage(pageId, function(state, title, loc) 
    { 
    window.history.pushState(state, title, loc); 
    }); 
} 

function loadPage(pageId, callback) 
{ 
    window.setTimeout(function() 
    { 
    var state = {text: "text" + pageId}; 
    applyState(state); 
    callback(state, "page " + pageId, "#" + pageId); 
    }, 100); 
} 

function applyState(state) 
{ 
    document.getElementById("content").textContent = state.text; 
} 
</script> 
<div id="content"> 
    ??? 
</div> 
<button onclick="goToPage(1);">1</button> 
<button onclick="goToPage(2);">2</button> 
<button onclick="goToPage(3);">3</button>

来源

2011-08-23 09:18:29

对于你的第一个问题，这真是一个浏览器问题。浏览器应该（在我看来）最初加载页面时不会触发popstate事件。我认为你可以做的最好的事情只是在页面加载完成后注册事件。

History.js是一个很好的库，它平滑了很多历史API。即使你不使用它们，他们在这里也有很好的关于API的文档： https://github.com/browserstate/history.js/wiki/The-State-of-the-HTML5-History-API

关于你的第二个问题，浏览器只会去google，而不是为你的网站发布popstate事件。你不必担心，这是浏览器的责任

来源

2011-08-23 09:06:10

回答

相关问题