没有合适的资源?快使用搜索试试~ 我知道了~
传统的页面,浏览器通过url访问页面,页面的内容由后台服务生成页面所有内容再发回给浏览器渲染展示。到AJAX流行的时候,很多信息为AJAX异步请求,比如:点击、翻页等。通常这种情况你一刷新浏览器,当前页面就会重置到初始状态。更不用说把看到的信息url发给好友了。 传统的状态保存在地址栏,如: www.abc.com/search?s=abc&id=23&page=3 如果通过这种方式的话,浏览器会刷新页面,如果使用锚点的话则不会刷新浏览器。具体是点击页面去请求数据的同时会改变地址栏“#”后面的值。我们翻页到第四页 如: abc.com/search#s=abc&id=23&page=4 这样还
资源推荐
资源详情
资源评论
AJAX页面状态保持思路详解页面状态保持思路详解
传统的页面,浏览器通过url访问页面,页面的内容由后台服务生成页面所有内容再发回给浏览器渲染展示。到AJAX流行的时
候,很多信息为AJAX异步请求,比如:点击、翻页等。通常这种情况你一刷新浏览器,当前页面就会重置到初始状态。更不
用说把看到的信息url发给好友了。
传统的状态保存在地址栏,如: www.abc.com/search?s=abc&id=23&page=3
如果通过这种方式的话,浏览器会刷新页面,如果使用锚点的话则不会刷新浏览器。具体是点击页面去请求数据的同时会改变
地址栏“#”后面的值。我们翻页到第四页
如: abc.com/search#s=abc&id=23&page=4
这样还远远不够,如果用户点击“前进”“后退”,页面内容不会随之改变。之前参照网上别人的做法,用一个定时器来解决的。
/**
* URL Watcher(require jQuery)
* 监测url的变化
* useage:
* UrlWatcher.init(50);
* UrlWatcher.AddListener(function(url,isFirstLoad){
* FrontEngine.generateFront();
* });
*
*/
var UrlWatcher = {
"init": function (waittime) {
this.UrlArray = [window.location.href];//set current url as default
this.ListenerArray = [];
this.ResetWaitTime(waittime);
},
"AddListener": function (listener) {//add a process function
this.ListenerArray.push(listener || function () {});
},
"DeleteListener": function () {
this.ListenerArray = [];
},
"ResetWaitTime": function (time) {//start timer
if (this.IntervalHandle) {window.clearInterval(this.IntervalHandle); }
this.WaitTime = time || 1000;
this.IntervalHandle = window.setInterval(this.ListenerCall.setThis(this), this.WaitTime);
},
"ListenerCall": function () {
var self = this, url = window.location.href;
if (self.UrlArray[self.UrlArray.length - 1] === url) {return; }
window.clearInterval(this.IntervalHandle);
$.each(this.ListenerArray, function (c, listener) {
listener(url, self.UrlArray.length === 0);
});
this.UrlArray.push(url);
this.ResetWaitTime(this.WaitTime);
}
};
Gmail 中也用了状态保持的东西,但是url是不会改变的。目前也有专门的Framework实现这种功能,比如 RSH 、 History
Framework 。
之前我通过这种定时器的方法,解决了一些问题。但是,通过这种定时的方法不是实时触发的,总会有一个延时,因为是定时
去不停的检测url中hash的变化。
说到hash,hash的变化在新的浏览器中是支持监测的。就是haschange 这个事件,在html5中有定义。目前,各浏览器对
haschange的支持情况如下:
Gecko 1.9.2 (Firefox 3.6/Thunderbird 3.1/Fennec 1.0)
IE 8
WebKit 528+ (Safari/Google Chrome)
Opera 10.70
只要浏览器版本比以前大的,都是支持的。此外,ie8以ie7模式运行时,window下存在onhashchange这个方法,但是不会触
发这个事件。可以通过 检测IE的document.documentMode 这种方法来检测。
资源评论
weixin_38652196
- 粉丝: 1
- 资源: 939
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功