如何可靠地检测浏览器后退按钮点击并强制执行页内导航？

检测浏览器后退按钮点击并强制执行页内导航的跨浏览器技术

检测浏览器后退按钮点击并强制使用使用井号标签 (#) 系统的页内导航系统可以是

浏览器后退按钮检测

单独使用 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中文网其他相关文章！