ajax模拟浏览器请,ajax实现浏览器前进后退-location.hash与模拟iframe

「爱情、让人受尽委屈。」 2022-09-03 15:21 177阅读 0赞

Aajx实现无数据刷新时，我们会遇到浏览器前进后退失效的问题以及URL不友好的问题。

实现方式有两种

1、支持onhashchange事件的，通过更新和读取location.hash的方式来实现

2、通过内嵌一个iframe来模拟实现页面的前进后退，通过iframe的onload事件来实现

具体代码如下，里面内嵌到的各个页面，自己建立同名文件即可。

.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;

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;

(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"

(http.status == 200) \{

// 200 =

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");

(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\#tab=tab' + idx;

window.location.hash = hash;

\},

getHash : function() \{

var hash =

window.location.hash;

return

hash;

\},

setSelectedTab : function(tabname) \{

(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();

# Ajax浏览器前进后退 #

####  ####

本例通过隐藏location hash来实现前进后退，更改location.hash,

然后通过onhashchange事件来监听hash变化，通过hash值来还原页面，不支持onhashchange事件的浏览器如ie6还是需要通过iframe模拟来实现。

href="location2.html">查看iframe版本

class="selected">tab1

href="data2.txt"

tabname="tab2">tab2

tabname="tab3"

href="data3.txt">tab3

**Loading**

Ajax接收显示的内容:

ajax模拟浏览器请,ajax实现浏览器前进后退-location.hash与模拟iframe

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 vue如何控制浏览器前进后退操作

相关栈实现浏览器的前进和后退功能

相关 ajax模拟浏览器请,ajax实现浏览器前进后退-location.hash与模拟iframe

相关 ajax技术如何解决浏览器前进后退按键失效的问题

相关 JS-单页面模拟【前进】【后退】

相关 Jquery禁止浏览器的前进后退

相关 JS-禁用浏览器前进后退

相关 Day4 栈：浏览器的前进和后退

相关 Selenium 模拟浏览器

相关 Mechanize模拟浏览器