투케이2K

117. (javascript/자바스크립트) 안드로이드 : 카카오 인앱 브라우저에서 크롬 브라우저로 이동 실시 본문

JavaScript

117. (javascript/자바스크립트) 안드로이드 : 카카오 인앱 브라우저에서 크롬 브라우저로 이동 실시

투케이2K 2021. 9. 2. 09:37
반응형

[개발 환경 설정]

개발 툴 : Edit++

개발 언어 : javascript


[소스코드]

    <!-- 내부 JS 지정 : 일반 -->
    <script>

        /* [브라우저 ready 상태 정의 : 최초 호출 상태] */
        document.addEventListener("DOMContentLoaded", ready);
        function ready(){
            console.log("");            
            console.log("[window ready] : [start]");
            console.log("");


            // [현재 접속된 url 정보 및 접속 브라우저 확인]
            // [카카오톡 인앱 브라우저 >> 안드로이드 모바일 기종 인 경우 >> 크롬 브라우저 이동 실시]
            var Url = location.href;
            var Agent = navigator.userAgent.toLowerCase();
            console.log("");            
            console.log("[window ready] : [접속 Url] : " + Url);
            console.log("[window ready] : [접속 Agent] : " + Agent);
            console.log("");
            //alert(Agent);
            if(Agent.includes("kakao")){ // 카카오 브라우저로 실행 시킨 경우
                // 먼저, 카카오 인앱 브라우저 닫기
                location.href = 'kakaotalk://inappbrowser/close';
                if(navigator.userAgent.match(/iPhone|iPad/i)){ // 아이폰 접속 경우
                    console.log("");
                    console.log("[window ready] : [접속 모바일] : " + "[아이폰]");
                    console.log("");
                }
                else { // 안드로이드 접속 경우
                    console.log("");
                    console.log("[window ready] : [접속 모바일] : " + "[안드로이드]");
                    console.log("");
                    // 크롬으로 새창 열기
                    location.href='intent://'+location.href.replace(/https?:\/\//i,'')+'#Intent;scheme=http;package=com.android.chrome;end';
                }
            }

        };


    </script>

[요약 설명]

/*

[로직 설명]

1. 사용자가 카카오톡 인앱 링크를 통해 브라우저를 접속 (카카오톡에서 브라우저 링크 클릭)

2. 자바스크립트 단에서 ready() 함수 (최초 실행 확인) 부분에서 접속한 브라우저 및 디바이스 기기를 체크

3. 접속한 브라우저가 카카오 인앱 인 경우 >> 실행 중인 카카오 인앱을 닫은 후 >> 현재 접속 url 을 크롬으로 열기

*/


 

반응형
Comments