Curious Traveler

iframe안에서 바깥 element 제어하기

sy34 -

iframe안에 있는 요소로 iframe 밖에 있는 요소를 제어하는 방법입니다.

예제로 쓰일 파일
(1) parent.html -> iframe을 포함하는 페이지
(2) child.html -> iframe에 표시되는 페이지

여기서는 iframe안에 나타나는 child.html의 버튼을 클릭하면 parent.html의 "Hello World!"가 "Goodbye!"로 바뀌는 코드를 소개합니다.

우선 parent.html의 코드입니다

<!DOCTYPE HTML>
<html>
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>
   <p>Hello World!</p>
   <iframe src="child.html" width="500px" height="500px"></iframe>
</body>

</html>

 
child.html의 코드입니다.

<!DOCTYPE HTML>
<html>
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

 <script>
 $(function() {
    $(document).on("click", "#change", function() {
          var target = $("p", window.parent.document);
          target.html("Goodbye!");
    });
 });
 </script>
</head>

<body>
 <button id="change">Change to Goodbye!</button>
</body>

</html>

핵심은 var target 부분의 "window.parent.document" 입니다. 해석하면 iframe창의 parent창의 document, 즉 parent.html의 document라는 뜻이됩니다. 앞에 "p"는 parent.html의 document안에 있는 <p> 요소를 선택한다는 뜻입니다. target이란 변수에 오브젝트를 지정해주었으니 이젠 원하는 function으로 원하는 제어를 해주시면 됩니다 : )