jQuery Selector로 iframe 제어하는 방법

jQuery Selector로 iframe 제어하는 방법

Comments 0 Comment

jQuery를 이용해 iframe 내에서 부모 document 그리고 부모 document 내에 존재하는 다른 iframe에 접근하는 방법을 우선 정리해보고 이를 응용할 수 있는 예시를 한 번 더 정리해보겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Code Sample</title>
  </head>
  <body>
    <div id="content">Content Sample</div>
    
    <iframe id="frameA" src="[frameA]"></iframe>
    <iframe id="frameB" src="[frameB]"></iframe>
  </body>
</html>

iframe 내에서 부모 document 접근 방법

<script>
  // 부모 도큐멘트에서 #content 엘리먼트를 참조하여 hide() 처리
  var parentDocumentContent = $("#content", parent.document);
  parentDocumentContent.hide();
</script>

iframe 내에서 부모 document의 다른 iframe 접근

<script>
  // 부모 도큐멘트의 #frameB iframe 내 #frameBContent 엘리먼트를 참조하여 hide() 처리
  var frameBContent = $("#frameBContent", parent.frames["frameB"].document);
  frameBContent.hide();
</script>

응용 : iframe 내 document의 height 값을 구해 iframe의 height 값을 세팅

<script>
// This iframe name is "contentFrame"

$(document).ready(function(){
  
  // 현재 document를 불러오는 iframe의 selector를 정의한다.
  var thisFrame = $("#contentFrame", parent.document);
  
  // 현재 document의 height 값을 정의한다.
  var documentHeight = $(document).height();

  // 부모 document에서 iframe을 thisFrame에 정의된 selector로 참조하여 iframe의 height값을 css로 설정한다.
  thisFrame.css("height", documentHeight + "px");
});
</script>

jQuery를 버리고 Vanilla JS로 옮겨타고 싶지만 제 자신이 너무 오랜 시간 jQuery에 익숙해진 듯 합니다.

그래서 다음 포스팅에서는 제가 주로 사용하는 jQuery 문법들을 정리하고 이에 대응하는 Vanilla JS 표현식을 알아보도록 하겠습니다.