[JQUERY] 자바 스크립트 또는 jQuery를 브라우저의 뒤로 버튼을 클릭 검출기

자바 스크립트 또는 jQuery를 브라우저의 뒤로 버튼을 클릭 검출기

해결법

1. ---

   1.이전에 뭔가를 밀어 때 'popstate'이벤트에만 작동합니다. 이 같은 뭔가를해야 그래서 :

   이전에 뭔가를 밀어 때 'popstate'이벤트에만 작동합니다. 이 같은 뭔가를해야 그래서 :

   jQuery(document).ready(function($) {
   
     if (window.history && window.history.pushState) {
   
       window.history.pushState('forward', null, './#forward');
   
       $(window).on('popstate', function() {
         alert('Back button was pressed.');
       });
   
     }
   });
   

   브라우저 이전 버전과의 호환성을 위해 내가 추천 : history.js를

2. ---

   2.자바 스크립트에서 탐색 제 2 형 수단 브라우저의 뒤로 또는 앞으로 버튼을 클릭하고 브라우저 실제로 캐시의 내용을하고있다.

   자바 스크립트에서 탐색 제 2 형 수단 브라우저의 뒤로 또는 앞으로 버튼을 클릭하고 브라우저 실제로 캐시의 내용을하고있다.

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

3. ---

   3.사용자가 뒤로 단추를 클릭 할 경우 사용자가 감지 할 수있는 방법을 여러 가지 방법이 많이 있습니다. 그러나 모든 것이 무엇을 필요에 따라 달라집니다. 그들이 당신을 도움이 될 것입니다, 아래 링크를 찾아보십시오.

   사용자가 뒤로 단추를 클릭 할 경우 사용자가 감지 할 수있는 방법을 여러 가지 방법이 많이 있습니다. 그러나 모든 것이 무엇을 필요에 따라 달라집니다. 그들이 당신을 도움이 될 것입니다, 아래 링크를 찾아보십시오.

   사용자가 누르면 현재 페이지의 "뒤로"버튼을 경우 감지 :

   현재 페이지는 페이지 ( "앞으로") 이전에 "뒤로"버튼을 누른 후 방문 감지 경우 :

4. ---

   4.일 잘 크로스 브라우저 및 모바일 back_button_override.js이 발견.

   일 잘 크로스 브라우저 및 모바일 back_button_override.js이 발견.

   (사파리 5.0 타이머를 추가)

   // managage back button click (and backspace)
   var count = 0; // needed for safari
   window.onload = function () { 
       if (typeof history.pushState === "function") { 
           history.pushState("back", null, null);          
           window.onpopstate = function () { 
               history.pushState('back', null, null);              
               if(count == 1){window.location = 'your url';}
            }; 
        }
    }  
   setTimeout(function(){count = 1;},200);
   

5. ---

   5.HTML5의 경우이 트릭을 할 것입니다

   HTML5의 경우이 트릭을 할 것입니다

   window.onpopstate = function() {
      alert("clicked back button");
   }; history.pushState({}, '');
   

6. ---

   6.내 경우에는 내가 SPA (한 페이지 [웹] 응용 프로그램)에 업데이트 된 DIV에의 jQuery .load ()를 사용하고 있습니다.

   내 경우에는 내가 SPA (한 페이지 [웹] 응용 프로그램)에 업데이트 된 DIV에의 jQuery .load ()를 사용하고 있습니다.

   $ (창) CSTE 연구진 ( 'hashchange', ..) 이벤트 리스너 작업에 새로운이기 때문에,이 사람은 도전 입증에 해킹을 조금했다. 답변을 많이 읽고 다른 변화를 시도 덕분에, 마지막으로 다음과 같은 방법으로 그 일을 만드는 방법을 알아 냈다. 내가 말할 수있는 지금까지, 그것은 지금까지 안정을 찾고 있습니다.

   나는 가장 우아한 해결책이 아니라 글로벌 바르를 사용하지만, JS에서 OO 지금까지 나에게 까다로운 것 같다 일을 알고 있습니다. 개선 / 정제에 대한 제안은 확실히 평가

   설정:

       var globalCurrentHash = null;
   

