브라우저 뒤로가기 이벤트 감지 - beulaujeo dwilogagi ibenteu gamji

Question

티스토리 뷰

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

목차 Show

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

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

728x90

300x250

뒤로가기 제어하기

방법 1.

window.onpopstate = function(event) {
  // "event" object seems to contain value only when the back button is clicked
  // and if the pop state event fires due to clicks on a button
  // or a link it comes up as "undefined" 
  if(event){
    // Code to handle back button or prevent from navigation
  }
  else{
    // Continue user action through link or button
  }
}

방법 2.

페이지 리로드하지 않고 url만 변경하기

history.pushState( state , 'title', 'url');
참고 : https://developer.mozilla.org/ko/docs/Web/API/History/pushState

state = 상태 값을 나타내는 것으로 브라우저에서 앞/ 뒤로 갈 때, 넘겨줄 데이터
title = 변경할 브라우저 제목 (변경을 원하지 않으면 null)
url = 변경할 브라우저 URL

window.onpopstate = function(event) {
	alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); 
}

브라우저에서 뒤/앞으로 가는 버튼 클릭 시 onpopstate 이벤트가 발생한다.
이때 콜백함수에서 event.state는 pushState 함수의 인자 값이였던 state 객체가 넘어온 것이다.

방법 3. 태그에 웹브라우저 뒤로가기 / 앞으로가기 추가

//뒤로가기
window.history.back();

//앞으로가기
window.history.forward();

//특정페이지로 이동하기
window.history.go(number ex) 1,2,3,-1) // 안에 숫자를 적어넣어 특정페이지로 이동
//만약 -1 을 넣은 경우 : back()와 동일한 효과
//만약 1을 넣은경우 : forword()와 동일한 효과

방법 4. 뒤로가기 막고 모달 띄우기

 window.history.pushState(null, '', location.href);

window.onpopstate = () => {
  history.go(1);
  this.handleGoback();
};

 window.onpopstate = () => {
   history.go(1);
   this.handleGoback();
   
   //여기에 모달창 코드 
 };

이 구문은 뒤로가기 액션이 들어올때 히스토리를 한칸 앞으로 옮겨줍니다. 실질적으로 뒤로가기가 되지 않는 효과가 있습니다. 이후 모달을 닫는 로직이 들어있는 함수를 실행 시켜주었습니다.

여기서 한가지 주의 할 점은 이후 모달이 삭제되어야 한다는 점입니다. 만약 삭제 되지 않고 display:none 등으로 처리되면 뒤로가기 할때에 다시 마운트 되고 계속 히스토리 스택을 쌓으려고 하기 때문에 주의 하여야 합니다.

참고
https://jintaewoo.tistory.com/13

https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

https://velog.io/@bclef25/%EC%9B%B9%EC%97%90%EC%84%9C-%EB%92%A4%EB%A1%9C%EA%B0%80%EA%B8%B0%EB%A5%BC-%EB%A7%89%EA%B3%A0-%EB%AA%A8%EB%8B%AC%EC%9D%84-%ED%81%B4%EB%A1%9C%EC%A6%88-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%9C-%EB%B0%A9%EB%B2%95

https://developer.mozilla.org/ko/docs/Web/API/WindowEventHandlers/onhashchange

728x90

300x250

'퍼블리싱 > html css js' 카테고리의 다른 글

[Javascript] Daum 우편번호 서비스 사용하기 (0)	2020.09.08
[Javascript] flatpickr를 이용해 간단한 달력만들기 (0)	2020.09.08
[리액트]less , font 적용하기 (0)	2020.09.02
[Javascript] 배열공부 (0)	2020.09.02
사이트 주소창 관련 (0)	2020.09.02

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

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

과정은 아래와 같았다.

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

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

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

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

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로 브라우저가 로딩될 경우 혹은 브라우저 뒤로가기 했을 경우

// 이벤트 추가하는 곳

}

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

브라우저 뒤로가기 감지 뒤로가기 버튼 감지 브라우저 뒤로가기 캐시

브라우저 뒤로가기 이벤트 감지 - beulaujeo dwilogagi ibenteu gamji

티스토리 뷰

'퍼블리싱 > html css js' 카테고리의 다른 글

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

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

과정은 아래와 같았다.

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

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

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

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

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

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

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

관련 게시물

PIR 센서 가격 - PIR senseo gagyeog

작혼 apk 한글 - jaghon apk hangeul

크롬 모바일 브라우저 설정 - keulom mobail beulaujeo seoljeong

맥북 단축키 안될 때 - maegbug danchugki andoel ttae

웹 해상도 - web haesangdo

광고하는

최근 소식

63빌딩 홈페이지 - 63bilding hompeiji

네이버 우클릭 금지 사진 다운 - neibeo ukeullig geumji sajin daun

ATEN KVM 스위치 단축키 - ATEN KVM seuwichi danchugki

암호화 키 교환 - amhohwa ki gyohwan

웰다잉 프로그램계획서 - weldaing peulogeulaemgyehoegseo

에어팟 프로 셀라스텍 - eeopas peulo sellaseuteg

원 앤드 원 쇼핑 - won aendeu won syoping

지효 야짤 - jihyo yajjal

밥 뚜껑 안열릴때 - bab ttukkeong an-yeollilttae

돌체구스토 스타벅스 캡슐 호환 - dolcheguseuto seutabeogseu kaebsyul hohwan

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의