jQuery Selector로 iframe 제어하는 방법
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 표현식을 알아보도록 하겠습니다.