반응형
서비스 배포는 이미 완료했으며 개발간 자잘한 팁들을 포스팅한다.
카톡분석 서비스 주소
https://www.advancer-katalk.click
카톡분석 왕 테스트
www.advancer-katalk.click
개요
카톡으로 링크를 공유받았을때 그 링크는 카톡의 인앱 브라우저로 열리게 된다.
인앱브라우저의 경우 대부분 구동 간 제약이 존재한다
- 글자깨짐, 간격 등의 UI 이슈
- 여러 탭이 열리지 않는 이슈 등
이런 제약들을 우회하고자 페이지를 열었을 때 인앱브라우저이면
-> 크롬, 사파리로 브라우저를 자동전환하는 방법을 알아보고자 한다.
코드로 설명
- index.html
<head>
<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")) { // 카카오, 인스타 인앱 브라우저로 실행 시킨 경우
if((Agent.indexOf("kakao")>-1)||Agent.indexOf('instagram')>-1){
// 먼저, 카카오 인앱 브라우저 닫기
if (Agent.includes("kakao")){
location.href = 'kakaotalk://inappbrowser/close';
}
// 인스타 인앱 브라우저 닫기
else if (Agent.includes("instagram")){
location.href = 'instagram://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>
...
</head>
카카오톡이 아니더라도 인스타그램, 페이스북도 인앱 브라우저가 존재한다.
따라서 위 코드에서는 인스타인앱까지 탈출시켜봤다
끝
반응형
'공부 > AWS' 카테고리의 다른 글
| [AWS] 럭키토끼 테스트 - 런칭 (0) | 2023.01.14 |
|---|---|
| [AWS] 재벌집 막내아들 테스트 - 런칭 (0) | 2022.12.28 |
| [AWS] 카톡분석 프로젝트-14 / React / 카톡으로 공유하기 (1) | 2022.08.22 |
| [AWS] 카톡분석 프로젝트-13 / React / 폰트 적용 (0) | 2022.08.21 |
| [AWS] 카톡분석 프로젝트-12 / CSS 배경 관련 속성 (0) | 2022.08.06 |
댓글