제이쿼리 뒤로가기 감지 - jeikwoli dwilogagi gamji

Question

Back Forward Cache 익스, 크롬, 사파리, 파이어폭스 뒤로가기 이벤트

크롬 브라우저 76 버전 까지는 잘되던 소스가 79 이상부터는 먹히지 않았다.

과정은 아래와 같았다.

input의 checkbox를 체크 하고 페이지 이동이 이루어진 다음 뒤로가기를 통해 돌아온 경우

checkbox의 체크가 풀려있지 않지만 페이지의 로딩이 다시 이루어지지 않기 때문에

$(function() {}) 내의 소스들이 호출이 되지 않았다.

이 부분을 구글링한 결과 Back Forward Cache라는 것 때문에 되지 않았던 것이다.

Back Forward Cache 란 브라우저의 뒤로가기시 브라우저가 단일 세션내에서

목차 Show

Back Forward Cache 익스, 크롬, 사파리, 파이어폭스 뒤로가기 이벤트
결과는 아주 잘된다. 대만족
티스토리 뷰

자바스크립트 상태 및 웹 페이지를 전체를 캐싱함으로써 전체적은 응답속도를 빠르게 동작하기위해

사용되는 캐시입니다.

이 캐시는 페이지에 대한 추가적인 로딩을 하지않고 자바스크립트 상태 까지 유지하고 있기 때문에

페이지 로딩시 반드시 한번 호출되어야 하는 자바스크립트가 있다면 호출되지 않기 때문에 문제가 발생할 수 있습니다.

라고 https://dev-t-blog.tistory.com/9 여기서 친히 설명해주었다.

따라서 아래와 같이 스크립트를 수정하면 뒤로가기 이벤트를 잡아낼 수 있었다.

window.onpageshow = function(event) {

if ( event.persisted || (window.performance && window.performance.navigation.type == 2)) {

// Back Forward Cache로 브라우저가 로딩될 경우 혹은 브라우저 뒤로가기 했을 경우

// 이벤트 추가하는 곳

}

결과는 아주 잘된다. 대만족

0. 들어가기 전에

HTML5에서는 history/state라는 페이지에 대한 상태를 저장하는 기능이 있습니다. pushState나 replaceState등을 이용해서 페이지를 나누고 값을 추가해서 던져주는등 단일 페이지에서 URL을 다르게 주기 위해서 많이 사용하는 기능이지만 여기에서는 뒤로가기를 할 때 발생되는 이벤트를 제어하기 위해서 사용하는 케이스를 짤막하게 소개해 봅니다.

1. HTML5에서의 뒤로가기 체크 이벤트 호출

<script>

 history.pushState(null, null, '');  //data, title, url 의 값이 들어가게 됩니다. 비워두면 이벤트 발생의 플래그 정도로 사용 할 수 있습니다.

                                         //기존페이지 이외에 입력한 URL로 페이지가 하나 더 만들어지는 것을 알 수 있습니다.



 window.onpopstate = function(event) {  //뒤로가기 이벤트를 캐치합니다.

  history.back();   // pushState로 인하여 페이지가 하나 더 생성되기 떄문에 한번에 뒤로가기 위해서 뒤로가기를 한번 더 해줍니다.

  console.log('뒤로가기 체크'); 

 };

</script>

특정 페이지 혹은 전 페이지에서 뒤로가기를 할 때 뒤로가기가 아니라 새로고침을 하고 싶다면 아래와 같은 식으로 사용 할 수 있습니다.

 history.pushState(null, null, '');

  window.onpopstate = function(event) {

    var prevUrl = document.referrer;

    if(prevUrl.indexOf('test.do') < 0){  //뒤로가기를 한 페이지가 test.do 페이지가 아니면 뒤로가기, test.do 페이지면 새로고침합니다.

      history.back();

    }else{

      location.href= prevUrl;

    }

 };

browserstate/history.js

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTo...

github.com

browserstate/history.js

history.js - History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all brows...

github.com

위와 비슷하게 짠다면 아래와 같이 쓸 수 있습니다.

<script type="text/javascript" src="jquery.history.js"></script>  //github에서 라이브러리 js를 받아 추가합니다.

<script>

History.pushState(null, null, '#');  //이 스크립트에서는 url을 빈칸으로 두면 이벤트가 발생하지 않습니다. 따라서 #으로 대체합니다.

 History.Adapter.bind(window,'statechange',function(){ 

     var state = History.getState(); // 상태 값을 가져옵니다.

     history.back();

 });

</script>

+ 2016-03-14 추가

history/state를 쓸 경우 POST에 대한 이슈가 있습니다.

history/state를 걸어둔 페이지는 새로고침을 하게 되면 항상 GET으로 넘어가게 됩니다. POST로만 접속 가능하게 만들었을 경우 접속이 안되거나 POST로 넘겨준 데이터가 날아가는 이슈가 있을 수 있습니다.

출처: https://naly3512.tistory.com/2623 [행복의 시작]

티스토리 뷰

브라우저에서 뒤로가기 시 크롬을 제외한 브라우저에서는 BFCache[https://developer.mozilla.org/en-US/docs/Working_with_BFCache]로 인해 뒤로가기 시에는 자바스크립트가 다시 불리지 않는다.

history.back 이벤트 발생 시 함수를 실행하기 위해서는 아래의 코드를 사용하면 된다.

None jQuery

window.onpageshow = function (event) {
    if (event.persisted) {
    	// 뒤로가기로 페이지 로드 시
        console.log(event.persited);
    }
    else {
    	// 새로운 페이지 로드 시
    }
}

jQuery

$(window).bind("pageshow", function (event) {
	if (event.originalEvent.persisted) {
		// 뒤로가기로 페이지 로드 시
	}
	else {
		// 새로운 페이지 로드 시
	}
});

개발자 Cannot read property 'persisted' of undefined
jquery console 에러가 뜨는데 혹시 설정 다른것을 잡아줘야 되나요???
2019.08.06 11:36

뒤로가기 이벤트 막기 리액트 뒤로가기 감지

제이쿼리 뒤로가기 감지 - jeikwoli dwilogagi gamji

Back Forward Cache 익스, 크롬, 사파리, 파이어폭스 뒤로가기 이벤트

크롬 브라우저 76 버전 까지는 잘되던 소스가 79 이상부터는 먹히지 않았다.

과정은 아래와 같았다.

input의 checkbox를 체크 하고 페이지 이동이 이루어진 다음 뒤로가기를 통해 돌아온 경우

checkbox의 체크가 풀려있지 않지만 페이지의 로딩이 다시 이루어지지 않기 때문에

$(function() {}) 내의 소스들이 호출이 되지 않았다.

이 부분을 구글링한 결과 Back Forward Cache라는 것 때문에 되지 않았던 것이다.

라고 https://dev-t-blog.tistory.com/9 여기서 친히 설명해주었다.

따라서 아래와 같이 스크립트를 수정하면 뒤로가기 이벤트를 잡아낼 수 있었다.

결과는 아주 잘된다. 대만족

티스토리 뷰

관련 게시물

광고하는

최근 소식

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의