AJAX 网页保留浏览器前进后退等功能_javascript技巧-js教程-PHP中文网

AJAX 网页保留浏览器前进后退等功能_javascript技巧

php中文网

发布： 2016-05-16 18:10:54

原创

1287人浏览过

在一些AJAX被大量使用的页面，有时都不太敢刷新，因为刷新以后可能看到的是和原来有很大不同的页面。暂不讨论在某些页面内容大量更新的情况下是否该使用AJAX的问题，本文简单说一下保留浏览器前进、后退、刷新等功能。
这里假设一个有两个Tabs的页面，每个Tab中含有大量文字，可能还有图片。如果现在觉得Tab2的内容很好，把它加入收藏夹或发送给朋友。下次通过收藏夹打开或者朋友点开这个链接的时候很有可能看到的是Tab1的内容，然后需要鼠标再次点击Tab2才看到想要看的内容。如果页面逻辑更为复杂，则可能要进行多步操作才能回到希望看的内容，这样的体验不太好。
要使刷新、加入收藏夹等功能正常使用，需要让当前的操作在URI上有所体现。但是改变URI的同时又不能引起页面的刷新，因此可以通过改变URI中的片段(fragment)来实现。例如，点击Tab1后将URI改为http://www.example.com/example.html#tab1，点击Tab2则将URI改为http://www.example.com/example.html#tab2。

复制代码代码如下:

 
function ShowTab1() { 
$("#tab2").hide(); 
$("#tab1").show(); 
window.location.hash = "#tab1"; 
}; 
function ShowTab2() { 
$("#tab1").hide(); 
$("#tab2").show(); 
window.location.hash = "#tab2"; 
}; 

这样做已经使得URI产生了变化，但是无论通过http://www.example.com/example.html#tab1还是http://www.example.com/example.html#tab2访问页面都是显示Tab1的内容，所以还需要在页面载入时读取#后的内容。

复制代码代码如下:

 
$(document).ready(ShowTab()); 
function ShowTab() { 
if (window.location.hash == "#tab2") 
ShowTab2(); 
else 
ShowTab1(); 
} 

这样，刷新和加入收藏夹等功能都已经可以使用了，不过前进和后退还是会有麻烦。虽然这两个按钮已经变得可用，但是点击时网页的内容并没有发生变化。我们需要用到body的onhashchange事件。onhashchange事件并不是所有浏览器都支持的，如果要使不支持该事件的浏览器也检测#后内容的变化，可能需要写一个函数定期检测window.location.hash的变化或者自己实现onhashchange事件。
示例代码打包下载 (Visual Studio 2010)