一、頁面中的返回按鈕事件
window.history可以不加window這個前綴
他的方法有:
window.history.go(-1); //-n表示后退n頁,n表示前進n頁,或者是一個url window.history.back(); //同樣表示后退一頁 window.history.forward(); //表示前進
如果頁面是從一個微信上的鏈接跳過去的,或者直接在瀏覽器輸入地址進去的,此時回不到上一頁,我們可以用 document.referrer 來判斷有沒有上一頁,如果沒有可以強制他進入某一個頁面
if (document.referrer === '') { // 沒有來源頁面信息的時候,改成首頁URL地址 $('.jsBack').attr('href', '/'); }
二、鏈接跳轉歷史URL不記錄
從a頁面進入到test3此頁面,test3頁面跳到test4頁面,test4頁面跳到test3頁面,test4、test3頁面循環,此時使用history.back()就會循環返回test4,test3,
如果有一個需求是我點擊返回直接返回到a頁面,不進行循環,這時我們可以使用頁面鏈接跳轉歷史URL不記錄,test3跳到test4,test4跳到test3這個跳轉歷史不記錄,於是使用history.back()或者點擊返回就能直接返回a頁面
方法如下:
//頁面鏈接跳轉歷史URL不記錄 var fnUrlReplace = function (eleLink) { if (!eleLink) { return; } var href = eleLink.href; if (href && /^#|javasc/.test(href) === false) { if (history.replaceState) { history.replaceState(null, document.title, href.split('#')[0] + '#'); location.replace(''); } else { location.replace(href); //最終結果是用了這個進行跳轉 } } }; //這個鏈接就是不需要進行記錄跳轉的鏈接 document.getElementsByTagName('a')[0].onclick = function (event) { if (event && event.preventDefault) { event.preventDefault(); } fnUrlReplace(this); return false; };
上面的代碼中,a連接的跳轉使用了 location.replace(href);
該方法是將地址替換成新url,該方法通過指定URL替換當前緩存在歷史里(客戶端)的項目,
因此當使用replace方法之后,你不能通過“前進”和“后 退”來訪問已經被替換的URL,這個特點對於做一些過渡頁面非常有用!