Cách phát hiện sự kiện Nút quay lại trình duyệt - Trình duyệt chéo

Làm thế nào để bạn phát hiện dứt khoát liệu người dùng có nhấn nút quay lại trong trình duyệt hay không?

Làm thế nào để bạn thực thi việc sử dụng nút quay lại trong trang bên trong một ứng dụng web duy nhất bằng một #URLhệ thống?

Tại sao trên trái đất không có nút quay lại trình duyệt kích hoạt sự kiện của chính họ!?

(Lưu ý: Theo phản hồi của Sharky, tôi đã bao gồm mã để phát hiện các khoảng trống)

Vì vậy, tôi đã thấy những câu hỏi này thường xuyên trên SO và gần đây đã gặp phải vấn đề kiểm soát chức năng nút quay lại. Sau vài ngày tìm kiếm giải pháp tốt nhất cho ứng dụng của tôi (Trang đơn với Điều hướng Hash), tôi đã tìm ra một hệ thống đơn giản, không có trình duyệt, không có thư viện để phát hiện nút quay lại.

Hầu hết mọi người khuyên bạn nên sử dụng:

window.onhashchange = function() {
 //blah blah blah
}

Tuy nhiên, chức năng này cũng sẽ được gọi khi người dùng sử dụng phần tử trong trang thay đổi vị trí băm. Không phải trải nghiệm người dùng tốt nhất khi người dùng của bạn nhấp và trang quay ngược hoặc xuôi.

Để cung cấp cho bạn một phác thảo chung về hệ thống của tôi, tôi đang lấp đầy một mảng với các giá trị băm trước đó khi người dùng của tôi di chuyển qua giao diện. Nó trông giống như thế này:

function updateHistory(curr) {
    window.location.lasthash.push(window.location.hash);
    window.location.hash = curr;
}

Khá thẳng về phía trước. Tôi làm điều này để đảm bảo hỗ trợ nhiều trình duyệt, cũng như hỗ trợ cho các trình duyệt cũ hơn. Chỉ cần chuyển hàm băm mới cho hàm và nó sẽ lưu nó cho bạn và sau đó thay đổi hàm băm (sau đó được đưa vào lịch sử của trình duyệt).

Tôi cũng sử dụng nút quay lại trong trang để di chuyển người dùng giữa các trang bằng cách sử dụng lasthashmảng. Nó trông như thế này:

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

Vì vậy, điều này sẽ di chuyển người dùng trở lại băm cuối cùng và loại bỏ băm cuối cùng đó khỏi mảng (tôi không có nút chuyển tiếp ngay bây giờ).

Vì thế. Làm cách nào để phát hiện xem người dùng đã sử dụng nút quay lại trong trang của tôi hay nút trình duyệt?

Lúc đầu tôi nhìn window.onbeforeunload, nhưng vô ích - điều đó chỉ được gọi nếu người dùng sẽ thay đổi trang. Điều này không xảy ra trong một ứng dụng một trang sử dụng điều hướng băm.

Vì vậy, sau khi đào thêm, tôi thấy các khuyến nghị cho việc cố gắng đặt biến cờ. Vấn đề với trường hợp này là tôi sẽ cố gắng đặt nó, nhưng vì mọi thứ không đồng bộ, nên nó sẽ không luôn được đặt đúng lúc cho câu lệnh if trong thay đổi băm. .onMouseDownkhông phải lúc nào cũng được gọi trong nhấp chuột và thêm nó vào một onclick sẽ không bao giờ kích hoạt nó đủ nhanh.

Đây là khi tôi bắt đầu xem xét sự khác biệt giữa document, và window. Giải pháp cuối cùng của tôi là đặt cờ bằng cách sử dụng document.onmouseovervà vô hiệu hóa nó bằng cách sử dụng document.onmouseleave.

Điều xảy ra là trong khi chuột của người dùng ở trong vùng tài liệu (đọc: trang được hiển thị, nhưng không bao gồm khung trình duyệt), boolean của tôi được đặt thành true. Ngay khi con chuột rời khỏi khu vực tài liệu, boolean lật tới false.

Bằng cách này, tôi có thể thay đổi window.onhashchangethành:

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();
        }
    }
}

Bạn sẽ lưu ý kiểm tra cho #undefined. Điều này là bởi vì nếu không có lịch sử có sẵn trong mảng của tôi, nó sẽ trả về undefined. Tôi sử dụng điều này để hỏi người dùng nếu họ muốn rời khỏi bằng cách sử dụng một window.onbeforeunloadsự kiện.

Vì vậy, trong ngắn hạn và cho những người không nhất thiết phải sử dụng nút quay lại trong trang hoặc một mảng để lưu trữ lịch sử:

document.onmouseover = function() {
    //User's mouse is inside the page.
    window.innerDocClick = true;
}

