HTML5 기록을 사용하여이 예제에서 앞으로 버튼을 만드는 방법은 무엇입니까?

Question

이 예에서는 뒤로 버튼 작업을 처리하지만 앞으로 버튼이 문제가되는 것처럼 보입니다. 앞으로 버튼을 누르면 #modal이 다시 나타나지만 나타나지 않습니다. 그것을 고칠 어떤 생각?

$(window).bind('popstate', function() { 
 
    $('#modal').hide(); 
 
}); 
 

 
$(".view").click(function() { 
 
    history.pushState(null, null, null); 
 
    $("#modal").show(); 
 
});

#modal { 
 
    position: relative; 
 
    display: none; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: grey 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button class="view">Click</button> 
 
<div id="modal"></div>

Here is JSBin

감사합니다! 당신은 대신 "역사"의 "해시"를 사용할 수 있습니다

Answer 1

입니다 어쨌든. 스택을 따라 앞으로 나아갈 때 popstate 이벤트도 발생한다는 사실을 알고 있습니까?

대부분의 사람들은 역사/컨텐츠를 해결하기 위해"라우팅"로 알려진 상대 URL (또는 조각)을 사용하는 경향이 있지만, 당신은 또한 데이터를 추가 pushState의 첫 번째 매개 변수를 사용할 수 있습니다 - 당신은이 메커니즘을 관리하는 방법 큰 규모 (널, 널, 널)

$(window).bind('popstate', function() { 
    var state = history.state || {}; 
    state.openModal ? $('#modal').show() : $('#modal').hide(); 
}); 

$(".view").click(function(){ 
    $('#modal').show(); 
    history.pushState({ openModal: true }); 
}); 

» demo

Answer 2

는

$(window).bind('popstate', function() { 
    if(location.hash.indexOf('#modal') != -1) 
     $('#modal').show(); 
    else 
    $('#modal').hide(); 
}); 

$(".view").click(function(){ 
    location.hash ='#modal'; 
    $("#modal").show(); 
}); 

이 당신의 페이지의 상태/뷰를 결합되지 않은 역사에 모든 null을 추진하여 demo