j JavaScript

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

홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물

2,139

검색목록 목록 글쓰기

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

pageshow 정의

pageshow 구문

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>

결과보기

JavaScript 관련글

jQuery 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글

코멘트입력

검색목록 목록 글쓰기


분류	제목



DOM_Event	JS - Event 종류 ★ - 이벤트부착 / 이벤트종류 / 이벤트속성 / 이벤트메서드

DOM_Event	JS - abort 이벤트 (= onabort 속성) - 미디어로드중단 (= 온어보트이벤트, IE9)

DOM_Event	JS - afterprint 이벤트 (= onafterprint 속성) - 인쇄모드이벤트 (= 인쇄시작 / …

DOM_Event	JS - animationend 이벤트 (= onanimationend 속성) - 애니완료이벤트 (= 애니종…

DOM_Event	JS - animationiteration 이벤트 (= onanimationiteration 속성) - CS…

DOM_Event	JS - animationstart 이벤트 (= onanimationstart 속성) - CSS 애니메인션 …

DOM_Event	JS - beforeprint 이벤트 (= onbeforeprint 속성) - 인쇄모드 인쇄대화상자 나타나기…

DOM_Event	JS - beforeunload 이벤트 (= onbeforeunload 속성) - 웹문서 언로드 (= 사이트…

DOM_Event	JS - blur 이벤트 (= onblur 속성) - 포커스제거이벤트 (= 포커스해제이벤트 = 블러이벤트)

DOM_Event	JS - canplay 이벤트 (= oncanplay 속성) - 동영상재생가능 (= 비디오재생가능/오디오재생…

DOM_Event	JS - canplaythrough 이벤트 (= oncanplaythrough 속성) - 버퍼링중지없이 재생…

DOM_Event	JS - change 이벤트 (= onchange 속성) ★ - 요소값변경이벤트 (= 체인지이벤트 = 온체인…

DOM_Event	JS - click 이벤트 (= onclick속성 = 온클릭이벤트) ★ - 마우스클릭이벤트

DOM_Event	JS - contextmenu 이벤트 (oncontextmenu 속성) - 마우스오른쪽메뉴선택 (= 컨텍스트…

DOM_Event	JS - copy 이벤트 (= oncopy 속성) - 복사이벤트 (= copy이벤트 = 카피이벤트) ※ 복사…

DOM_Event	JS - cut 이벤트 (= oncut 속성) - 잘라내기이벤트 (= 컷이벤트)

DOM_Event	JS - dblclick 이벤트 (= ondblclick 속성) ★ - 마우스더블클릭이벤트

DOM_Event	JS - drag 이벤트 (= ondrag 속성) - 마우스드래그이벤트 (IE9) ※ 드래그앤드롭

DOM_Event	JS - dragend 이벤트 (= ondragend 속성) - 마우스드래그종료 (IE9)

DOM_Event	JS - dragenter 이벤트 (= ondragenter 속성) - 드래그진입 (= 드래그엔터이벤트)

1/9

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

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

pageshow 정의

pageshow 구문

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

JavaScript 관련글

jQuery 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글

공지사항

최신글

최신댓글

운영비 후원해주신 분 리스트