中文logo设计网站,网站设计ppt案例,网站怎么快速被百度收录,柚段子wordpress文章为什么80%的码农都做不了架构师#xff1f; Aajx实现无数据刷新时#xff0c;我们会遇到浏览器前进后退失效的问题以及URL不友好的问题。 实现方式有两种 1、支持onhashchange事件的#xff0c;通过更新和读取location.hash的方式来实现 /* 因为Javascript对… 为什么80%的码农都做不了架构师 Aajx实现无数据刷新时我们会遇到浏览器前进后退失效的问题以及URL不友好的问题。 实现方式有两种 1、支持onhashchange事件的通过更新和读取location.hash的方式来实现 /* 因为Javascript对dom的操作是不持久化的刷新后就恢复原状而且也不保存历史记录也就无法前进后退来查看历史了。但是可以采用“地址栏加hash”技术来解决。 地址栏中敲入“页面地址#aaa”就表示跳转到“页面地址 ”的“aaa”这个页内锚点英文叫做hash。只要改变“aaa”这个锚点内容浏览器就认为URL变化也就会放入浏览历史这样前进后退问题就解决了。我们只要把不同的AJAX状态通过不同的hash写到地址栏就可以了当页面加载的时候检测是否有hash值有的话就读取hash进行相应的ajax还原操作。 location.hash可以取到或者设置hash的值当hash改变的时候window.onhashchange事件会被触发但是页面加载的时候哪怕有hash值onhashchange事件也不会触发因此需要在onload事件中也读取hash进行同样的处理保证刷新页面也能恢复ajax的页面显示。 下面是例子代码为了简单的突出问题这里没有使用ajax只是通过dom来修改页面状态。点击文本框文本框的内容会加1注意观察地址栏刷新页面后值也还是增加后的值而且页面可以前进后退。代码如下[html]!DOCTYPE html html xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetutf-8/ titleTestDemo/title script srcjquery-1.4.2-min.js/script script typetext/javascript var processHash function () { var hashStr location.hash.replace(#, ); if (hashStr) $(#txt1).val(hashStr); } $(function () { $(#txt1).click(function () { var i parseInt($(#txt1).val()); i; $(#txt1).text(i); location.hash # i; }); window.onload processHash; window.onhashchange processHash; }); /script /head body input typetext idtxt1 value1 / /body /html */ 2、通过内嵌一个iframe来模拟实现页面的前进后退通过iframe的onload事件来实现 /* 我可应很负责任的告诉你:ajax加载页面是无法实现浏览器前进和后退功能的 因为你是直接通过jq 将当前页面的内容全给替换掉了而页面并没有跳转。 不过不是所有事都是绝对的。告诉你一个比较笨但是有比较实用的方法。 就是通过iframe轻松解决问题。 首先你的页面需要一个隐藏的iframe且iframe的src对应的是一个任意的htmljsp都行。 当你ajax加载页面之前用jq将当前的页面内容给加载到iframe中去这个时候你的iframe中的html元素就是你当前页面的html元素没错把?这时候再加载你需要ajax加载的页面。注意加载页面的时候千万不要把这个iframe给覆盖掉了。。。 再写一个键盘后退按键的js监控方法当按下backspace的时候将iframe的页面元素加载出来覆盖当前页面在覆盖之前记得要把现在的页面元素覆盖到iframe中因为你还有一个前进的操作 前进的操作也是大同小异说白了就是父页面元素与iframe中的页面元素进行对换的操作 */ 具体代码如下里面内嵌到的各个页面自己建立同名文件即可。 !DOCTYPE html html head title/title meta charsetutf-8 style typetext/css .tab { display: inline; } .tab a { color: #fff; background: #333; padding: 5px 10px; border-left: 1px solid #fff; } .tab .selected { color: red; background: #cecece; } .content { background: #cecece; width: 50%; margin-top: 5px; padding: 10px; } pre { border: 1px inset gray; height: 20em; } /style /head body script typetext/javascript function Ajax (params) { if (params) { this.XMLHttp params.XMLHttp; this.method params.method; } this.onsuccess null; this.responseType text; } Ajax.prototype { getXMLHttp : function () { if (!this.XMLHttp) { if (window.XMLHttpRequest) { // code for IE7, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } else {// code for IE6, IE5 return new ActiveXObject(Microsoft.XMLHTTP); } } return this.XMLHttp; }, request : function (url, data) { var self this; try { var http this.getXMLHttp(); //make a connection to the server ... specifying that you intend to make a GET request //to the server. Specifiy the page name and the URL parameters to send var param ; for (var item in data) { param (item data[item] ); } url ( (url.indexOf(?) ! -1) ? : ? ) param; var urlLen url.length; if (url.substr(urlLen - 1, urlLen) ) { url url.substr(0, urlLen - 1); } http.open(this.method, url); //assign a handler for the response http.onreadystatechange function() { self.response(http); } //actually send the request to the server http.send(null); } catch (e) { alert(e.message); } }, get : function (url, data, type, onsuccess) { this.method GET; this.responseType type || this.responseType; this.onsuccess onsuccess; this.request(url, data); }, post : function (url, data, type, onsuccess) { this.method POST; this.responseType type || this.responseType; this.onsuccess onsuccess; this.request(url, data); }, response : function(http) { if (http.readyState 4) { // 4 loaded if (http.status 200) { // 200 OK this.onloadDone(http); } else { this.onerror(加载失败); } } }, onloadDone : function(http) { // var data http.responseText || http.responseXML; var data this.responseType.toLowerCase() xml ? http.responseXML : http.responseText; this.onsuccess.call(this, data); }, onerror : function (message) { alert(Problem retrieving XML data); if (this.onerror) { this.onerror.call(this, message); } } } var Com { isIE6 : (/MSIE 6/.test(navigator.appVersion)), hasHashchange : function() { if (onhashchange in window) { return true; } return false; } }; function PageLoad () { this.iframeObj null; this.iframeWin null; this.iframeSrc this.iframeSrc || history.html; this.location this.location || window.location; this.tab null; this.output null; this.tabs null; } PageLoad.prototype { create : function() { if (Com.hasHashchange) { return; } if (!this.iframeObj) { var ifr document.createElement_x(iframe); ifr.name hashIframe; ifr.id HashIframe; ifr.style.display block; document.body.appendChild(ifr); } }, bindTabEvent : function() { var self this; try { var tabs this.tabs; for (var i 0, l tabs.length; i l; i) { tabs[i].onclick function(evt) { var ele (event.srcElement || event.target || evt.srcElement); var tg self.toogleTab(ele); return false; } } } catch (e) { alert(e); } }, bindHashEvent : function() { // bind onhashchange event var self this; onhashchange function() { self.pageLoadDone(); } }, bindIframeEvent : function() { var self this; var ifr self.iframeObj; var ifrWind self.iframeWin; if (ifr.attachEvent) { ifr.attachEvent(onload, function() { self.iframeLoadDone(); }); } else { ifr.onload function() { // self.iframeLoadDone.call(this, self); self.iframeLoadDone(); }; } }, loadDefaultPage : function() { var tabname tab1; if (Com.hasHashchange) { if (this.getHash() ) { // 如果页面hash值为空则更改hash为初始化的值 this.setHash(tabname); } else { // 如果是带hash访问则直接通过hash值回溯页面 var tab this.getHash().split(#)[1]; this.loadDone(tab); } } else { // 如果是不支持onhashchange的浏览器如ie6等采用iframe this.iframeObj.src this.iframeSrc ?tab tabname; } }, init : function() { if (!this.iframeObj) { this.create(); } this.iframeObj document.getElementByIdx_x(HashIframe); this.iframeWin window.frames[hashIframe]; this.tab document.getElementByIdx_x(tab); this.output document.getElementByIdx_x(output); this.tabs this.tab.getElementsByTagName_r(a); this.bindTabEvent(); if (Com.hasHashchange) { this.bindHashEvent(); } else { this.bindIframeEvent(); } this.loadDefaultPage(); }, loadDone : function(tab) { if (string ! typeof tab) { return; } try { var idx tab.substr(3) - 1; var tabs this.tabs; var _callBack function(data) { output.innerHTML data; } this.getContent(tabs[idx], _callBack); this.toggle(tabs[idx]); } catch (e) { alert(e.message); } }, pageLoadDone : function() { var hash this.getHash(); tab hash.split(#)[1]; this.loadDone(tab); }, iframeLoadDone : function() { var hash this.iframeWin.location.search; var tab hash.split()[1]; this.loadDone(tab); }, toggle : function(ele) { var tabs this.tabs; var idx 0; for (var i 0, l tabs.length; i l; i) { if (ele ! tabs[i]) { tabs[i].className ; } else { tabs[i].className selected; } } }, toogleTab : function (ele) { // 更改hash以便浏览器监听 if ( !(ele.nodeType 1) ) { return false; } var tabname ele.getAttribute(tabname); this.setSelectedTab(tabname); this.toggle(ele); return false; }, setHash : function(hash) { //window.location location.html#tabtab idx; // window.location.hash hash; window.location.hash hash; }, getHash : function() { var hash window.location.hash; return hash; }, setSelectedTab : function(tabname) { if (Com.hasHashchange) { this.setHash(tabname); } else { this.iframeObj.src this.iframeSrc ?tab tabname; } }, getContentByTarget : function(evt, callBackFun) { this.getContent(evt.srcElement); }, getContent : function(ele, callBackFun) { var ajax new Ajax(); var output this.output; var _callBack function(data) { if (typeof callBackFun function) { callBackFun(data); } else { // output.innerHTML data; } }; output.innerHTML loading...; var url ele.href ?t Math.random() * 100; var data { item : ele.href, href : ele.href }; ajax.get(url, data, json , _callBack ); } } window.onload function() { new PageLoad().init(); } /script br h1Ajax浏览器前进后退/h1 h4 本例通过隐藏location hash来实现前进后退更改location.hash, 然后通过onhashchange事件来监听hash变化通过hash值来还原页面不支持onhashchange事件的浏览器如ie6还是需要通过iframe模拟来实现。a hreflocation2.html查看iframe版本/a/h4 div classtab idtab a hrefdata1.txt tabnametab1 classselectedtab1/aa hrefdata2.txt tabnametab2tab2/aa tabnametab3 hrefdata3.txttab3/a /div div classcontent pre idoutput strongLoading Ajax接收显示的内容:/strong /pre /div /body /html 转载于:https://my.oschina.net/sheila/blog/384787
