49. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 (JavaScript) Android , Ios 통신 HTML 코드 정리

Notice
Recent Posts
Recent Comments
Link
« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31
Tags more
Archives
Today
Total
관리 메뉴
투케이2K

49. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 (JavaScript) Android , Ios 통신 HTML 코드 정리 본문

투케이2K 유틸파일
49. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 (JavaScript) Android , Ios 통신 HTML 코드 정리

투케이2K 2022. 6. 8. 10:38
[설 명]
프로그램 : Web / JavaScript
설 명 : 자바스크립트 (JavaScript) Android , Ios 통신 HTML 코드 정리
[소스 코드]
<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>WebTest</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">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
    




    <!-- [자바 스크립트 및 j쿼리 파일] -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 




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


        /* [전체 설정 실시] */
    	* {
            font-family : 'Noto Sans KR' , sans-serif;           
            margin : 0;
            padding : 0;
    	}
    	




        /* [html , body 설정] */
        html, body{			
            width : 100%;          
            height : 100%;
            margin : 0 auto;
            padding : 0;
            border : none;         

            /* [모바일 스크롤 시 부드럽게 처리] */
            overflow:scroll-y; 
            -webkit-overflow-scrolling:touch;
        }
        /* [body 스크롤바 메인 스타일 지정] */
        body::-webkit-scrollbar {           
            width: 20px;                 
            background-color: #c1c1c1;
        }
        /* [body 스크롤바 thumb 스타일 지정] */
        body::-webkit-scrollbar-thumb {                 
            background-color: #444444;
        }





        /* [div 공통 스타일 지정 클래스] : [타이틀 영역] : [p 태그 결합] */
        .divTagTitleClass {
            width : 100%;
            height : 15%;
            margin : 0 auto;
            padding : 0;
            border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }





        /* [div 공통 스타일 지정 클래스] : [콘텐츠 영역] : [p 태그 결합] */
        .divTagContentHeightLargeClass {
            width : 80%;
            height : 70%;
            margin : 0 auto;
            padding : 0;
            border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }

        



        /* [div 공통 스타일 지정 클래스] : [콘텐츠 영역] : [p 태그 결합] */
        .divTagContentHeightMiddleClass {
            width : 80%;
            height : 50%;
            margin : 0 auto;
            padding : 0;
            border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }





        /* [div 공통 스타일 지정 클래스] : [콘텐츠 영역] : [p 태그 결합] */
        .divTagContentHeightSmallClass {
            width : 80%;
            height : 20%;
            margin : 0 auto;
            padding : 0;
            border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }





        /* [div 공통 스타일 지정 클래스] : [콘텐츠 영역] : [p 태그 결합] */
        .divTagContentWidthFullClass {
            width : 100%;
            height : 20%;
            margin : 0 auto;
            padding : 0;
            border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }





        /* [div 공통 스타일 지정 클래스] : [콘텐츠 영역] : [p 태그 결합] */
        .divTagContentWidthLargeClass {
            width : 80%;
            height : 20%;
            margin : 0 auto;
            padding : 0;
            border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }

        



        /* [div 공통 스타일 지정 클래스] : [콘텐츠 영역] : [p 태그 결합] */
        .divTagContentWidthMiddleClass {
        	width : 60%;
        	height : 20%;
        	margin : 0 auto;
        	padding : 0;
        	border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }





        /* [div 공통 스타일 지정 클래스] : [콘텐츠 영역] : [p 태그 결합] */
        .divTagContentWidthSmallClass {
            width : 40%;
            height : 20%;
            margin : 0 auto;
            padding : 0;
            border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }





        /* [p 태그 공통 스타일 지정 클래스] : [콘텐츠 영역] : [div 결합] */
        .pTagContentLargeClass {
            color : #ffffff;
            text-align : center;
            font-size : 150%;
            font-weight : bold;

            /* [div 태그 내에서 텍스트 정렬] */
            display : table-cell;
            vertical-align : middle;
        } 





        /* [p 태그 공통 스타일 지정 클래스] : [콘텐츠 영역] : [div 결합] */
        .pTagContentMiddleClass {
            color : #ffffff;
            text-align : center;
            font-size : 120%;
            font-weight : bold;

            /* [div 태그 내에서 텍스트 정렬] */
            display : table-cell;
            vertical-align : middle;
        }   





        /* [p 태그 공통 스타일 지정 클래스] : [콘텐츠 영역] : [div 결합] */
        .pTagContentSmallClass {
            color : #ffffff;
            text-align : center;
            font-size : 70%;
            font-weight : bold;

            /* [div 태그 내에서 텍스트 정렬] */
            display : table-cell;
            vertical-align : middle;
        }





        /* [p 태그 공통 스타일 지정 클래스] : [텍스트 히든 처리] : [div 결합] */
        .pTagHiddenContentLargeClass {
            color : #ffffff;
            text-align : center;
            font-size : 150%;
            font-weight : bold;

            /* [div 태그 내에서 텍스트 정렬] */
            display : table-cell;
            vertical-align : middle;

            /* [p 태그 텍스트 내용 길면 숨김 처리] */
            overflow : hidden;
            text-overflow : ellipsis;
            white-space : nowrap;
        } 





        /* [p 태그 공통 스타일 지정 클래스] : [텍스트 히든 처리] : [div 결합] */
        .pTagHiddenContentMiddleClass {
            color : #ffffff;
            text-align : center;
            font-size : 120%;
            font-weight : bold;

            /* [div 태그 내에서 텍스트 정렬] */
            display : table-cell;
            vertical-align : middle;

            /* [p 태그 텍스트 내용 길면 숨김 처리] */
            overflow : hidden;
            text-overflow : ellipsis;
            white-space : nowrap;
        }   





        /* [p 태그 공통 스타일 지정 클래스] : [텍스트 히든 처리] : [div 결합] */
        .pTagHiddenContentSmallClass {
            color : #ffffff;
            text-align : center;
            font-size : 70%;
            font-weight : bold;

            /* [div 태그 내에서 텍스트 정렬] */
            display : table-cell;
            vertical-align : middle;

            /* [p 태그 텍스트 내용 길면 숨김 처리] */
            overflow : hidden;
            text-overflow : ellipsis;
            white-space : nowrap;   
        }
        
        
        
        
        
        /* [a 태그 공통 스타일 지정 클래스] */
        .aTagClass {
            text-align : center;
            font-size : 120%;
            font-weight : bold;
            
            /* [div 태그 내에서 텍스트 정렬] */
            display : table-cell;
            vertical-align : middle;

            /* [p 태그 텍스트 내용 길면 숨김 처리] */
            overflow : hidden;
            text-overflow : ellipsis;
            white-space : nowrap; 
        }
                     
    </style>
    




    <!-- [내부 자바스크립트 J쿼리 이벤트 지정] -->    
    <script>
        
        
        // ================= [자바스크립트 라이프 사이클 및 상태 변경 감지 부분] =================

        /* [dom 생성 및 이벤트 상시 대기 실시] */
        document.addEventListener("DOMContentLoaded", ready);
        function ready(){
            console.log("");
            console.log("[window ready] : [start]");            
            console.log("");
        }





        /* [html 최초 로드 및 이벤트 상시 대기 실시] */
        window.onload = function() {
            console.log("");
            console.log("[window onload] : [start]");
            console.log(""); 
        };





        /* [html 화면 사이즈 변경 이벤트 감지] */
        window.onresize = function() {
            console.log("");
            console.log("[window onresize] : [start]");
            console.log(""); 
        };
        
        
        
        
        
        // ================= [자바스크립트 통신 보내는 부분 : JS >> MOBILE] =================
        
        
        
        
        
        /* [자바스크립트 브릿지 정의] */
        function system(){
            console.log("");
            console.log("[system] : [start]");
            console.log("설 명 : JS > MOBILE 호출 실시 : 일반 함수 호출");
            console.log("");
            
            // [접속 한 디바이스 확인 실시]
            var uagent = navigator.userAgent.toLowerCase();
            var android_agent = uagent.search("android");
            var iphone = uagent.search("iphone");
            var ipad = uagent.search("ipad");
            
            
            // [접속 디바이스 분기 처리 전송 실시]
            if (android_agent > -1) {
                console.log("");
                console.log("[system] : [안드로이드 로직 수행]");
                console.log("");

                // [window.경로]
                window.android.system(); // [일반 함수 호출]
            }
            else if (iphone > -1 || ipad > -1) {
                console.log("");
                console.log("[system] : [아이폰 로직 수행]");
                console.log("");
                
                window.webkit.messageHandlers.system.postMessage(""); // [일반 함수 호출]
            }
            else {
                console.log("");
                console.log("[system] : [PC 로직 수행]");
                console.log("");
                
                alert('[PC] 환경에서는 자바스크립트 통신 테스트를 할 수 없습니다.');
            }
        };
        
        
        
        
        
        /* [자바스크립트 브릿지 정의] */
        function setAccount(){
            console.log("");
            console.log("[setAccount] : [start]");
            console.log("설 명 : JS > MOBILE 호출 실시 : JSON 전송");
            console.log("");
            
            // [접속 한 디바이스 확인 실시]
            var uagent = navigator.userAgent.toLowerCase();
            var android_agent = uagent.search("android");
            var iphone = uagent.search("iphone");
            var ipad = uagent.search("ipad");
            
            
            // [JSON 객체 선언 실시]
            var jsonObj = new Object();
            
            
            // [데이터 삽입 실시]
            jsonObj["uid"] = "20131575";
            jsonObj["upw"] = "admin1234";
            jsonObj["autoLogin"] = "Y";
            jsonObj["iddi"] = String(1);
            jsonObj["loadTime"] = String(30);
            
            
            // [접속 디바이스 분기 처리 전송 실시]
            if (android_agent > -1) {
                console.log("");
                console.log("[setAccount] : [안드로이드 로직 수행]");
                console.log("");

                // [window.경로]
                window.android.setAccount(JSON.stringify(jsonObj)); // [JSON 전송]
            }
            else if (iphone > -1 || ipad > -1) {
                console.log("");
                console.log("[setAccount] : [아이폰 로직 수행]");
                console.log("");

                window.webkit.messageHandlers.setAccount.postMessage(JSON.stringify(jsonObj)); // [JSON 전송]
            }
            else {
                console.log("");
                console.log("[setAccount] : [PC 로직 수행]");
                console.log("");
                
                alert('[PC] 환경에서는 자바스크립트 통신 테스트를 할 수 없습니다.');
            }
        };
        
        
        
        
        
        /* [자바스크립트 브릿지 정의] */
        function setAutoLogin(){
            console.log("");
            console.log("[setAutoLogin] : [start]");
            console.log("설 명 : JS > MOBILE 호출 실시 : String 전송");
            console.log("");
            
            // [접속 한 디바이스 확인 실시]
            var uagent = navigator.userAgent.toLowerCase();
            var android_agent = uagent.search("android");
            var iphone = uagent.search("iphone");
            var ipad = uagent.search("ipad");
            
            
            // [변수 선언 실시]
            var strData = "Y";
            
            
            // [접속 디바이스 분기 처리 전송 실시]
            if (android_agent > -1) {
                console.log("");
                console.log("[setAutoLogin] : [안드로이드 로직 수행]");
                console.log("");

                // [window.경로]
                window.android.setAutoLogin(String(strData)); // [String 전송]
            }
            else if (iphone > -1 || ipad > -1) {
                console.log("");
                console.log("[setAutoLogin] : [아이폰 로직 수행]");
                console.log("");

                window.webkit.messageHandlers.setAutoLogin.postMessage(String(strData)); // [String 전송]
            }
            else {
                console.log("");
                console.log("[setAutoLogin] : [PC 로직 수행]");
                console.log("");
                
                alert('[PC] 환경에서는 자바스크립트 통신 테스트를 할 수 없습니다.');
            }
        };
        
        
        
        
        
        /* [자바스크립트 브릿지 정의] */
        function setShake(){
            console.log("");
            console.log("[setShake] : [start]");
            console.log("설 명 : JS > MOBILE 호출 실시 : String 전송");
            console.log("");
            
            // [접속 한 디바이스 확인 실시]
            var uagent = navigator.userAgent.toLowerCase();
            var android_agent = uagent.search("android");
            var iphone = uagent.search("iphone");
            var ipad = uagent.search("ipad");
            
            
            // [변수 선언 실시]
            var strData = "N";
            
            
            // [접속 디바이스 분기 처리 전송 실시]
            if (android_agent > -1) {
                console.log("");
                console.log("[setShake] : [안드로이드 로직 수행]");
                console.log("");

                // [window.경로]
                window.android.setShake(String(strData)); // [String 전송]
            }
            else if (iphone > -1 || ipad > -1) {
                console.log("");
                console.log("[setShake] : [아이폰 로직 수행]");
                console.log("");

                window.webkit.messageHandlers.setShake.postMessage(String(strData)); // [String 전송]
            }
            else {
                console.log("");
                console.log("[setShake] : [PC 로직 수행]");
                console.log("");
                
                alert('[PC] 환경에서는 자바스크립트 통신 테스트를 할 수 없습니다.');
            }
        };
        
        
        
        
        
        /* [자바스크립트 브릿지 정의] */
        function setOpenUrl(){
            console.log("");
            console.log("[setOpenUrl] : [start]");
            console.log("설 명 : JS > MOBILE 호출 실시 : String 전송");
            console.log("");
            
            // [접속 한 디바이스 확인 실시]
            var uagent = navigator.userAgent.toLowerCase();
            var android_agent = uagent.search("android");
            var iphone = uagent.search("iphone");
            var ipad = uagent.search("ipad");
            
            
            // [변수 선언 실시]
            var strData = "https://www.naver.com";
            
            
            // [접속 디바이스 분기 처리 전송 실시]
            if (android_agent > -1) {
                console.log("");
                console.log("[setOpenUrl] : [안드로이드 로직 수행]");
                console.log("");

                // [window.경로]
                window.android.setOpenUrl(String(strData)); // [String 전송]
            }
            else if (iphone > -1 || ipad > -1) {
                console.log("");
                console.log("[setOpenUrl] : [아이폰 로직 수행]");
                console.log("");

                window.webkit.messageHandlers.setOpenUrl.postMessage(String(strData)); // [String 전송]
            }
            else {
                console.log("");
                console.log("[setOpenUrl] : [PC 로직 수행]");
                console.log("");
                
                alert('[PC] 환경에서는 자바스크립트 통신 테스트를 할 수 없습니다.');
            }
        };
        
        
        
        
        
        /* [자바스크립트 브릿지 정의] */
        function setInnerUrl(){
            console.log("");
            console.log("[setInnerUrl] : [start]");
            console.log("설 명 : JS > MOBILE 호출 실시 : String 전송");
            console.log("");
            
            // [접속 한 디바이스 확인 실시]
            var uagent = navigator.userAgent.toLowerCase();
            var android_agent = uagent.search("android");
            var iphone = uagent.search("iphone");
            var ipad = uagent.search("ipad");
            
            
            // [변수 선언 실시]
            var strData = "https://www.google.com";
            
            
            // [접속 디바이스 분기 처리 전송 실시]
            if (android_agent > -1) {
                console.log("");
                console.log("[setInnerUrl] : [안드로이드 로직 수행]");
                console.log("");

                // [window.경로]
                window.android.setInnerUrl(String(strData)); // [String 전송]
            }
            else if (iphone > -1 || ipad > -1) {
                console.log("");
                console.log("[setInnerUrl] : [아이폰 로직 수행]");
                console.log("");

                window.webkit.messageHandlers.setInnerUrl.postMessage(String(strData)); // [String 전송]
            }
            else {
                console.log("");
                console.log("[setInnerUrl] : [PC 로직 수행]");
                console.log("");
                
                alert('[PC] 환경에서는 자바스크립트 통신 테스트를 할 수 없습니다.');
            }
        };
        
        
        
        
        
        /* [자바스크립트 브릿지 정의] */
        function openUrlScheme(){
            console.log("");
            console.log("[openUrlScheme] : [start]");
            console.log("설 명 : JS > MOBILE 호출 실시 : JSON 전송");
            console.log("");
            
            // [접속 한 디바이스 확인 실시]
            var uagent = navigator.userAgent.toLowerCase();
            var android_agent = uagent.search("android");
            var iphone = uagent.search("iphone");
            var ipad = uagent.search("ipad");
            
            
            // [JSON 객체 선언 실시]
            var jsonObj = new Object();
            
            
            // [JSON 객체 선언 실시]
            var androidObj = new Object();
            androidObj["package"] = "com.android.chrome";
            androidObj["appScheme"] = "googlechrome://call?name=test";
            
            
            // [JSON 객체 선언 실시]
            var iosObj = new Object();
            iosObj["id"] = "id535886823";
            iosObj["appScheme"] = "googlechrome://call?name=test";
            
            
            // [전체 데이터에 삽입 실시]
            jsonObj["android"] = androidObj;
            jsonObj["ios"] = iosObj;
            
            
            // [접속 디바이스 분기 처리 전송 실시]
            if (android_agent > -1) {
                console.log("");
                console.log("[openUrlScheme] : [안드로이드 로직 수행]");
                console.log("");

                // [window.경로]
                window.android.openUrlScheme(JSON.stringify(jsonObj)); // [JSON 전송]
            }
            else if (iphone > -1 || ipad > -1) {
                console.log("");
                console.log("[openUrlScheme] : [아이폰 로직 수행]");
                console.log("");

                window.webkit.messageHandlers.openUrlScheme.postMessage(JSON.stringify(jsonObj)); // [JSON 전송]
            }
            else {
                console.log("");
                console.log("[openUrlScheme] : [PC 로직 수행]");
                console.log("");
                
                alert('[PC] 환경에서는 자바스크립트 통신 테스트를 할 수 없습니다.');
            }
        };
        
        
        
        
        
        /* [자바스크립트 브릿지 정의] */
        function openAppRun(){
            console.log("");
            console.log("[openAppRun] : [start]");
            console.log("설 명 : JS > MOBILE 호출 실시 : JSON 전송");
            console.log("");
            
            // [접속 한 디바이스 확인 실시]
            var uagent = navigator.userAgent.toLowerCase();
            var android_agent = uagent.search("android");
            var iphone = uagent.search("iphone");
            var ipad = uagent.search("ipad");
            
            
            // [JSON 객체 선언 실시]
            var jsonObj = new Object();
            
            
            // [JSON 객체 선언 실시]
            var androidObj = new Object();
            androidObj["package"] = "com.android.chrome";
            
            
            // [JSON 객체 선언 실시]
            var iosObj = new Object();
            iosObj["id"] = "id535886823";
            iosObj["appScheme"] = "googlechrome://"; 
            
            
            // [전체 데이터에 삽입 실시]
            jsonObj["android"] = androidObj;
            jsonObj["ios"] = iosObj;
            
            
            // [접속 디바이스 분기 처리 전송 실시]
            if (android_agent > -1) {
                console.log("");
                console.log("[openAppRun] : [안드로이드 로직 수행]");
                console.log("");

                // [window.경로]
                window.android.openAppRun(JSON.stringify(jsonObj)); // [JSON 전송]
            }
            else if (iphone > -1 || ipad > -1) {
                console.log("");
                console.log("[openAppRun] : [아이폰 로직 수행]");
                console.log("");

                window.webkit.messageHandlers.openAppRun.postMessage(JSON.stringify(jsonObj)); // [JSON 전송]
            }
            else {
                console.log("");
                console.log("[openAppRun] : [PC 로직 수행]");
                console.log("");
                
                alert('[PC] 환경에서는 자바스크립트 통신 테스트를 할 수 없습니다.');
            }
        };
        
        
        
        
        
        /* [자바스크립트 브릿지 정의] */
        function setMarket(){
            console.log("");
            console.log("[setMarket] : [start]");
            console.log("설 명 : JS > MOBILE 호출 실시 : JSON 전송");
            console.log("");
            
            // [접속 한 디바이스 확인 실시]
            var uagent = navigator.userAgent.toLowerCase();
            var android_agent = uagent.search("android");
            var iphone = uagent.search("iphone");
            var ipad = uagent.search("ipad");
            
            
            // [JSON 객체 선언 실시]
            var jsonObj = new Object();
            
            
            // [JSON 객체 선언 실시]
            var androidObj = new Object();
            androidObj["package"] = "com.android.chrome";
            
            
            // [JSON 객체 선언 실시]
            var iosObj = new Object();
            iosObj["id"] = "id535886823";
            
            
            // [전체 데이터에 삽입 실시]
            jsonObj["android"] = androidObj;
            jsonObj["ios"] = iosObj;
            
            
            // [접속 디바이스 분기 처리 전송 실시]
            if (android_agent > -1) {
                console.log("");
                console.log("[setMarket] : [안드로이드 로직 수행]");
                console.log("");

                // [window.경로]
                window.android.setMarket(JSON.stringify(jsonObj)); // [JSON 전송]
            }
            else if (iphone > -1 || ipad > -1) {
                console.log("");
                console.log("[setMarket] : [아이폰 로직 수행]");
                console.log("");

                window.webkit.messageHandlers.setMarket.postMessage(JSON.stringify(jsonObj)); // [JSON 전송]
            }
            else {
                console.log("");
                console.log("[setMarket] : [PC 로직 수행]");
                console.log("");
                
                alert('[PC] 환경에서는 자바스크립트 통신 테스트를 할 수 없습니다.');
            }
        };
        
        
        
        
        
        /* [자바스크립트 브릿지 정의] */
        function copyData(){
            console.log("");
            console.log("[copyData] : [start]");
            console.log("설 명 : JS > MOBILE 호출 실시 : String 전송");
            console.log("");
            
            // [접속 한 디바이스 확인 실시]
            var uagent = navigator.userAgent.toLowerCase();
            var android_agent = uagent.search("android");
            var iphone = uagent.search("iphone");
            var ipad = uagent.search("ipad");
            
            
            // [변수 선언 실시]
            var strData = "복사할 데이터입니다.";
            
            
            // [접속 디바이스 분기 처리 전송 실시]
            if (android_agent > -1) {
                console.log("");
                console.log("[copyData] : [안드로이드 로직 수행]");
                console.log("");

                // [window.경로]
                window.android.copyData(String(strData)); // [String 전송]
            }
            else if (iphone > -1 || ipad > -1) {
                console.log("");
                console.log("[setInnerUrl] : [아이폰 로직 수행]");
                console.log("");

                window.webkit.messageHandlers.copyData.postMessage(String(strData)); // [String 전송]
            }
            else {
                console.log("");
                console.log("[copyData] : [PC 로직 수행]");
                console.log("");
                
                alert('[PC] 환경에서는 자바스크립트 통신 테스트를 할 수 없습니다.');
            }
        };
        
        
        
        
        
        /* [자바스크립트 브릿지 정의] */
        function Simple(){
            console.log("");
            console.log("[Simple] : [start]");
            console.log("설 명 : JS > MOBILE 호출 실시 : JSON 전송");
            console.log("");
            
            // [접속 한 디바이스 확인 실시]
            var uagent = navigator.userAgent.toLowerCase();
            var android_agent = uagent.search("android");
            var iphone = uagent.search("iphone");
            var ipad = uagent.search("ipad");
            
            
            // [JSON 객체 선언 실시]
            var jsonObj = new Object();
            
            
            // [데이터에 삽입 실시]
            jsonObj["simple"] = "test1234";
            
            
            // [접속 디바이스 분기 처리 전송 실시]
            if (android_agent > -1) {
                console.log("");
                console.log("[Simple] : [안드로이드 로직 수행]");
                console.log("");

                // [window.경로]
                window.android.qrData(JSON.stringify(jsonObj)); // [JSON 전송]
            }
            else if (iphone > -1 || ipad > -1) {
                console.log("");
                console.log("[Simple] : [아이폰 로직 수행]");
                console.log("");

                window.webkit.messageHandlers.qrData.postMessage(JSON.stringify(jsonObj)); // [JSON 전송]
            }
            else {
                console.log("");
                console.log("[Simple] : [PC 로직 수행]");
                console.log("");
                
                alert('[PC] 환경에서는 자바스크립트 통신 테스트를 할 수 없습니다.');
            }
        };
        
        
        
        
        
        /* [자바스크립트 브릿지 정의] */
        function Mobile(){
            console.log("");
            console.log("[Mobile] : [start]");
            console.log("설 명 : JS > MOBILE 호출 실시 : JSON 전송");
            console.log("");
            
            // [접속 한 디바이스 확인 실시]
            var uagent = navigator.userAgent.toLowerCase();
            var android_agent = uagent.search("android");
            var iphone = uagent.search("iphone");
            var ipad = uagent.search("ipad");
            
            
            // [JSON 객체 선언 실시]
            var jsonObj = new Object();
            
            
            // [데이터에 삽입 실시]
            jsonObj["univ"] = "TUV";
            jsonObj["iddi"] = "1";
            jsonObj["idno"] = "20131575";
            jsonObj["chasu"] = "2";
            jsonObj["time"] = "20220608091005";
            
            
            // [접속 디바이스 분기 처리 전송 실시]
            if (android_agent > -1) {
                console.log("");
                console.log("[Mobile] : [안드로이드 로직 수행]");
                console.log("");

                // [window.경로]
                window.android.qrData(JSON.stringify(jsonObj)); // [JSON 전송]
            }
            else if (iphone > -1 || ipad > -1) {
                console.log("");
                console.log("[Mobile] : [아이폰 로직 수행]");
                console.log("");

                window.webkit.messageHandlers.qrData.postMessage(JSON.stringify(jsonObj)); // [JSON 전송]
            }
            else {
                console.log("");
                console.log("[Mobile] : [PC 로직 수행]");
                console.log("");
                
                alert('[PC] 환경에서는 자바스크립트 통신 테스트를 할 수 없습니다.');
            }
        };
        
        
        
        
        
        // ================= [자바스크립트 통신 받는 부분 : MOBILE >> JS] =================
        
        

        
        
        /* [자바스크립트 브릿지 정의] */
        function setSystem(inputJson){
            console.log("");
            console.log("[setSystem] : [start]");
            console.log("설 명 : MOBILE > JS 호출 실시 : Json 함수 호출");
            console.log("타입 체크 : " + String(typeof inputJson).toLowerCase());
            console.log("inputJson : " + JSON.stringify(inputJson));
            console.log("");
            
            // [사전 인풋 값 널 체크 수행 실시]
            if (inputJson != null && String(typeof inputJson).toLowerCase() != "undefined" && JSON.stringify(inputJson) != "null") {
            }
            else {
                console.log("");
                console.log("[setSystem] : [인풋 값 널 데이터 에러]");
                console.log("");

                alert("[setSystem] : [ERROR] : [INPUT DATA IS NULL]");
                return;
            }
            
            
            // [접속 한 디바이스 확인 실시]
            var uagent = navigator.userAgent.toLowerCase();
            var android_agent = uagent.search("android");
            var iphone = uagent.search("iphone");
            var ipad = uagent.search("ipad");
            
            
            // [접속 디바이스 분기 처리 json 데이터 확인 실시]
            var deviceSort = "";
            var jsonValue = "";
            
            if (android_agent > -1) {
                console.log("");
                console.log("[setSystem] : [안드로이드 로직 수행]");
                console.log("");
                
                // [디바이스 확인]
                deviceSort = "[Android]";

                // [변수에 삽입 실시]
                jsonValue = inputJson;
            }
            else if (iphone > -1 || ipad > -1) {
                console.log("");
                console.log("[setSystem] : [아이폰 로직 수행]");
                console.log("");
                
                // [디바이스 확인]
                deviceSort = "[Ios]";

                if (String(typeof inputJson).toLowerCase() == "object") { // [Json 데이터 처리]
                    jsonValue = JSON.stringify(inputJson);
                }
                else { // [String 데이터 처리]
                    jsonValue = listData;
                }
            }
            else {
                console.log("");
                console.log("[setSystem] : [PC 로직 수행]");
                console.log("");
                
                // [디바이스 확인]
                deviceSort = "[PC]";

                alert('[PC] 환경에서는 자바스크립트 통신 테스트 확인 할 수 없습니다.');
                return;
            }
            
            
            // [팝업창 표시]
            alert(deviceSort + " " +"[setSystem] : [MOBILE > JS] : [Json 함수 호출 성공] : " + jsonValue);
        };
        
        
        
        
        
        
        /* [자바스크립트 브릿지 정의] */
        function shkeResult(){
            console.log("");
            console.log("[shkeResult] : [start]");
            console.log("설 명 : MOBILE > JS 호출 실시 : 일반 함수 호출");
            console.log("");
            
            // [팝업창 표시]
            alert("[shkeResult] : [MOBILE > JS] : [일반 함수 호출 성공]");
        };
        
        
        
        
        
        /* [자바스크립트 브릿지 정의] */
        function encodeQr(inputString){
            console.log("");
            console.log("[encodeQr] : [start]");
            console.log("설 명 : MOBILE > JS 호출 실시 : String 함수 호출");
            console.log("inputString : " + inputString);
            console.log("");
            
            
            // [사전 인풋 값 널 체크 수행 실시]
            if (inputString != null && inputString != "undefined" && inputString != ""){
            }
            else {
                console.log("");
                console.log("[encodeQr] : [인풋 값 널 데이터 에러]");
                console.log("");

                alert("[encodeQr] : [ERROR] : [INPUT DATA IS NULL]");
                return;
            }
            
            
            // [팝업창 표시]
            alert("[encodeQr] : [MOBILE > JS] : [String 함수 호출 성공] : " + inputString);
        };

    </script>
    
