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

[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>


결과보기



분류 제목
DOM_Style JS - animationPlayState 속성 - 애니재생상태 (= 애니작동상태설정 = 움직임 재생/멈춤 …
DOM_Style JS - background 속성 ★ - (배경색/배경이미지) 설정/반환 (= background속성 / 백…
DOM_Style JS - backgroundAttachment 속성 ★ - 배경이미지고정 설정/반환
DOM_Style JS - backgroundColor 속성 ★ - 배경색 설정/반환. (= backgroundColor속성 …
DOM_Style JS - backgroundImage 속성 ★ - 배경이미지 설정/반환 (= backgroundImage속성…
DOM_Style JS - backgroundPosition 속성 - 배경이미지위치 설정/반환
DOM_Style JS - backgroundRepeat 속성 - 배경이미지반복 설정/반환
DOM_Style JS - backgroundClip 속성 - 배경 영역 (= backgroundClip속성 = 백그라운드클립…
DOM_Style JS - backgroundOrigin 속성 - 배경이미지 좌표시작점 설정/반환 (= 백그라운드오리진 속성)
DOM_Style JS - backgroundSize 속성 ★ - 배경이미지크기 설정/반환 (IE9 이상)
DOM_Style JS - backfaceVisibility 속성 - 3D요소 뒷면노출 설정/반환 (IE10 이상)
DOM_Style JS - border 속성 ★ - 테두리스타일 설정/반환 (= 보더속성 = border속성)
DOM_Style JS - borderBottom 속성 - 테두리하단 (= border-bottom속성 = 하단테두리 = 보더…
DOM_Style JS - borderBottomColor 속성 - 테두리하단색깔 (= 보더바텀컬러속성 = border-bot…
DOM_Style JS - borderBottomLeftRadius 속성 - 테두리하단왼쪽모서리둥글게 (= 테두리 하단좌측둥글…
DOM_Style JS - borderBottomRightRadius 속성 - 테두리하단오른쪽모서리둥글게 설정/반환 (= 테두…
DOM_Style JS - borderBottomStyle 속성 - 테두리하단스타일
DOM_Style JS - borderBottomWidth 속성 - 테두리하단두께 (= 하단테두리두께 = 보더바텀위드스 = b…
DOM_Style JS - borderCollapse 속성 - 테두리겹침설정 (= 테두리중첩설정 = 테두리이중방지 = 보더컬랩…
DOM_Style JS - borderColor 속성 - 테두리색깔 설정/반환 (= borderColor속성 = 보더컬러 속성…
43/67
목록
찾아주셔서 감사합니다. Since 2012