如何可靠地偵測瀏覽器後退按鈕點擊並強制執行頁內導覽？

偵測瀏覽器後退按鈕點擊並強制執行頁內導覽的跨瀏覽器技術

偵測瀏覽器後退按鈕點擊並強制使用使用井號標籤(#)系統的頁內導覽系統可以是

瀏覽器後退按鈕偵測

單獨使用window.onhashchange 的傳統方法並不可靠，因為它也會在頁內元素更改哈希時觸發。為了解決這個問題，採用了利用 document.onmouseover、document.onmouseleave 和布林標誌 (window.innerDocClick) 的新技術。當使用者滑鼠進入文件區域時，window.innerDocClick 設定為 true，當滑鼠離開時，設定為 false。這允許使用以下window.onhashchange 處理程序：

window.onhashchange = function() {
    if (window.innerDocClick) {
        window.innerDocClick = false;
    } else {
        if (window.location.hash != '#undefined') {
            goBack();
        } else {
            history.pushState("", document.title, window.location.pathname);
            location.reload();
        }
    }
}

頁內後退按鈕強制

僅透過頁內後退按鈕控制後退導航，歷史數組(window .location.lasthash) 用於在使用者瀏覽介面時儲存先前的雜湊值。頁內後退按鈕功能 (goBack) 使用此陣列導覽至上一頁。

function goBack() {
    window.location.hash = window.location.lasthash[window.location.lasthash.length-1];
    window.location.lasthash.pop();
}

抑制退格鍵

以防止使用者使用退格鍵觸發後退按鈕，可以加入以下程式碼片段：

$(function(){
    /*
     * this swallows backspace keys on any non-input element.
     * stops backspace -> back
     */
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});

以上是如何可靠地偵測瀏覽器後退按鈕點擊並強制執行頁內導覽？的詳細內容。更多資訊請關注PHP中文網其他相關文章！