</head>





<!-- [body 콘텐츠 작성] -->
<body>


<!-- [1] : JS > MOBILE : 일반 함수 호출 : system -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 2%;"
    onclick="system();">
    <p class="pTagContentMiddleClass"> system </p>
</div>  





<!-- [2] : JS > MOBILE : JSON 전송 : setAccount -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 4%;"
    onclick="setAccount();">
    <p class="pTagContentMiddleClass"> setAccount </p>
</div>





<!-- [3] : JS > MOBILE : String 전송 : setAutoLogin -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 6%;"
    onclick="setAutoLogin();">
    <p class="pTagContentMiddleClass"> setAutoLogin </p>
</div>





<!-- [4] : JS > MOBILE : String 전송 : setShake -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 8%;"
    onclick="setShake();">
    <p class="pTagContentMiddleClass"> setShake </p>
</div>





<!-- [5] : JS > MOBILE : String 전송 : setOpenUrl -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 10%;"
    onclick="setOpenUrl();">
    <p class="pTagContentMiddleClass"> setOpenUrl </p>
</div>   





<!-- [6] : JS > MOBILE : String 전송 : setInnerUrl -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 12%;"
    onclick="setInnerUrl();">
    <p class="pTagContentMiddleClass"> setInnerUrl </p>
</div>





