본문 바로가기
웹관련/JavaScript-Jquery

[자바스크립트] 모바일에서 PC버전보기 쿠키로 처리하기(웹,모바일 별개웹사이트)

by 착한덕환 2017. 12. 29.



일반적으로 모바일에서 PC버전 보기를 사용을 해야할때 

쿠키로 값을 남겨서 처리하도록 하는 방법입니다. 


아래의 방법을 사용하는 경우는 웹사이트와 모바일 사이트가

각각의 웹사이트로 따로 존재할경우 아래와 같이 적용을 해야합니다.


만약 하나의 웹사이트로 http://도메인/mobile 처럼 되어있는경우

다른 방법으로 진행을 해야한다. [해당 방법을 보려면 이곳을 클릭]


저는 이방법을 생각하기 전에는 URL뒤에 파라미터 속성을 같이 넘겨서

ASP또는 PHP에서 해당 파라미터를 확인후 스크립트를 적용했었습니다.


그렇게 되면 모든 링크URL에 불필요한 파라미터 속성이 항상 따라 붙어야 함으로써 정말 무식한 방법이였죠.....


파라미터를 붙히지 않고 별도의 URL링크에 계속 PC버젼임을 요구하는 파라미터를 안넘겨도 구연하는 방법을 생각하다 

쿠키값으로 구연을 해보았습니다.


[쿠키값으로 구현하기전 생각해보아야 할점]

1. 쿠키값을 셋팅한다음 셋팅한 쿠키값을 읽어오기위해선 브라우져가 1회 새로고침이 되어야 합니다.

2. 쿠키값을 읽어온다음 모바일에서 PC버전을 눌러서 온부분인지를 확인후 모바일 스크립트를 적용해야 합니다.


위에 두가지를 모두 만족하기위해 별도의 index_force.asp 라는 페이지를 만들어서 

javaScript 를 통하여 쿠키값을 생성한뒤 강제로 index페이지로 이동하도록 만들었습니다.


[index_force.asp 소스]

/* 쿠키 생성 함수 */

function setCookie( name, value, expiredays ) {

var todayDate = new Date();

todayDate.setDate( todayDate.getDate() + expiredays );

document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"

};


setCookie( "pcT", "Y", 1);

window.location.href='/index.asp'


주의해야할 점은 index_force.asp 파일은 모바일페이지가 있는 폴더에 있으면 안됩니다. 

반드시 PC버전 URL폴더에 위치해 있어야 합니다.


일반적으로 쿠키값은 해당 URL로 구분하여 쿠키값이 기록이 됩니다.

만약 모바일URL 에서 쿠키값을 생성한뒤 PC URL에서 해당 URL

쿠키값을 사용하려고 하면 쿠키값은 모바일 URL에 있기 때문에 

쿠키값을 사용을 할수가 없습니다. 


[PC index.asp 파일상단]

function getCookie(cookieName){

var search = cookieName + "=";

var cookie = document.cookie;

if( cookie.length > 0 ){

startIndex = cookie.indexOf( cookieName );

if( startIndex != -1 ){

startIndex += cookieName.length;

endIndex = cookie.indexOf( ";", startIndex );

if( endIndex == -1) endIndex = cookie.length;

return unescape( cookie.substring( startIndex + 1, endIndex ) );

} else {

return false;

}                

} else {

return false;

}

}


if (getCookie("pcT") == "Y"){

}else{

var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');

for (var word in mobileKeyWords){

if (navigator.userAgent.match(mobileKeyWords[word]) != null){

location.href = "http://mgolfgo.wiznic.net";

break;

}

}

}


이렇게 작성한뒤 마지막으로 모바일에서 PC버전 링크를 아래와 같이 걸면 됩니다.


[모바일에서 PC버젼 링크걸기]

<a href="http://PC URL주소/index_force.asp">PC버전보기</a>


여기서 중요한건 PC URL 주소로 이동을 해서 index_force.asp 파일을

구동해야 PC URL 주소로 쿠키값이 생성이 된후, 자동으로 index 페이지로

넘어가면서 셋팅된 쿠키값을 이용하여 모바일 스크립트 유무를 실행할수 있게 됩니다.


너무 설명이 길었지만... 파라미터값을 일일이 넘기지 않고 쿠키값으로

모바일 스크립트 실행 유무를 판단할수 있어, 소스가 지저분해지지 않고

깔끔하게 모바일버젼보기를 할수 있습니다.

댓글