當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時間：2025/3/8 HTML 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 ajax实现浏览器前进后退-location.hash与模拟iframe 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??

Aajx實現(xiàn)無數(shù)據(jù)刷新時，我們會遇到瀏覽器前進后退失效的問題以及URL不友好的問題。

實現(xiàn)方式有兩種

1、支持onhashchange事件的，通過更新和讀取location.hash的方式來實現(xiàn)

? 因為Javascript對dom的操作是不持久化的，刷新后就恢復原狀，而且也不保存歷史記錄，也就無法前進后退來查看歷史了。但是可以采用“地址欄加hash”技術(shù)來解決。
?????? 地址欄中敲入“頁面地址#aaa”就表示跳轉(zhuǎn)到“頁面地址 ”的“aaa”這個頁內(nèi)錨點（英文叫做hash）。只要改變“aaa”這個錨點內(nèi)容，瀏覽器就認為URL變化，也就會放入瀏覽歷史，這樣前進后退問題就解決了。我們只要把不同的AJAX狀態(tài)通過不同的hash寫到地址欄就可以了，當頁面加載的時候檢測是否有hash值，有的話就讀取hash進行相應的ajax還原操作。
?????? location.hash可以取到或者設置hash的值，當hash改變的時候window.onhashchange事件會被觸發(fā)，但是頁面加載的時候哪怕有hash值，onhashchange事件也不會觸發(fā)，因此需要在onload事件中也讀取hash進行同樣的處理，保證刷新頁面也能恢復ajax的頁面顯示。
????? 下面是例子代碼，為了簡單的突出問題，這里沒有使用ajax，只是通過dom來修改頁面狀態(tài)。點擊文本框，文本框的內(nèi)容會加1（注意觀察地址欄），刷新頁面后值也還是增加后的值，而且頁面可以前進后退。
代碼如下：
[html]
<!DOCTYPE html>?
<html xmlns="http://www.w3.org/1999/xhtml">?
<head>?
??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>?
??? <title>TestDemo</title>?
??? <script src="jquery-1.4.2-min.js"></script>?
??? <script type="text/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 type="text" id="txt1" value="1" />?
</body>?
</html>

2、通過內(nèi)嵌一個iframe來模擬實現(xiàn)頁面的前進后退，通過iframe的onload事件來實現(xiàn)

我可應很負責任的告訴你:ajax加載頁面是無法實現(xiàn)瀏覽器前進和后退功能的，因為你是直接通過jq 將當前頁面的內(nèi)容全給替換掉了，而頁面并沒有跳轉(zhuǎn)。不過不是所有事都是絕對的。告訴你一個比較笨但是有比較實用的方法。就是通過iframe輕松解決問題。首先，你的頁面需要一個隱藏的iframe，且iframe的src對應的是一個任意的html，jsp都行。當你ajax加載頁面之前，用jq將當前的頁面內(nèi)容給加載到iframe中去，這個時候，你的iframe中的html元素，就是你當前頁面的html元素沒錯把?這時候再加載你需要ajax加載的頁面。注意，加載頁面的時候千萬不要把這個iframe給覆蓋掉了。。。再寫一個鍵盤后退按鍵的js監(jiān)控方法，當按下backspace的時候，將iframe的頁面元素加載出來覆蓋當前頁面，在覆蓋之前記得要把現(xiàn)在的頁面元素覆蓋到iframe中，因為你還有一個前進的操作前進的操作也是大同小異，說白了就是父頁面元素與iframe中的頁面元素進行對換的操作

具體代碼如下，里面內(nèi)嵌到的各個頁面，自己建立同名文件即可。

<!DOCTYPE html>

<html>

<head>

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

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，以便瀏覽器監(jiān)聽

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

??????????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>

<h1>Ajax瀏覽器前進后退</h1>

<h4>

本例通過隱藏location hash來實現(xiàn)前進后退，更改location.hash, 然后通過onhashchange事件來監(jiān)聽hash變化，通過hash值來還原頁面，不支持onhashchange事件的瀏覽器如ie6還是需要通過iframe模擬來實現(xiàn)。<a href="location2.html">查看iframe版本</a></h4>

</div>

<strong>Loading Ajax接收顯示的內(nèi)容:</strong>

</pre>

</div>

</body>

</html>

轉(zhuǎn)載于:https://my.oschina.net/sheila/blog/384787

總結(jié)

以上是生活随笔為你收集整理的ajax实现浏览器前进后退-location.hash与模拟iframe的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： centos不能挂在ntfs
下一篇： 2017年html5行业报告,云适配发布