iframe안에서 바깥 element 제어하기
iframe안에 있는 요소로 iframe 밖에 있는 요소를 제어하는 방법입니다.
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으로 원하는 제어를 해주시면 됩니다 : )