웹사이트 이미지 경로 코딩문의합니다
안녕하세요 초보입니다. 지금 웹사이트 이미지중에 하나를 a href 로 클릭시 다른 웹페이지로 경로이동하게 만들어놨는데요 웹에서 웹으로는 넘어가지만 모바일에서 클릭시에도 웹으로 넘어가니까 이걸 고치고 싶어요 모바일>모바일 이렇게요
이동할 페이지의 모바일링크도 갖고 있는데 어떻게 해결해야할까요
안녕하세요.
a 태그 href 주소에 도메인이 포함되어 있다면 도메인을 제외하면 됩니다.
도메인을 제외하면 접속한 URL (브라우저 주소표시줄)과 동일한 도메인으로 이동하게 됩니다.
기존 : href="https://웹페이지 도메인/index.do"
변경 : href="/index.do"
현재 접속한 기기가 어떤건지 확인하면 됩니다.
javascript 내장 객체중에 navigator가 있습니다.
이 객채를 통해 현재 접속중인 장치가 pc인지 모바일인지 등을 확인할 수 있고 또 브라우져가 어떤건지 버전은 몇 인지도 확인 가능합니다.
아래는 질문하신 pc를 구분하는 조건 입니다.
var filter = "win16|win32|win64|mac|macintel";
if ( navigator.platform ) {
if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) {
//mobile
alert('mobile 접속');
}
else {
//pc
alert('pc 접속');
}
}
위 구문을 통해 pc와 모바일에 맞는 url은 a태그의 href에 넣어 사용하면 됩니다.
navigator에 대한 자세한 정보는 아래 링크를 참조하세요
페이지를 어떤 언어로 짜는지 모르겠지만 가장 간단한 해결법으로는 if문을 사용하셔서 분기를 태워주시는 방법이 있을 것 같습니다.
공통단에 현재 해당하는 운영체제를 체크하는 스크립트를 넣어서, 해당 스크립트값을 체크하는 if문으로 웹일때 모바일일 때 href에 들어가는 경로를 변경해주시면 될 것 같습니다.
만약 그게 어렵다면 이동되는 페이지에서 모바일페이지 일 경우 redirect하는 방식으로 간단하게 구현할 수도 있겠지만, 별로 추천하는 방식은 아닙니다!
모바일 체크 스크립트는 구글에 검색하면 많이 나오니, 사용하시는 언어에 맞게 선택하시면 간단하게 구현가능 할 것으로 보입니다.
<script>
function isMobile(){
var UserAgent = navigator.userAgent;
return (UserAgent.match(/iPhone|iPod|Android|Windows CE|BlackBerry|Symbian|Windows Phone|webOS|Opera Mini|Opera Mobi|POLARIS|IEMobile|lgtelecom|nokia|SonyEricsson/i) != null || UserAgent.match(/LG|SAMSUNG|Samsung/) != null);
}
function customLink(obj){
if(isMobile()){
document.location.href = obj.getAttribute('data-mobile');
}else{
document.location.href = obj.getAttribute('data-web');
}
}
</script>
<body>
<a href="javascript:void(0);" onClick="javascript:customLink(this);" data-web="webUrl" data-mobile="mobileUrl">hihi</a>
</body>