투케이2K

535. (javaScript) [간단 소스] 자바스크립트 ms-word 스키마 호출을 통해 워드 앱 실행 및 파일 열기 수행 - open word scheme file 본문

JavaScript

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

투케이2K 2026. 5. 20. 21:49
728x90
반응형

[개발 환경 설정]

​

개발 툴 : Edit++ / Vscode

​

개발 언어 : JavaScript

​

 

[소스 코드]

​

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

- 개발 환경 : Web


- 개발 기술 : 자바스크립트 / JavaScript / navigator.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 hasUserAgent() {
        try {
          const supported = typeof navigator !== "undefined" && typeof navigator.userAgent === "string";

          return supported;
        }
        catch(exception){
          console.error('hasUserAgent : exception : ', exception);
          return false;
        }

      }



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

        try {


          // --------------------------------------
          // ✅ 브라우저 접속 환경이 윈도우 환경 인지 확인 수행
          // --------------------------------------
          if (hasUserAgent() == true){
            console.log("userAgent : 지원 됨");

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

            if (String(userAgent).toLowerCase().indexOf('windows') >= 0){ // 윈도우 환경 인 경우

              const fileUrl = 'https://twok2k.s3.ap-northeast-2.amazonaws.com/files/menu/APP_API.doc'; // 워드 파일 URL 주소 지정              

              // --------------------------------------
              // ✅ 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("userAgent : 지원 안됨");
          }

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

        }

      };
      

    </script>


</head>


<body>


</body>

</html>

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





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

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

https://kkh0977.tistory.com/8735

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


▶️ [navigator (네비게이터) 사용해 브라우저 정보 확인 실시 - userAgent , cookieEnabled]

https://kkh0977.tistory.com/853

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


▶️ [navigator platform 사용해 pc 및 모바일 접속 확인, navigator userAgent 사용해 접속한 모바일 종류 확인]

https://kkh0977.tistory.com/873

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

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

'JavaScript' 카테고리의 다른 글

537. (javaScript) [간단 소스] 자바스크립트 파일 데이터 fetch get 방식 호출 및 응답 파일 내용 읽기 , window.open 동적 html 팝업창 표시  (0) 2026.05.21
536. (javaScript) [간단 소스] 자바스크립트 AWS S3 텍스트 파일 프리사인 Url 생성 및 콘텐츠 inline 브라우저 표시 설정 - utf8 인코딩 적용  (0) 2026.05.21
534. (javaScript) [간단 소스] 자바스크립트 ms-excel 스키마 호출을 통해 엑셀 앱 실행 및 파일 열기 수행 - open excel scheme file  (0) 2026.05.20
533. (javaScript) [간단 소스] 자바스크립트 MutationObserver 사용해 실시간 textContent , innerText 텍스트 변경 감지 수행  (0) 2026.05.19
532. (javaScript) [간단 소스] 자바스크립트 MutationObserver 사용해 실시간 특정 객체 css style 스타일 변경 감지 수행  (0) 2026.05.19
'JavaScript' Related Articles more
Comments