[英]Ajax .load refresh/back button
I'm opening part of my pages in div with Ajax. 我正在使用Ajax在div中打开部分页面。 But when i refresh or hit the back button it just doesnt do what it should. 但是,当我刷新或单击后退按钮时,它只是没有做应做的事情。 I read and tried a lot to get this to work but it just dont want to work. 我阅读并尝试了很多方法才能使其正常工作,但它只是不想工作。 I'm at a point that when i hit the the refresh or back button my address bar give the right page, but my div doenst change (eg address bar says: /projects.php but the page/div is still on index.php) 我的意思是,当我按下“刷新”或“后退”按钮时,我的地址栏给出了正确的页面,但是我的div更改了(例如,地址栏说:/projects.php,但该页面/ div仍然位于index.php上) )
I just want to use the back/forward buttons and when i refresh the page it has to stay at the same page and dont go back to the first mainpage. 我只想使用后退/前进按钮,当我刷新页面时,它必须停留在同一页面上,而不要返回到第一主页。
Here is my code, hope someone have a solution: 这是我的代码,希望有人解决方案:
Html - my menu HTML-我的菜单
<div id="buttons">
<a class="menu" id="page1" href="#Home">Home</a><span>|</span>
<a class="menu" id="page2" href="#Projects">Projects</a><span>|</span>
<a class="menu" id="page3" href="#About">About</a><span>|</span>
<a class="menu" href="#Contact">Contact</a>
</div>
.load part 。加载部分
$(document).ready(function() {
$("#page1").click(function(){
$('#content').load('index.php #content');
});
$("#page2").click(function(){
$('#content').load('projecten.php #content');
});
$("#page3").click(function(){
$('#content').load('overons.php #content');
});
});
.haschange part .haschange部分
$(function(){
// These two properties, set after jQuery and the hashchange event plugin are
// loaded, only need to be used when document.domain is set (to fix the "access
// denied" error in IE6/7).
$.fn.hashchange.src = '../../document-domain.html'; //--- I still dont know what to do with this, but i guess its only for IE6/7 ---//
$.fn.hashchange.domain = document.domain;
// Bind an event to window.onhashchange that, when the hash changes, gets the
// hash and adds the class "selected" to any matching nav link.
$(window).hashchange( function(){
var hash = location.hash;
// Set the page title based on the hash.
document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
// Iterate over all nav links, setting the "selected" class as-appropriate.
$('#buttons a').each(function(){
var that = $(this);
that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
});
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).hashchange();
});
When you only change the fragment the page doesn't reload or anything. 当您仅更改片段时,页面不会重新加载或执行任何操作。
This is the thing with SPA (Single Page Applications) - they don't reload the page. SPA(单页应用程序)就是这样-它们不会重新加载页面。 Which is why eg Gmail maintains the page state even though the URL after the #
(aka fragment ) changes. 这就是为什么即使#
(又名fragment )后面的URL更改,例如Gmail仍保持页面状态的原因。 Open a different folder and/or email and see that the URL fragment changes. 打开其他文件夹和/或电子邮件,然后查看URL片段是否已更改。
You'll need to listen to those events and do actions similar to your $('#pageN').click()
handlers yourself. 您需要监听这些事件,并自己执行类似于$('#pageN').click()
处理程序的操作。 Also do something similar if a user opens http://yourserver/#page2 directly. 如果用户直接打开http:// yourserver /#page2,也可以执行类似的操作。 And think about SEO if that is applicable to you. 然后考虑SEO是否适用于您。
See a similar question: javascript - Detecting Back Button/Hash Change in URL - Stack Overflow (do try to use the HTML5 API if you can ), 看到类似的问题: javascript-检测URL中的“后退按钮/哈希”更改-堆栈溢出 ( 如果可以 ,请尝试使用HTML5 API),
See eg Intelligent State Handling · browserstate/history.js Wiki for some background info. 有关某些背景信息,请参见例如Intelligent State Handling·browserstate / history.js Wiki 。
Or create completely separate pages where the URL path (before the #
changes). 或在URL路径(在#
之前)创建完全独立的页面。 Like in the good old days. 就像过去的美好时光。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.