<!-- [7] : JS > MOBILE : JSON 전송 : openUrlScheme -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 14%;"
    onclick="openUrlScheme();">
    <p class="pTagContentMiddleClass"> openUrlScheme </p>
</div>





<!-- [8] : JS > MOBILE : JSON 전송 : openAppRun -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 16%;"
    onclick="openAppRun();">
    <p class="pTagContentMiddleClass"> openAppRun </p>
</div>





<!-- [9] : JS > MOBILE : JSON 전송 : setMarket -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 18%;"
    onclick="setMarket();">
    <p class="pTagContentMiddleClass"> setMarket </p>
</div>





<!-- [10] : JS > MOBILE : String 전송 : copyData -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 20%;"
    onclick="copyData();">
    <p class="pTagContentMiddleClass"> copyData </p>
</div>





<!-- [11] : JS > MOBILE : JSON 전송 : SEED SIMPLE -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 22%;"
    onclick="Simple();">
    <p class="pTagContentMiddleClass"> SEED SIMPLE </p>
</div>





<!-- [12] : JS > MOBILE : JSON 전송 : SEED MOBILE -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 24%;"
    onclick="Mobile();">
    <p class="pTagContentMiddleClass"> SEED MOBILE </p>
</div>





<!-- [13] : JS > MOBILE : String 전송 : tel:010-1234-5678 -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 26%;">
    <a class="aTagClass" href="tel:010-1234-5678"> tel:010-1234-5678 </a>
