투케이2K

541. (javaScript) [간단 소스] 자바스크립트 resize 이벤트 사용해 개발자 모드 진입 상태 확인 location.href blank 표시 소스 코드 숨김 설정 본문

JavaScript

541. (javaScript) [간단 소스] 자바스크립트 resize 이벤트 사용해 개발자 모드 진입 상태 확인 location.href blank 표시 소스 코드 숨김 설정

투케이2K 2026. 5. 28. 21:13
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : 자바스크립트 / JavaScript / resize / location.href


- 사전) 👉 navigator.userAgent 간략 설명 :  

  >> navigator.userAgent 는 👉 브라우저와 OS 정보를 담은 문자열입니다.

  >> navigator.userAgent 는 브라우저가 서버나 JS에게 "나는 이런 환경이야" 라고 알려주는 값입니다.

  >> navigator.userAgent 호출 시 표시 되는 예시 값 

    - Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

  >> 주의점 : 

    - navigator.userAgent 는 사용자나 브라우저가 쉽게 변경 가능하며, 100% 신뢰는 불가능합니다.


- 사전) 👉 window.screen.availWidth 간략 설명 : 

  >> window.screen.availWidth 는 사용자의 화면 (Screen) 에서 실제로 웹 브라우저가 사용 가능한 가로 너비 (px) 를 의미하는 JavaScript 속성입니다.

    - window.screen : 사용자의 디스플레이(모니터) 정보를 담고 있는 객체
    - availWidth : OS UI 요소(작업 표시줄, Dock 등)를 제외한 실제 사용 가능한 가로 길이

  >> window.screen.availWidth 는 전체 화면 폭(screen.width)과는 다르게 다음 요소를 제외합니다.

    - Windows 작업 표시줄(Taskbar)
    - macOS Dock
    - 기타 OS 레벨 UI 영역
    - 즉, 사용자가 앱/브라우저를 표시할 수 있는 최대 가로 공간입니다.

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





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

