iframe이 삽입된 부모 페이지의 주소에 따라 iframe 내부의 요소들을 컨트롤

HTML 페이지 내에 iframe으로 삽입되는 페이지 내에서, 부모 페이지의 URL 주소에 따라 iframe 페이지 내의 요소들을 감추거나 수정하는 jQuery 코드. 주소 체크 자체는 그냥 자바스크립트 코드고 각 요소 컨트롤은 jQuery로 다루고 있다.

사이트 운영상 iframe을 쓸 일이 많은데, 문제는 iframe용으로 문서를 하나 만들어 놓고 이걸 여기저기서 다른 모양으로 쓰려 한다는 점. 웹페이지의 사이드바 같은 곳에 자주 쓰이는데, 가령 '영역 1~3'까지 있는 iframe 페이지를 하나 만들어 놓고 이걸 '부모페이지A'에 넣을 땐 1만 보이게, '부모페이지B'에 넣을 땐 3만 보이게 하는 식으로 쓴다.

만약 부모페이지A와 같이 영역 1만 보이는 경우라면 iframe의 사이즈를 조절해서 나머지 부분은 크롭해버리면 된다. 어차피 맨 위에 영역 1이 있으니. 하지만 영역 2나 영역 3만 보이게 되는 경우라면, 그런 식으론 불가능하다.

원래는 부모 페이지에서 자식 iframe 페이지를 직접 컨트롤하려 했지만, 왠지 구형 브라우저에서는 잘 되지도 않고 작동속도도 느리고 해서 포기. 특히 구형 IE에서는 작동 안되는 경우가 90, 작동 되는 경우가 10. 희한하게도 페이지 새로고침 때마다 작동하는게 달랐다.

그래서 생각해낸 게, iframe 페이지를 포함한 부모 페이지의 URL 주소를 체크한 뒤 조건에 맞으면 jQuery가 작동하도록 짜봤다. 페이지 주소에 'hello/goods' 가 있으면 아래 조건이 작동되도록.

$(document).ready(function () {
    if(parent.document.location.href.indexOf("hello/goods") > -1) {
       $("#aside_hi, #aside_ad, #aside_good, .etcbox").hide();
  $(".sidebar").css({ "padding": "15px 19px" });
  $(".sidebar h4").css({ "padding-bottom": "0px" });
    }
});

iframe 페이지의 부모 URL주소를 체크해야 하기 때문에 parent.document를 사용했다.

예전엔 이런 경우에 어떻게 했냐면, 영역 1, 2, 3을 각각 iframe 조각으로 만들고, 그걸 또 모아서 묶음 iframe을 만들었다. 그리고 그걸 다시 부모 페이지에 때려넣는 식으로 썼었다. 헐...