document.onmouseleave = function() {
    //User's mouse has left the page.
    window.innerDocClick = false;
}

window.onhashchange = function() {
    if (window.innerDocClick) {
        //Your own in-page mechanism triggered the hash change
    } else {
        //Browser back button was clicked
    }
}

Và bạn có nó rồi đấy! một cách đơn giản, gồm ba phần để phát hiện việc sử dụng nút quay lại so với các yếu tố trong trang liên quan đến điều hướng băm.

BIÊN TẬP:

Để đảm bảo rằng người dùng không sử dụng backspace để kích hoạt sự kiện trở lại, bạn cũng có thể bao gồm các phần sau (Cảm ơn @thetoolman về Câu hỏi này ):

$(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();
            }
        }
    });
});

Bạn có thể thử popstatexử lý sự kiện, ví dụ:

window.addEventListener('popstate', function(event) {
    // The popstate event is fired each time when the current history entry changes.

    var r = confirm("You pressed a Back button! Are you sure?!");

    if (r == true) {
        // Call Back button programmatically as per user confirmation.
        history.back();
        // Uncomment below line to redirect to the previous page instead.
        // window.location = document.referrer // Note: IE11 is not supporting this.
    } else {
        // Stay on the current page.
        history.pushState(null, null, window.location.pathname);
    }

    history.pushState(null, null, window.location.pathname);

}, false);

^{Lưu ý: Để có kết quả tốt nhất, bạn chỉ nên tải mã này trên các trang cụ thể nơi bạn muốn triển khai logic để tránh mọi sự cố không mong muốn khác.}

Sự kiện popstate được kích hoạt mỗi lần khi mục lịch sử hiện tại thay đổi (người dùng điều hướng đến trạng thái mới). Điều đó xảy ra khi người dùng nhấp vào Back / Forward nút của trình duyệt hoặc khi history.back(), history.forward(), history.go()phương pháp được gọi là programatically.

Tài event.statesản là sự kiện bằng với đối tượng trạng thái lịch sử.

Đối với cú pháp jQuery, hãy bọc nó xung quanh (để thêm cả trình nghe sau khi tài liệu đã sẵn sàng):

(function($) {
  // Above code here.
})(jQuery);

Xem thêm: window.onpopstate khi tải trang

Xem thêm các ví dụ trên Ứng dụng một trang và trang HTML5 PushState :

<script>
// jQuery
$(window).on('popstate', function (e) {
    var state = e.originalEvent.state;
    if (state !== null) {
        //load content with ajax
    }
});

// Vanilla javascript
window.addEventListener('popstate', function (e) {
    var state = e.state;
    if (state !== null) {
        //load content with ajax
    }
});
</script>

Điều này phải tương thích với Chrome 5+, Firefox 4+, IE 10+, Safari 6+, Opera 11.5+ và tương tự.

Tôi đã phải vật lộn với yêu cầu này trong một thời gian và đã thực hiện một số giải pháp ở trên để thực hiện nó. Tuy nhiên, tôi tình cờ thấy một quan sát và nó dường như hoạt động trên các trình duyệt Chrome, Firefox và Safari + Android và iPhone

Khi tải trang:

window.history.pushState({page: 1}, "", "");

window.onpopstate = function(event) {

  // "event" object seems to contain value only when the back button is clicked
  // and if the pop state event fires due to clicks on a button
  // or a link it comes up as "undefined" 

  if(event){
    // Code to handle back button or prevent from navigation
  }
  else{
    // Continue user action through link or button
  }
}

Hãy cho tôi biết nếu điều này sẽ giúp. Nếu thiếu một cái gì đó, tôi sẽ rất vui để hiểu.

Trong javascript, loại điều hướng 2có nghĩa là nút quay lại hoặc chuyển tiếp của trình duyệt được nhấp và trình duyệt thực sự lấy nội dung từ bộ đệm.

if(performance.navigation.type == 2)
{
    //Do your code here
}

Điều này chắc chắn sẽ hoạt động (Để phát hiện nhấp vào nút quay lại)

$(window).on('popstate', function(event) {
 alert("pop");
});

Xem cái này:

history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

nó hoạt động tốt...

if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
  alert('hello world');
}

Đây là giải pháp duy nhất phù hợp với tôi (đây không phải là trang web onepage). Nó hoạt động với Chrome, Firefox và Safari.

Câu trả lời đúng đã có sẵn để trả lời câu hỏi. Tôi muốn đề cập đến PerformanceNavulationTiming API JavaScript mới , nó thay thế hiệu suất không được chấp nhận .

Mã sau sẽ đăng nhập vào bảng điều khiển "back_forward" nếu người dùng hạ cánh trên trang của bạn bằng nút quay lại hoặc chuyển tiếp. Hãy xem bảng tương thích trước khi sử dụng nó trong dự án của bạn.

