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

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


결과보기



분류 제목
Window_Navigator JS - navigator.userAgent 속성 - 사용자 브라우저 정보 반환 (= navigator.us…
Window_Navigator JS - javaEnabled() 메서드 -
Window_Navigator JS - taintEnabled() 메서드 - JS1.2 버전에서 폐기완료. 브라우저에 데이터오염 있는지 확…
Window_Screen JS - availHeight 속성 ★ - 화면높이 (※ 작업표시줄 제외)
Window_Screen JS - availWidth 속성 ★ - 화면너비 (※ 작업표시줄 제외)
Window_Screen JS - colorDepth 속성 - 이미지 표시 위한 색상표 비트 심도를 픽셀 단위로 반환
Window_Screen JS - height 속성 ★ - 객체 높이 ※ screen.height: 화면 높이 (※ 작업표시줄 포함)
Window_Screen JS - pixelDepth 속성 - 방문자 화면의 색상해상도 (= 픽셀 당 비트 수) 반환 (IE10 이상…
Window_Screen JS - screen.width 속성 ★ - 스크린너비 (= 화면너비 = screen.width속성 = 스크…
DOM_Style JS - alignContent 속성(C) - 플렉스항목 세로정렬 (= alignContent속성 = 얼라인…
DOM_Style JS - alignItems 속성(C) - 플렉스아이템의 세로정렬방법 지정 (예: 상단정렬/하단정렬/균등배분…
DOM_Style JS - alignSelf 속성(I) - (플렉스아이템 수직정렬. 아이템 자체에 사용. align-self속…
DOM_Style JS - animation 속성 ★ - 애니일체 (= 움직임효과 = 이동효과 = 애니일괄 = 애니효과 = 애…
DOM_Style JS - animationDelay 속성 - 애니지연시간 (= animationDelay속성 = 애니메이션딜…
DOM_Style JS - animationDirection 속성 - 애니방향 (= 움직임방향 = 애니메이션디렉션속성, IE1…
DOM_Style JS - animationDuration 속성 - 애니지속시간 (= 애니완료소요시간 = 움직임완료소요시간 =…
DOM_Style JS - animationFillMode 속성 - 애니 미작동 스타일 (= 애니작동안할때 스타일 = 애니메이…
DOM_Style JS - animationIterationCount 속성 -애니메이션 반복횟수 설정/반환
DOM_Style JS - animationName 속성 - 키프레임명 (= 키프레임이름 = 애니이름 = 애니명 = 애니메이션…
DOM_Style JS - animationTimingFunction 속성 - 애니속도변화 (= 애니속도변경 = 애니속도곡선 …
42/67
목록
찾아주셔서 감사합니다. Since 2012