<!DOCTYPE HTML>
<html lang="ko" translate="no">
<head>
    <title>javaScriptTest</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 반응형 구조 만들기 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

    <!-- Chrome / Edge (Chromium)에서 자동 번역 기능을 완전히 비활성화 -->
    <meta name="google" content="notranslate">

    <!-- 내부 CSS 스타일 지정 -->
    <style>

      html, body {
        width: 100%;
        height: 100%;
        margin : 0 auto;
        padding : 0;
        border : none;
        background-color: #666;
      } 

    </style>





    <!-- [CDN 주소 설정] --> 
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>






    <!-- [자바스크립트 코드 지정] -->
    <script type="module"> 

      // -----------------------------------------------------------------
      // ✅ [Window.onload 웹 브라우저 로드 완료]
      // -----------------------------------------------------------------
      window.onload = async function() {
        console.log("[window onload] : [html 최초 로드 및 이벤트 상시 대기 실시] : [start]");

        try {

          // --------------------------------------
          // ✅ 브라우저 사이즈 변경 감지를 위한 플래그값 선언
          // --------------------------------------
          const BROWSER_SIZE_CHANGE_FLAG = true; // true = 사이즈 변경 감지 / false = 사이즈 변경 감지 안함
          var resizeTimer = null;


          // --------------------------------------
          // ✅ 현재 브라우저 사이즈 확인 및 userAgent 값 확인 수행
          // --------------------------------------
          var width = window.screen.availWidth;    // 작업표시줄/독 등을 제외한 가용 너비
          const height = window.screen.availHeight;   // 가용 높이
          const userAgent = navigator.userAgent; // 윈도우 크롬 브라우저에서 출력 되는 예시 로그 : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

          console.log('init : userAgent : ', userAgent);
          console.log('init : width : ', width);
          console.log('init : height : ', height);          


          // --------------------------------------
          // ✅ BROWSER_SIZE_CHANGE_FLAG 플래그 값에 따라서 브라우저 사이즈 변경 이벤트 감지 리스너 등록
          // --------------------------------------
          if (BROWSER_SIZE_CHANGE_FLAG == true) { // 운영 모드 인 경우

            try {
                          
              window.addEventListener('resize', () => {
                const reSizeWidth = window.screen.availWidth;  
                const reSizeHeight = window.screen.availHeight;
                const reSizeUserAgent = navigator.userAgent;

                // --------------------------------------
                // ✅ 초기 진입한 브라우저 사이즈와 변경 되고 userAgent 값이 모바일이 포함되는 경우 (개발자모드 진입한 경우)
                // --------------------------------------
                const sizeChange = width - reSizeWidth;

                // 👉 브라우저 초기 실행 로그 : [window onresize] : [running] :  1920  /  1032  /  0  /  Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
                // 👉 개발자 모드 진입 시 변경 로그 : [window onresize] : [running] :  941  /  922  /  979  /  Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Mobile Safari/537.36
                console.log("[window onresize] : [running] : ", reSizeWidth, " / ", reSizeHeight, " / ", sizeChange, " / ", reSizeUserAgent);


                const android = reSizeUserAgent.toLowerCase().search("android");
                const iphone = reSizeUserAgent.toLowerCase().search("iphone");

                // 기존 타이머 제거
                if (resizeTimer) {
                  clearTimeout(resizeTimer);
                  resizeTimer = null;
                }

                // 특정 시간 동안 변화 없으면 실행
                resizeTimer = setTimeout(() => {
                  console.log('resizeTimer : start');

                  if (resizeTimer !== null){
                    
                    if ( (android >= 0 || iphone >= 0) && (width != reSizeWidth) ) { // 모바일 타입 접속이고, 사이즈가 변경된 경우
                      console.warn("Event Alert : Mobile Or DevTool");

                      //window.location.href = "about:blank"; // 🟦 빈창 이동 수행

                      window.location.replace('about:blank'); // 🟦 히스토리에 남기지 않고 교체                      

                    } 
                    else {
                      console.warn("Event Alert : None"); 

                      width = reSizeWidth; // 🟦 새로 비교 값 삽입 (개발자 툴에서 > PC 전환 경우)
                    }

                  }                    
                }, 50);

              });

            }
            catch(err){
              console.error("BROWSER_SIZE_CHANGE_FLAG : Exception : ", err);
            }
          }

        }
        catch (exception) {
          console.error("[window onload] : [Exception] : ❌ 예외 상황 발생 : ", exception);

        }

      };
      

    </script>


</head>


<body>


</body>

</html>

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





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

▶️ [간단 소스] 자바스크립트 Web 웹 크롬 브라우저 키이벤트 및 마우스 우클릭 이벤트 감지 개발자 도구 진입 막기 코드

https://kkh0977.tistory.com/8669

https://blog.naver.com/kkh0977/224202975940


▶️ [간단 소스] 자바스크립트 접속 한 브라우저 환경이 윈도우 환경 인지 확인 - is windows browser

https://kkh0977.tistory.com/8846

https://blog.naver.com/kkh0977/224294530021


▶️ [실시간 브라우저 크기 사이즈 변경 감지 - resize , screen 객체 availWidth , availHeight 사용]

https://kkh0977.tistory.com/971

https://blog.naver.com/kkh0977/222428346030?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------
 
728x90
반응형
저작자표시 (새창열림)

'JavaScript' 카테고리의 다른 글

542. (javaScript) [간단 소스] 자바스크립트 sweetAlert 및 qrcode 라이브러리 사용해 QR 코드 표시 팝업창 생성 수행  (0) 2026.05.29
540. (javaScript) [간단 소스] 자바스크립트 Proxy 사용해 콘솔 로그 출력 막기 수행 - console log, debug, info, warn, error  (0) 2026.05.28
539. (javaScript) [간단 소스] 자바스크립트 ms-powerpoint 스키마 호출을 통해 파워포인트 앱 실행 및 파일 열기 수행 - open scheme file  (0) 2026.05.27
538. (javaScript) [간단 소스] 자바스크립트 접속 한 브라우저 환경이 윈도우 환경 인지 확인 - is windows browser  (0) 2026.05.23
537. (javaScript) [간단 소스] 자바스크립트 파일 데이터 fetch get 방식 호출 및 응답 파일 내용 읽기 , window.open 동적 html 팝업창 표시  (0) 2026.05.21
'JavaScript' Related Articles more
Comments