[Web] 카카오톡 인앱브라우저 실행으로 인한 API 기능 오류 해결(카카오톡에서 링크 클릭 시 외부 브라우저로 웹 띄우기)

 

<해결 방법>

https://burndogfather.com/271

카카오톡/라인 인앱브라우저에서 외부브라우저 띄우기 (2023.09.21 최신 - inapp browser bypassing)

 

<카카오톡 자체 브라우저 사용 원인(추측)>

https://brunch.co.kr/@b30afb04c9f54dc/45

카카오톡은 왜 인앱 브라우저를 고수할까

// DOM이 완전히 로드된 후에 콜백을 실행하는 함수
var inappdeny_exec_vanillajs = (callback) => {
    if (document.readyState !== 'loading') {
        callback();
    } else {
        document.addEventListener('DOMContentLoaded', callback);
    } 
}

// DOM이 완전히 로드된 후에 실행할 주요 로직
inappdeny_exec_vanillajs(() => { 
    // 값을 클립보드로 복사하는 함수
    function copytoclipboard(val){
        var t = document.createElement("textarea");
        document.body.appendChild(t);
        t.value = val;
        t.select();
        document.execCommand('copy');
        document.body.removeChild(t);
    };

    // 인앱 브라우저 리다이렉션을 처리하는 함수
    function inappbrowserout(){
        // 현재 URL을 클립보드에 복사
        copytoclipboard(window.location.href);
        // Safari 사용자를 위한 안내 메시지 및 리다이렉트
        alert('URL주소가 복사되었습니다.\n\nSafari가 열리면 주소창을 길게 터치한 뒤, "붙여놓기 및 이동"를 누르면 정상적으로 이용하실 수 있습니다.');
        location.href='x-web-search://?';
    };

    // 사용자 에이전트 및 현재 URL 가져오기
    var useragt = navigator.userAgent.toLowerCase();
    var target_url = location.href;

    // 특정 사용자 에이전트를 확인하고 해당하는 동작 수행
    if (useragt.match(/kakaotalk/i)) {
        // KakaoTalk 사용자는 KakaoTalk URL 스키마를 사용하여 외부 브라우저로 리다이렉트
        location.href = 'kakaotalk://web/openExternal?url=' + encodeURIComponent(target_url);
    } else if (useragt.match(/line/i)) {
        // Line 사용자는 Line URL 스키마를 사용하여 외부 브라우저로 리다이렉트
        if (target_url.indexOf('?') !== -1) {
            location.href = target_url + '&openExternalBrowser=1';
        } else {
            location.href = target_url + '?openExternalBrowser=1';
        }
    } else if (useragt.match(/inapp|naver|snapchat|wirtschaftswoche|thunderbird|instagram|everytimeapp|whatsApp|electron|wadiz|aliapp|zumapp|iphone(.*)whale|android(.*)whale|kakaostory|band|twitter|DaumApps|DaumDevice\/mobile|FB_IAB|FB4A|FBAN|FBIOS|FBSS|trill|SamsungBrowser\/[^1]/i)) {
        // 다른 인앱 브라우저에 대한 처리
        if (useragt.match(/iphone|ipad|ipod/i)) {
            // iPhone의 경우 Safari에서 열도록 사용자에게 안내 메시지 표시 및 Safari로 열기 버튼 제공
            // 모바일 호환성을 위해 viewport 및 글꼴 조정
            // 이미지 표시
        } else {
            // Android의 경우 Chrome에서 강제로 열기 위해 intent 사용
            location.href = 'intent://' + target_url.replace(/https?:\/\//i,'') + '#Intent;scheme=http;package=com.android.chrome;end';
        }
    }
});