一、頁(yè)面中的返回按鈕事件

window.history可以不加window這個(gè)前綴

他的方法有：

window.history.go(-1);   //-n表示后退n頁(yè)，n表示前進(jìn)n頁(yè)，或者是一個(gè)url

window.history.back();  //同樣表示后退一頁(yè)

window.history.forward();  //表示前進(jìn)

如果頁(yè)面是從一個(gè)微信上的鏈接跳過(guò)去的，或者直接在瀏覽器輸入地址進(jìn)去的，此時(shí)回不到上一頁(yè)，我們可以用 document.referrer 來(lái)判斷有沒(méi)有上一頁(yè)，如果沒(méi)有可以強(qiáng)制他進(jìn)入某一個(gè)頁(yè)面

if (document.referrer === '') {
    // 沒(méi)有來(lái)源頁(yè)面信息的時(shí)候，改成首頁(yè)URL地址
    $('.jsBack').attr('href', '/');
    }

二、鏈接跳轉(zhuǎn)歷史URL不記錄

從a頁(yè)面進(jìn)入到test3此頁(yè)面，test3頁(yè)面跳到test4頁(yè)面，test4頁(yè)面跳到test3頁(yè)面，test4、test3頁(yè)面循環(huán)，此時(shí)使用history.back()就會(huì)循環(huán)返回test4,test3，

如果有一個(gè)需求是我點(diǎn)擊返回直接返回到a頁(yè)面，不進(jìn)行循環(huán)，這時(shí)我們可以使用頁(yè)面鏈接跳轉(zhuǎn)歷史URL不記錄，test3跳到test4,test4跳到test3這個(gè)跳轉(zhuǎn)歷史不記錄，于是使用history.back()或者點(diǎn)擊返回就能直接返回a頁(yè)面

方法如下：

//頁(yè)面鏈接跳轉(zhuǎn)歷史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);  //最終結(jié)果是用了這個(gè)進(jìn)行跳轉(zhuǎn)
            }
        }
    };

    //這個(gè)鏈接就是不需要進(jìn)行記錄跳轉(zhuǎn)的鏈接
    document.getElementsByTagName('a')[0].onclick = function (event) {
        if (event && event.preventDefault) {
            event.preventDefault();
        }
        fnUrlReplace(this);
        return false;
    };

上面的代碼中，a連接的跳轉(zhuǎn)使用了 location.replace(href);

該方法是將地址替換成新url，該方法通過(guò)指定URL替換當(dāng)前緩存在歷史里（客戶(hù)端）的項(xiàng)目，

因此當(dāng)使用replace方法之后，你不能通過(guò)“前進(jìn)”和“后 退”來(lái)訪(fǎng)問(wèn)已經(jīng)被替換的URL，這個(gè)特點(diǎn)對(duì)于做一些過(guò)渡頁(yè)面非常有用！

總結(jié)

以上是生活随笔為你收集整理的window.history，页面中的返回按钮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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