var perfEntries = performance.getEntriesByType("navigation");
for (var i = 0; i < perfEntries.length; i++) {
    console.log(perfEntries[i].type);
}

Trình duyệt: https://jsfiddle.net/Limitlessisa/axt1Lqoz/

Đối với điều khiển di động: https://jsfiddle.net/Limitlessisa/axt1Lqoz/show/

$(document).ready(function() {
  $('body').on('click touch', '#share', function(e) {
    $('.share').fadeIn();
  });
});

// geri butonunu yakalama
window.onhashchange = function(e) {
  var oldURL = e.oldURL.split('#')[1];
  var newURL = e.newURL.split('#')[1];

  if (oldURL == 'share') {
    $('.share').fadeOut();
    e.preventDefault();
    return false;
  }
  //console.log('old:'+oldURL+' new:'+newURL);
}

.share{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); color:white; padding:20px;

<!DOCTYPE html>
<html>

<head>
    <title>Back Button Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>

<body style="text-align:center; padding:0;">
    <a href="#share" id="share">Share</a>
    <div class="share" style="">
        <h1>Test Page</h1>
        <p> Back button press please for control.</p>
    </div>
</body>

</html>

Đây là của tôi tại nó. Giả định là, khi URL thay đổi nhưng không có nhấp chuột nào documentđược phát hiện, đó là trình duyệt quay lại (có hoặc chuyển tiếp). Một lần nhấp của người dùng được đặt lại sau 2 giây để thực hiện công việc này trên các trang tải nội dung qua Ajax:

(function(window, $) {
  var anyClick, consoleLog, debug, delay;
  delay = function(sec, func) {
    return setTimeout(func, sec * 1000);
  };
  debug = true;
  anyClick = false;
  consoleLog = function(type, message) {
    if (debug) {
      return console[type](message);
    }
  };
  $(window.document).click(function() {
    anyClick = true;
    consoleLog("info", "clicked");
    return delay(2, function() {
      consoleLog("info", "reset click state");
      return anyClick = false;
    });
  });
  return window.addEventListener("popstate", function(e) {
    if (anyClick !== true) {
      consoleLog("info", "Back clicked");
      return window.dataLayer.push({
        event: 'analyticsEvent',
        eventCategory: 'test',
        eventAction: 'test'
      });
    }
  });
})(window, jQuery);

Tôi đã có thể sử dụng một số câu trả lời trong chuỗi này và các câu trả lời khác để làm cho nó hoạt động trong IE và Chrome / Edge. history.pushState đối với tôi không được hỗ trợ trong IE11.

if (history.pushState) {
    //Chrome and modern browsers
    history.pushState(null, document.title, location.href);
    window.addEventListener('popstate', function (event) {
        history.pushState(null, document.title, location.href);
    });
}
else {
    //IE
    history.forward();
}

Một thành phần chính thức chỉ có thể được triển khai nếu bạn xác định lại API (thay đổi các phương thức của 'lịch sử' của đối tượng) Tôi sẽ chia sẻ lớp vừa viết. Đã thử nghiệm trên Chrome và Mozilla Chỉ hỗ trợ HTML5 và ECMAScript5-6

class HistoryNavigation {
    static init()
    {
        if(HistoryNavigation.is_init===true){
            return;
        }
        HistoryNavigation.is_init=true;

        let history_stack=[];
        let n=0;
        let  current_state={timestamp:Date.now()+n};
        n++;
        let init_HNState;
        if(history.state!==null){
            current_state=history.state.HNState;
            history_stack=history.state.HNState.history_stack;
            init_HNState=history.state.HNState;
        } else {
            init_HNState={timestamp:current_state.timestamp,history_stack};
        }
        let listenerPushState=function(params){
            params=Object.assign({state:null},params);
            params.state=params.state!==null?Object.assign({},params.state):{};
            let h_state={ timestamp:Date.now()+n};
            n++;
            let key = history_stack.indexOf(current_state.timestamp);
            key=key+1;
            history_stack.splice(key);
            history_stack.push(h_state.timestamp);
            h_state.history_stack=history_stack;
            params.state.HNState=h_state;
            current_state=h_state;
            return params;
        };
        let listenerReplaceState=function(params){
            params=Object.assign({state:null},params);
            params.state=params.state!==null?Object.assign({},params.state):null;
            let h_state=Object.assign({},current_state);
            h_state.history_stack=history_stack;
            params.state.HNState=h_state;
            return params;
        };
        let desc=Object.getOwnPropertyDescriptors(History.prototype);
        delete desc.constructor;
        Object.defineProperties(History.prototype,{

            replaceState:Object.assign({},desc.replaceState,{
                value:function(state,title,url){
                    let params={state,title,url};
                    HistoryNavigation.dispatchEvent('history.state.replace',params);
                    params=Object.assign({state,title,url},params);
                    params=listenerReplaceState(params);
                    desc.replaceState.value.call(this,params.state,params.title,params.url);
                }
            }),
            pushState:Object.assign({},desc.pushState,{
                value:function(state,title,url){
                    let params={state,title,url};
                    HistoryNavigation.dispatchEvent('history.state.push',params);
                    params=Object.assign({state,title,url},params);
                    params=listenerPushState(params);
                    return desc.pushState.value.call(this, params.state, params.title, params.url);
                }
            })
        });
        HistoryNavigation.addEventListener('popstate',function(event){
            let HNState;
            if(event.state==null){
                HNState=init_HNState;
            } else {
                HNState=event.state.HNState;
            }
            let key_prev=history_stack.indexOf(current_state.timestamp);
            let key_state=history_stack.indexOf(HNState.timestamp);
            let delta=key_state-key_prev;
            let params={delta,event,state:Object.assign({},event.state)};
            delete params.state.HNState;
            HNState.history_stack=history_stack;
            if(event.state!==null){
                event.state.HNState=HNState;
            }
            current_state=HNState;
            HistoryNavigation.dispatchEvent('history.go',params);
        });

    }
    static addEventListener(...arg)
    {
        window.addEventListener(...arg);
    }
    static removeEventListener(...arg)
    {
        window.removeEventListener(...arg);
    }
    static dispatchEvent(event,params)
    {
        if(!(event instanceof Event)){
            event=new Event(event,{cancelable:true});
        }
        event.params=params;
        window.dispatchEvent(event);
    };
}
HistoryNavigation.init();

