location.href과 split()함수로 이미지 변경하기

실제로 홈페이지를 개발하게 되면, 퍼블리싱과는 별개로 개발언어가 입혀지는 경우에 한 개의 소스 페이지로 파라미터 값을 달리해서 다른 메뉴를 구성하게 되는 경우가 종종 있다. 2015.03.26 01:30

이럴 때 특정 이미지 혹은 특정 코드만 다르게 보여져야 하는 경우 개발자를 귀찮게 하기 싫으면 location.href를 이용하면 편리하다.

예시로 들 사이트는 종로구시설관리공단인데, 유지보수 의뢰로 담당부서의 전화번호를 페이지에 삽입해 달라는 의뢰가 들어왔다.

개발자들이 바쁜 관계로 개발을 거치지 않고 UI단에서만 처리한 소스이다.

http://www.ijongno.co.kr/front/main/11

종로구시설관리공단

문화체육시설, 종로구민회관, 종로문화체육센터, 동무여성문화센터,청소년문화센터,삼청테니스장의 서브메인 페이지에서 위 사진처럼 빨간 박스 친 부분의 이미지를 각 페이지의 내용에 맞게 변경하는 것이다.

먼저 주소를 자세히 보면, http://www.ijongno.co.kr/front/main/11, http://www.ijongno.co.kr/front/main/21, http://www.ijongno.co.kr/front/main/41 이렇게 변한다.

제한 조건은 실서버에 바로 반영할 것이 아니라 미러링되어 있는 개발서버에서 테스트한 후에 적용할 것인데, 당연히 URL 주소가 달라진다. 

대신에 폴더 구조는 같기 때문에, 

/front/main/ 

을 기준으로 뒷쪽의 숫자 2자리만 추출해 낸다면 페이지가 달라짐을 알 수 있다.

현재 페이지의 주소를 읽어오는 자바스크립트 코드는

location.href

이다.

변수를 하나 생성해서 대입하고,

.split('/front/main/');

를 이용해서 문자열을 잘라 낸다.

meurl=meurl.split('/front/main/');

와 같이 하면 meurl은 배열로 전환되고, meurl [0]과 meurl [1]이 생성된다.

우리가 필요로 하는 것은 meurl[1]의 값이다.

스위치 문에 돌리기 위해서 parseInt()를 사용해서 정수형으로 변환해준다.

일단 현재 페이지의 특성을 파라미터든, 주소든 파악을 했다면, switch() 함수를 써서 조건 분기해주면 된다.

변경될 이미지소스든, html 코드든 문자열 변수에 대입해두고 최종적으로 innerHtml이나 jQuery의 html() 함수로 html 코드를 치환해주면 끝.