• 회원가입
  • 로그인
  • 구글아이디로 로그인

[DOM_Event] JS - pageshow 이벤트 (= onpageshow 속성) - 사용자가 웹페이지 탐색 시 실행 (= pageshow이벤트 = 페이지쇼이벤트) ※ 무조건 로드시마다 실행

목차

  1. pageshow 예제 - 사용자가 웹페이지 탐색 시 함수 실행
  2. pageshow 정의
  3. pageshow 구문
  4. pageshow 예제 - 브라우저에 의해 웹페이지가 캐시되었는지 체크

 

pageshow 예제 - 사용자가 웹페이지 탐색 시 함수 실행

 

<!DOCTYPE html>

<html>

<body onpageshow="homzzang()">


<h1>홈짱닷컴 Homzzang.com</h1>

<p>그누보드/영카트 기초 과외</p>


<script>

function homzzang() {

  alert("환영해요!!");

}

</script>


</body>

</html>


결과보기

 

pageshow 정의

 

사용자가 웹페이지 탐색하는 이벤트 발생 시 코드 실행.

 


 

1. cf. onload 이벤트

  • onpageshow 이벤트는 페이지가 처음 로드될 때 onload 이벤트 이후에 발생한다는 점을 제외하면 onload 이벤트와 유사.
  • onpageshow 이벤트는 페이지가 로드될 때마다 발생하지만, onload 이벤트는 페이지가 캐시에서 로드될 때는 발생 안 함.

 

2.

페이지가 서버에서 직접 로드되는지 또는 페이지가 캐시되는지 확인하려면 PageTransitionEvent 객체의 persisted 속성 사용 가능. (이 속성은 페이지가 브라우저에 의해 캐시된 경우 true 반환하고, 그렇지 않은 경우 false 반환. 아래 예제 참고)

 

3.

  • 이벤트확산: X
  • 취소가능성: X
  • 이벤트타입: PageTransitionEvent
  • 지원HTML: <body>
  • DOM버전: Level 3 Events

 

4.

IE11 이상 주요 최신 브라우저 지원.

 

 

pageshow 구문

 

HTML 방식

  • <element onpageshow="homzzang()">

 

JS 방식

  • object.onpageshow = function(){homzzang()};
  • object.addEventListener("pageshow", homzzang);

 

 PS. homzzang: 함수명

 

pageshow 예제 - 브라우저에 의해 웹페이지가 캐시되었는지 체크

 

<!DOCTYPE html>

<html>

<body onpageshow="homzzang(event)">


<h1>홈짱닷컴 Homzzang.com</h1>

<p>그누보드/영카트 기초 과외</p>


<script>

function homzzang(event) { 

  if (event.persisted) {

    alert("브라우저에 의해 페이지 캐시화 O");

  } else {

    alert("브라우저에 의해 페이지 캐시화 X");

  }

}

</script>


</body>

</html>


결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
DOM_Event JS - paste -
DOM_Event JS - pause -
DOM_Event JS - play -
DOM_Event JS - playing -
DOM_Event JS - popstate -
DOM_Event JS - progress -
DOM_Event JS - ratechange 이벤트 - 재생 속도 변경 이벤트 (= ratechange이벤트 = 레이트체인지…
DOM_Event JS - resize 이벤트 (= onresize 속성) - 윈도우 창크기 변경 조정 (= resize이벤트…
DOM_Event JS - reset -
DOM_Event JS - scroll 이벤트 (= onscroll 속성) ★ - 스크롤이벤트
DOM_Event JS - search 이벤트 (= onsearch 속성) - 검색이벤트 (IE와 FireFox는 지원 X)
DOM_Event JS - seeked -
DOM_Event JS - seeking -
DOM_Event JS - select 이벤트 (onselect 속성) = 텍스트 선택 (= select이벤트 = 실렉트이벤트…
DOM_Event JS - show 이벤트 (= onshow 속성) - <menu> 요소가 상황에 맞는 메뉴로 표시 될 때 발…
DOM_Event JS - stalled 이벤트 - 브라우저가 미디어 데이터 사용 불가 시 실행. (= 스톨드 이벤트)
DOM_Event JS - storage -
DOM_Event JS - submit 이벤트 (= onsubmit 속성) - 제출/전송 이벤트 (= 서브밋 이벤트 = 서브미…
DOM_Event JS - suspend 이벤트 (onsuspend 속성) - 브라우저가 의도적으로 미디어 데이터 안 가져올 …
DOM_Event JS - timeupdate 이벤트 - 오디오/비디오 재생 위치 변경 발생 (= timeupdate이벤트 =…
34/67
목록
찾아주셔서 감사합니다. Since 2012