ajax 实现浏览器后退,前进,刷新功能

刷新、加入收藏夹等功能正常使用,需要让当前的操作在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事件

时间: 2024-09-29 09:20:58

ajax 实现浏览器后退,前进,刷新功能的相关文章

django ajax提交评论并自动刷新功能的实现代码

在试了很多次了,终于搞定了,上代码吧.(我用的是jQuery的ajax,不是原生的) js代码: <script> $(document).ready(function () { getcomment(); $('.comment-box button').click(function () { var comment_text = $('.comment-box textarea').val(); $.ajax({ type: 'POST', url: '/bbs/article/{{ ar

location的hash部分和使用window.onhashchange实现ajax请求内容时使用浏览器后退和前进功能

在js跨域双向数据传递时可以用iframe加上location.hash来实现,在研究这个的时候深入学习了一下hash的特性.   hash就是uri中#及后面的部分,例如:www.google.com.hk#123的#123.当只有hash部分发生变化时,浏览器的历史记录会产生记录,但不会向服务器发出请求,这时按后退键地址栏的uri会变化但页面内容不变.   而hash变化但不发出请求就是js跨域双向数据传递的基础啦.   下面就讲述一下hash结合ajax的使用,ajax每次取数据时页面更新

Jquery:ajax实现翻页无刷新功能代码_jquery

不多说,直接贴代码: 下面是js部分: 复制代码 代码如下: var pageSize = "10";//每页行数 var currentPage = "1";//当前页 var totalPage = "0";//总页数 var rowCount = "0";//总条数 var params="";//参数 var url="activity_list.action";//action

js ajax 解决浏览器的【前进】【后退】按钮失效问题

本文章提供的教程是一款js ajax 解决浏览器的[前进][后退]按钮失效问题哦,在ajax开发中,前进后退网页是一个难题,现在我们提供一个完整理的解决方案来处理此事情. <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>new document</title> </head> <body&g

纯JS实现AJAX局部刷新功能

AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 下面给大家介绍JS实现AJAX局部刷新功能,具体内容如下所示: 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. //

AJAX初级应用-RSS无刷新聚合器的代码与下载

ajax|rss|刷新|无刷新|下载 rss.js[复制此代码]CODE:<!-- //控制ID function getId(objId){     return document.getElementById(objId) } //链接对应数组,请注明转载自http://www.cnrui.cn/blog function urlArrary(urlName){     switch(urlName){         case "clear":             re

JS+CSS实现模仿浏览器网页字符查找功能的方法

 这篇文章主要介绍了JS+CSS实现模仿浏览器网页字符查找功能的方法,实例分析了javascript实现查找功能的样式及相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS+CSS实现模仿浏览器网页字符查找功能的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <title>JS+CSS模仿的网页字符查找功能</title> <style type=text/css> BODY

通过Ajax使用FormData对象无刷新上传文件方法_jquery

写在前面:本文说的这个方案有浏览器兼容性问题:所有主流浏览器的较新版本已经支持这个对象了,比如Chrome 7+.Firefox 4+.IE 10+.Opera 12+.Safari 5+,对兼容性比较敏感的网站慎用. 在工作中遇到了一个问题:在一个页面中,有4块内容,每块内容都包含一个图片上传功能,希望可以实现一键把这四块内容都上传上去. 我没有用插件实现上传功能,就是用的input[type=file],因此就遇到一个问题就是: ①传统的form表单会导致页面刷新,无法实现上述功能 ②把表单

JS+CSS实现模仿浏览器网页字符查找功能的方法_javascript技巧

本文实例讲述了JS+CSS实现模仿浏览器网页字符查找功能的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS模仿的网页字符查找功能</title> <style type=text/css> BODY { FONT-SIZE: 12px; LETTER-SPACING: 1pt; LINE-HEIGHT: 22px; MARGIN-LEFT: 5pt; MARGIN-TOP