투케이2K

190. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 userAgent 사용해 접속 브라우저 윈도우 환경 체크 및 엑셀 , 워드 스키마 앱 실행 수행 본문

투케이2K 유틸파일

190. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 userAgent 사용해 접속 브라우저 윈도우 환경 체크 및 엑셀 , 워드 스키마 앱 실행 수행

투케이2K 2026. 5. 26. 19:20
728x90
반응형

[설 명]

​

프로그램 : Web / JavaScript

​

설 명 : [Web/JavaScript] 자바스크립트 userAgent 사용해 접속 브라우저 윈도우 환경 체크 및 엑셀 , 워드 스키마 앱 실행 수행

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : Web / JavaScript / userAgent / scheme


- 사전) 👉 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% 신뢰는 불가능합니다.

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





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

<!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">      


      // -----------------------------------------------------------------
      // ✅ [navigator.userAgent 지원 여부 확인 및 윈도우 접속 환경 확인 코드]
      // -----------------------------------------------------------------      
      function isWindows() {
        try {
          const supported = typeof navigator !== "undefined" && typeof navigator.userAgent === "string";

          if (supported == true){

            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('isWindows : userAgent : ', userAgent);

            if (String(userAgent).toLowerCase().indexOf('windows') >= 0){ // 윈도우 환경 인 경우
              return true;
            }
            else {
              return false;
            }

          }
          else {
            return false;
          }
        }
        catch(exception){
          console.error('isWindows : exception : ', exception);
          return false;
        }

      }




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

        try {


          // --------------------------------------
          // ✅ 브라우저 접속 환경이 윈도우 환경 인지 확인 수행
          // --------------------------------------

          if (isWindows() == true){
            console.log("isWindows : 지원 됨");


            const fileUrl = 'https://twok2k.s3.ap-northeast-2.amazonaws.com/files/menu/APP_API.xlsx'; // 엑셀 파일 URL 주소 지정
            //const fileUrl = 'https://twok2k.s3.ap-northeast-2.amazonaws.com/files/menu/APP_API.doc'; // 워드 파일 URL 주소 지정   
            
            
            // --------------------------------------
            // ✅ ms-excel: 스키마 호출을 통해서 Excel 앱 실행 파일 열기 수행
            // --------------------------------------
            // 👉 ms-excel: 는 브라우저에서 Excel 앱을 실행시키는 전용 URI 스키마
            // 로컬에 Microsoft Excel 설치 필요
            // OS에 ms-excel: 프로토콜 등록 필요
            // 브라우저가 external protocol 허용 필요
            // --------------------------------------
            if (fileUrl.indexOf(".xlsx") >=0 || fileUrl.indexOf(".xlsm") >=0 || fileUrl.indexOf(".xlsb") >=0 || fileUrl.indexOf(".xls") >=0){
              window.location.href = `ms-excel:ofe|u|${fileUrl}`;
            } 


            // --------------------------------------
            // ✅ ms-word: 스키마 호출을 통해서 워드 앱 실행 파일 열기 수행
            // --------------------------------------
            // 👉 ms-word: 는 브라우저에서 워드 앱을 실행시키는 전용 URI 스키마
            // 로컬에 Microsoft Word 설치 필요
            // OS에 ms-word: 프로토콜 등록 필요
            // 브라우저가 external protocol 허용 필요
            // --------------------------------------
            if (fileUrl.indexOf(".doc") >=0 || fileUrl.indexOf(".docx") >=0 || fileUrl.indexOf(".docm") >=0 || fileUrl.indexOf(".dotx") >=0){
              window.location.href = `ms-word:ofe|u|${fileUrl}`;
            } 

          }
          else {
            console.error("isWindows : 지원 안됨");
          }

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

        }

      };
      

    </script>


</head>


<body>


</body>

</html>

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





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

▶️ [간단 소스] 자바스크립트 ms-excel 스키마 호출을 통해 엑셀 앱 실행 및 파일 열기 수행 - open excel scheme file

https://kkh0977.tistory.com/8839

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


▶️ [간단 소스] 자바스크립트 ms-word 스키마 호출을 통해 워드 앱 실행 및 파일 열기 수행 - open word scheme file

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

https://kkh0977.tistory.com/8840


▶️ [간단 소스] 자바스크립트 navigator.userAgent 사용해 접속한 브라우저 크롬 chrome 인지 확인 수행 - isChrome

https://kkh0977.tistory.com/8735

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

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

'투케이2K 유틸파일' 카테고리의 다른 글

189. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 AWS S3 GetPreSignedUrl 프리사인 URL 생성 시 inline 브라우저 표시 설정 방법  (0) 2026.05.20
188. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 SweetAlert 라이브러리 사용해 showAlert , showList , showEdit 팝업창 표시  (0) 2026.05.02
187. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 Deep Proxy (재귀 Proxy) JSON 객체 상태 변경 이벤트 감지 - 전체 데이터 변경 감지  (0) 2026.04.14
186. (TWOK/UTIL) [Web/JavaScript] Toastify.js 라이브러리 사용해 웹 브라우저 토스트 메시지 표시 파일  (0) 2026.04.10
185. (TWOK/UTIL) [Web/JavaScript] AWS 관리자 대시 보드 만들기 기본 Web Template 템플릿 포맷 HTML 파일  (0) 2026.04.09
'투케이2K 유틸파일' Related Articles more
Comments