</div>





<!-- [14] : JS > MOBILE : String 전송 : sms:010-1234-5678 -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 28%;">
    <a class="aTagClass" href="sms:010-5678-1234"> sms:010-5678-1234 </a>
</div>





<!-- [15] : JS > MOBILE : String 전송 : l:https://www.naver.com -->
<div class="divTagContentWidthLargeClass" style="background-color: #000000; top: 30%;">
    <a class="aTagClass" href="l:https://www.naver.com"> l:https://www.naver.com </a>
</div>


</body>


</html>
[첨부 파일]
JavaScriptBridge.html
0.04MB
저작자표시
'투케이2K 유틸파일' 카테고리의 다른 글

51. (TWOK/UTIL) [Android/Java] S_SampleData - 샘플 테스트 데이터 포함 클래스 (0)	2022.06.13
50. (TWOK/UTIL) [Web/JavaScript] C_Util - string, 날짜, 형 변환, 정규식 수행 등 유틸 자바스크립트 파일 (0)	2022.06.10
48. (TWOK/UTIL) [Ios/Swift] A_Main 웹뷰 앱 라이프 사이클 체크 및 리로드 수행 정리 (0)	2022.06.04
47. (TWOK/UTIL) [Android/Java] A_Main 웹뷰 앱 라이프 사이클 체크 및 웹뷰 갱신 리로드 수행 정리 (0)	2022.06.04
46. (TWOK/UTIL) [Spring/Intelij] S_FinalData - 상수 데이터 관리 클래스 (0)	2022.05.17
'투케이2K 유틸파일' Related Articles
Comments
투케이2K

49. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 (JavaScript) Android , Ios 통신 HTML 코드 정리 본문

49. (TWOK/UTIL) [Web/JavaScript] 자바스크립트 (JavaScript) Android , Ios 통신 HTML 코드 정리

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

티스토리툴바
