j JavaScript

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

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

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

2,147

검색목록 목록 글쓰기

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

DOM_Event	JS - touches -

DOM_Event	JS - transitionend -

DOM_Event	JS - type -

DOM_Event	JS - url -

DOM_Event	JS - which -

DOM_Event	JS - which -

DOM_Event	JS - view 속성 - 이벤트 발생한 Window 객체 반환 (= view속성 = 뷰속성)

DOM_Event_Object	JS - Event 객체 - 이벤트객체 (= 일반이벤트종류 = 기본이벤트종류)

DOM_Event_Object	JS - AnimationEvent 객체 - 애니메이션이벤트객체 (= 애니이벤트종류)

DOM_Event_Object	JS - ClipboardEvent 객체 - 클립보드수정 (= 클립보드이벤트객체 = 클립보드이벤트종류)

DOM_Event_Object	JS - DragEvent 객체 - 마우스드래그/마우스드롭 (= 드래그이벤트종류)

DOM_Event_Object	JS - FocusEvent 객체 - 포커스변화 (= 포커스이벤트객체 =포커스이벤트종류)

DOM_Event_Object	JS - HashChangeEvent 객체 - URL앵커변경 (= 해시체인지이벤트객체 = 해시체인지이벤트종류…

DOM_Event_Object	JS - InputEvent 객체 - 데이터입력 (= 인풋이벤트객체 = 인풋이벤트종류 = 입력이벤트)

DOM_Event_Object	JS - KeyboardEvent 객체 - 키보드움직임 (= 키보드이벤트객체 = 키보드이벤트종류)

DOM_Event_Object	JS - MouseEvent 객체 - 마우스움직임 (= 마우스이벤트객체 = 마우스이벤트종류)

DOM_Event_Object	JS - PageTransitionEvent 객체 - 웹페이지탐색 (= 페이지트랜지션이벤트객체 = 페이지트랜…

DOM_Event_Object	JS - PopStateEvent 객체 - 윈도우창기록변경 (= 팝스테이트이벤트객체 = 팝스테이트이벤트종류)

DOM_Event_Object	JS - ProgressEvent 객체 - 외부리소스 로드 (= 프라그레스이벤트객체 = 프라그레스이벤트종류 …

39/67

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

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

pageshow 정의

pageshow 구문

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

JavaScript 관련글

jQuery 관련글

코딩동강 관련글

HTML 관련글

CSS 관련글

PHP 관련글

SQL 관련글

Bootstrap 3 관련글

공지사항

최신글

최신댓글

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