투케이2K

361. (javaScript) [간단 소스] 자바스크립트 window.performance.getEntriesByType navigation 사용해 페이지 접속 타입 확인 본문

JavaScript

361. (javaScript) [간단 소스] 자바스크립트 window.performance.getEntriesByType navigation 사용해 페이지 접속 타입 확인

투케이2K 2024. 10. 16. 18:49

[개발 환경 설정]

개발 툴 : Edit++

개발 언어 : JavaScript

 

[소스 코드]

 



-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web

- 개발 기술 : JavaScript (자바스크립트)

- window.performance.getEntriesByType 설명 : 페이지에 대한 타입 정보를 사용할 때 사용할 수 있습니다

- window.performance.getEntriesByType('navigation')?.[0]?.type 종류 : 

  >> navigate : a태그 및 location.href 로 페이지 접속한 경우

  >> reload : 새로고침으로 페이지 접속한 경우

  >> back_forward : 뒤로가기로 페이지 재접속한 경우

  >> prerender : 사전 렌더링 때 확인 시 표시되는 값

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

    window.onload = function() {
        console.log("");
        console.log("=========================================");
        console.log("[window onload] : [start]");
        console.log("-------------------------------------");
        console.log("[Page Open Type] : " + window.performance.getEntriesByType('navigation')?.[0]?.type);
        console.log("=========================================");
        console.log("");
    };

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[결과 출력]
-----------------------------------------------------------------------------------------

=========================================
[window onload] : [start]
-------------------------------------
[Page Open Type] : back_forward
=========================================

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[Web Doc 사이트]

https://developer.mozilla.org/en-US/docs/Web/API/Performance/getEntriesByType

-----------------------------------------------------------------------------------------

​

 

반응형
Comments