웹 기준 페이지1에서 배너를 클릭해서 페이지2로 들어갔을 때
history.back()을 통해 페이지1로 돌아왔더니
API 요청을 하지 않는 경우가 발생했다
에러 메시지는 이렇다
Uncaught DOMException: Failed to execute ‘send’ on ‘XMLHttpRequest’: Failed to load
history.back()을 사용했던 것 자체가 페이지1을 매번 다시 불러오는 걸 줄이고자 한 거였다
근데 검색해 보니 이때 bfcache라는 게 문제가 된다는 말이 있다
BFCache(Back-Forward Cache)
HTML parsing 등 페이지를 구성하는 동작을 줄여 하지 않도록 하고, Javascript 상태를 저장했다가 다시 보여주는 기능이다
Safari, Firefox 브라우저에서 동일 세션에서 이전 페이지를 보다 빠르게 로딩하기 위해 이전에 저장한 데이터를 바로 로드한다고 한다
보통 데스크톱에서는 기능이 꺼져 있고, ios를 사용하는 기기에서 사용하는 기능이라고 한다
그래서 그런지 Mac에서는 console에 에러 로그가 찍혔고, Window에서는 발생하지 않았다
해결은
원래 XMLHttpRequest()로 API 요청을 했는데, Axios를 사용하는 방법으로 바꾸니 에러가 발생하지 않았다
하지만 페이지1에서 데이터 a => 페이지2에서 데이터가 b로 바뀜
이 상황에서 history.back()으로 페이지1의 데이터가 여전히 a인 상태로 보였기 때문에
결국 history.back()을 사용하지 않는 방법으로 정했다
js에서 history.back()를 했는지 체크할 수 있는 방법을 알아보자
event.persisted를 사용하면 된다
history.back()으로 페이지 접근 시 true를 반환한다
<!DOCTYPE html>
<html>
<head>
</head>
<body onpageshow="initPage(event)">
<script type="text/javascript">
function initPage(e) {
if(e.persisted) {
console.log("history back 으로 페이지 접근");
}
}
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [#. JavaScript] input maxlength 글자수 제한하기 (0) | 2021.10.27 |
|---|---|
| [#. JavaScript] js touch event 사용하기 touchstart, touchend, touchmove, 클릭할 시에는 이벤트 발생하지만 스크롤 시에는 이벤트 발생되지 않도록 하기 (0) | 2021.10.01 |
| [#. JavaScript] addEventListener is not a function 에러 해결 방법 (0) | 2021.09.15 |
| [#. regex] regex 작성법, Regular expression 이제 복사해서 쓰지 말고 직접 작성해서 쓰자 (0) | 2021.09.13 |
| [#. JavaScript] Array 배열 함수 모음 Array APIs (0) | 2021.09.02 |