7. ---

   7.이 멋진 플러그인을 사용할 수 있습니다

   이 멋진 플러그인을 사용할 수 있습니다

   https://github.com/ianrogren/jquery-backDetect

   당신이해야 할 모든이 코드를 작성하는 것입니다

     $(window).load(function(){
       $('body').backDetect(function(){
         // Callback function
         alert("Look forward to the future, not the past!");
       });
     });
   

   베스트

8. ---

   8.그것은 HTML5 역사 API에서 사용할 수 있습니다. 이 행사는 'popstate'라고

   그것은 HTML5 역사 API에서 사용할 수 있습니다. 이 행사는 'popstate'라고

9. ---

   9.다음 함수에 의해 URL 버튼을 비활성화

   다음 함수에 의해 URL 버튼을 비활성화

   window.onload = function () {
       if (typeof history.pushState === "function") {
           history.pushState("jibberish", null, null);
           window.onpopstate = function () {
               history.pushState('newjibberish', null, null);
               // Handle the back (or forward) buttons here
               // Will NOT handle refresh, use onbeforeunload for this.
           };
       }
       else {
           var ignoreHashChange = true;
           window.onhashchange = function () {
               if (!ignoreHashChange) {
                   ignoreHashChange = true;
                   window.location.hash = Math.random();
                   // Detect and redirect change here
                   // Works in older FF and IE9
                   // * it does mess with your hash symbol (anchor?) pound sign
                   // delimiter on the end of the URL
               }
               else {
                   ignoreHashChange = false;
               }
           };
       }
   };
   

10. ---

    10.하산 바드 샤의 대답은 나를 위해 일하지만, 방법은 사용되지 할 예정이다 그리고 앞으로 다른 사람에 대한 문제가 될 수 있습니다. 다른 방법에 MDN 웹 문서에 따라, 내가 여기에 착륙 : PerformanceNavigationTiming.type

    하산 바드 샤의 대답은 나를 위해 일하지만, 방법은 사용되지 할 예정이다 그리고 앞으로 다른 사람에 대한 문제가 될 수 있습니다. 다른 방법에 MDN 웹 문서에 따라, 내가 여기에 착륙 : PerformanceNavigationTiming.type

    if (performance.getEntriesByType("navigation")[0].type === 'back_forward') {
      // back or forward button functionality
    }
    

    이것은 바로 앞으로 버튼을 통해 다시 버튼에 대한 해결하지만, 내가 필요로 무엇을 좋은 충분하지 않습니다. 워드 프로세서에서 그들은 세부 특정 요구 사항을 해결에 도움이 될 수있는 가능한 이벤트 데이터 :

    function print_nav_timing_data() {
      // Use getEntriesByType() to just get the "navigation" events
      var perfEntries = performance.getEntriesByType("navigation");
    
      for (var i=0; i < perfEntries.length; i++) {
        console.log("= Navigation entry[" + i + "]");
        var p = perfEntries[i];
        // dom Properties
        console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - 
        p.domContentLoadedEventStart));
        console.log("DOM complete = " + p.domComplete);
        console.log("DOM interactive = " + p.interactive);
    
        // document load and unload time
        console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
        console.log("document unload = " + (p.unloadEventEnd - 
        p.unloadEventStart));
    
        // other properties
        console.log("type = " + p.type);
        console.log("redirectCount = " + p.redirectCount);
      }
    }
    

    이 작업 초안 상태에 여전히 및 IE 또는 Safari에서 지원되지 않습니다이 게시물시의 문서에 따르면,하지만이 완료되는 시점에 의해 변경 될 수 있습니다. 업데이트에 대한 문서를 확인하십시오.

11. ---

    11.당신이 버튼이 있다고 가정합니다 :

    당신이 버튼이 있다고 가정합니다 :

    <button onclick="backBtn();">Back...</button>
    

    backBtn 방법의 다음 코드 :

      function backBtn(){
                        parent.history.back();
                        return false;
                    }
    

from https://stackoverflow.com/questions/17594413/javascript-or-jquery-browser-back-button-click-detector by cc-by-sa and MIT license