Javascript 뒤로가기 새로고침 - javascript dwilogagi saelogochim

답변 2

<script>
//페이지 로드될때 새로고침
$(document).on("pageload",function(){
  window.location.reload(true);
});
</script>

썩구노트

뒤로가기 앞으로가기 새로고침 본문

뒤로가기 : <a href="javascript:history.back()">뒤로갈껴~</a>
새로고침 : <a href="javascript:location.reload()">새로고칠껴~</a>
앞으로 가기 : <a href="javascript:history.forward()">앞으로</a>

나모에서는 하이퍼링크 만들 문자나 그림을 선택한 후 '주소'창에
javascript:history.back() 을 적으면 뒤로 단추이고
javascript:location.reload() 을 새로고침 단추가 됩니다.
javascript:history.forward() 를 적으면 앞으로 가기가 됩니다.
(물론 이미지로도 링크 되겟죠.)

다른 방법....

:: 뒤로가기
<a href="javascript:history.go(-1)">back</a>

:: 새로고침
<a href="javascript:location.reload()">reload</a>

:: 앞으로가기
<a href="javascript:history.go(1)">앞으로가기</a>

개요

유저가 결제를 하는 프로세스에 들어와 있는 순간 브라우저 백 & 새로고침을 할 때 프론트에서는 어떻게 대응해야 할까?

대응책

1. 브라우저 뒤로가기 이벤트및 새로고침 이벤트를 조작해서 우리 원하는 처리를 해준다.

=> 이건 아쉽게도 크롬 브라우저 사양상 거의 불가능했다.

크롬에서 브라우저 이동 이벤트(popState, hashChange)에 대한 트리거 발생이 유저쪽에서의 interaction (click같은)

가 없으면 trigger되지 않는다.(javascript로 클릭이벤트 같은걸 발생시켜도 안됨)

// 둘다 유저쪽에서의 움직임이 없으면 trigger 안됨
window.onPopState(() => {}) 
window.onHashUpdate(() => {})

2. history를 조작한다.

=> pushState, updateState를 이용해 history를 조작해서 유저가 이동할 url 자체를 변경시켜

결제에 들어온 시점에서는 이동해도 에러페이지 url, 이나 에러처리 url을 history에 넣어준다.

(Safari의 bfcache정책도 감안해서 리로드시 javascript를 다시 리로드하도록 하는것도 잊지않기를.. )

history.replaceState({data}, 'Title', 'url') // 현재 히스토리를 바꾼다.
history.pushState({data}, 'Title', 'url') // 히스토리가 추가됨으로써 현재history -> 과거 push한 history -> 현재history

history & hash? 를 다루다보니 문득 Vue의 history mode에 대해서 떠올라서 밑의 링크가 아주아주아주 잘 설명해주셨다.

https://reimaginer.tistory.com/entry/spa-and-spa-routing

SPA와 SPA 라우팅 원리

SPA와 SPA 라우팅 원리 이번 포스팅에서 웹서비스가 Single Page Application(이하 SPA)까지 발전하게 된 경위와 SPA의 라우팅의 원리에 대해서 알아보려고 합니다. 스펙을 일일이 참고해서 작성하지 못하

www.reimaginer.me

//case by JavaScript
window.onpageshow =  function(event) {
    //back 이벤트 일 경우
    if (event.persisted) {
    		//todo
    }
}
//case by JQuery
$(window).bind("pageshow", function(event) {
    //back 이벤트 일 경우
    if (event.originalEvent && event.originalEvent.persisted) {
         //todo
    }
});