window.history,頁面中的返回按鈕


一、頁面中的返回按鈕事件

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,這個特點對於做一些過渡頁面非常有用!



 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM