뒤로/앞으로 버튼을 만들려면 어떻게해야합니까?

Question

내 웹 사이트의 앞뒤 단추를 모두 만들려고합니다. 사실 저는 this을 따르고 싶습니다. 먼저 우선 window.history.back();과 window.history.forward();이 있는지 확인해야합니까? 그렇다면 단추를 표시하고 단추에 href 특성을 설정하십시오.

$('.back_btn, .forward_btn').on('click', function() { 
    var page = $(this).attr('href'); 
    location.href=page 
}); 

을하지만 내 코드는 예상대로, 나는 심지어 내 웹 사이트를 열 수없는 것은 작동하지 않습니다

function creat_back_forward_btn(){ 
    if (window.history.back()) { 
     $('.back_btn').show(); // in first, the button is hidden (by CSS) 
     var previous_page = window.history.back(); 
     $('.back_btn').attr('href', previous_page); 
    } 

    if (window.history.forward()) { 
     $('.forward_btn').show(); // in first, the button is hidden (by CSS) 
     var next_page = window.history.forward(); 
     $('.forward_btn').attr('href', next_page);  
    } 
} 

creat_back_forward_btn(); // on load 

그리고,이 같은 그 버튼을 사용합니다. 아무 것도 클릭하지 않고 어딘가에 방향이 바뀝니다. 어떻게 해결할 수 있습니까?

Answer 1

이 시도 :

function creat_back_forward_btn(){ 
    if (window.history.length > 0) { 
     $('.back_btn').show().on("click", function(){ 
      window.history.back(); 
     }); 

     $('.forward_btn').show().on("click", function(){ 
      window.history.forward(); 
     }); 
    } 
} 

creat_back_forward_btn(); // on load 

Answer 2

이 함수가 존재하는지 여부를 확인하려면 사용중인 :

if (window.history.back()) 

이이 방법을 실행합니다. 대신 사용해야합니다 : 가능한 경우 true 값을 반환

if (window.history.back) 

합니다.

마지막으로 메서드를 호출하고이를 href 특성에 바인딩하는 함수 또는 익명 함수를 만들어야합니다. 메서드를 실행하고 반환 값을 변수에 할당하는 대신 그래서 같이 :

var previous_page = function() { window.history.back() }; 
$('.back_btn').attr('href', previous_page); 

Answer 3

이

if (window.history.back()) { 
    $('.back_btn').show(); // in first, the button is hidden (by CSS) 
    var previous_page = window.history.back(-1); 
    $('.back_btn').attr('href', previous_page); 
} 

if (window.history.forward()) { 
    $('.forward_btn').show(); // in first, the button is hidden (by CSS) 
    var next_page = window.history.forward(+1); 
    $('.forward_btn').attr('href', next_page);  
} 
} 

creat_back_forward_btn(); // on load 

Answer 4

같은 것을 시도 코드 몇 가지 문제가 있습니다. 첫 번째 방법은 함수가 있는지 확인하는 방법입니다. window.history.back()은 해당 함수의 실행을 야기하므로 브라우저는 즉시 이력으로 돌아갑니다. 기능이있는 경우

typeof(window.history.back) === "function" 

그러나, 이것은 단지 브라우저 기록에 뭔가가되지 않을 경우, 말할 것이다 : 함수의 존재를 확인하려면이 코드를 사용할 수 있습니다. 실제로 보안 문제이기 때문에 브라우저 기록에있는 레코드 수를 확인할 수 없습니다. 이력 변경에 대응하려면 popstate 이벤트를 pushState 및 replaceState 메소드와 함께 처리 할 수 ​​있습니다. 그러나 일부 페이지가 A 인 브라우저 창을 열고 페이지 B으로 이동하면 브라우저 기록에 기록이 남게되고 A으로 다시 이동할 수 있습니다. 브라우저 버튼을 사용하여 페이지를 검색 할 수는 없지만 페이지에서 다시 찾을 수있는 곳은 B입니다.