// exemple

HistoryNavigation.addEventListener('popstate',function(event){
    console.log('Will not start because they blocked the work');
});
HistoryNavigation.addEventListener('history.go',function(event){
    event.params.event.stopImmediatePropagation();// blocked popstate listeners
    console.log(event.params);
    // back or forward - see event.params.delta

});
HistoryNavigation.addEventListener('history.state.push',function(event){
    console.log(event);
});
HistoryNavigation.addEventListener('history.state.replace',function(event){
    console.log(event);
});
history.pushState({h:'hello'},'','');
history.pushState({h:'hello2'},'','');
history.pushState({h:'hello3'},'','');
history.back();

    ```

Document.mouseover không hoạt động cho IE và FireFox. Tuy nhiên tôi đã thử điều này:

$(document).ready(function () {
  setInterval(function () {
    var $sample = $("body");
    if ($sample.is(":hover")) {
      window.innerDocClick = true;
    } else {
      window.innerDocClick = false;
    }
  });

});

window.onhashchange = function () {
  if (window.innerDocClick) {
    //Your own in-page mechanism triggered the hash change
  } else {
    //Browser back or forward button was pressed
  }
};

Điều này hoạt động cho Chrome và IE chứ không phải FireFox. Vẫn đang làm việc để có được FireFox ngay. Bất kỳ cách dễ dàng nào để phát hiện nhấp vào nút quay lại / chuyển tiếp của Trình duyệt đều được chào đón, không đặc biệt trong JQuery mà cả AngularJS hoặc Javascript đơn giản.

 <input style="display:none" id="__pageLoaded" value=""/>


 $(document).ready(function () {
        if ($("#__pageLoaded").val() != 1) {

            $("#__pageLoaded").val(1);


        } else {
            shared.isBackLoad = true;
            $("#__pageLoaded").val(1);  

            // Call any function that handles your back event

        }
    });

Các mã trên làm việc cho tôi. Trên các trình duyệt di động, khi người dùng nhấp vào nút quay lại, chúng tôi muốn khôi phục trạng thái trang theo lần truy cập trước đó.

Tôi đã giải quyết nó bằng cách theo dõi sự kiện ban đầu đã kích hoạt hashchange(có thể là vuốt, nhấp hoặc bánh xe), để sự kiện đó không bị nhầm lẫn với một trang đích đơn giản và sử dụng cờ bổ sung trong mỗi ràng buộc sự kiện của tôi. Trình duyệt sẽ không đặt lại cờ falsekhi nhấn nút quay lại:

var evt = null,
canGoBackToThePast = true;

$('#next-slide').on('click touch', function(e) {
    evt = e;
    canGobackToThePast = false;
    // your logic (remember to set the 'canGoBackToThePast' flag back to 'true' at the end of it)
}

Tôi đã thử các tùy chọn trên nhưng không ai trong số chúng làm việc cho tôi. Đây là giải pháp

if(window.event)
   {
        if(window.event.clientX < 40 && window.event.clientY < 0)
        {
            alert("Browser back button is clicked...");
        }
        else
        {
            alert("Browser refresh button is clicked...");
        }
    }

Tham khảo liên kết này http://www.codeproject.com/Articles/696526/Solution-to-Browser-Back-Button-Click-Event-Handli để biết thêm chi tiết