[Javascript] iframe 내부 function 접근하기

2014. 7. 7. 17:09프로그래밍/Javascript & JQuery

1. javascript를 이용하여 iframe 내부 접근하는 방법

index.jsp 에서 버튼을 클릭하여 iframe test1.html 의 내부 function test1을 호출한다.

========================================================================================================

test1.html

========================================================================================================

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>test1.html</title>

<script>

function test1(){

alert('test1');

}

</script>

</head>

<body>

<div id="inlineContent">

<p>Content</p>

</div>

</body>

</html>

========================================================================================================

index.jsp

========================================================================================================

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script>

function test0(){

var iframe1 = document.getElementById("iframe1");

iframe1.contentWindow.test1();

}

</script>

</head>

<body>

<iframe id="iframe1" src="./index2.html"></iframe>

<input type="button" value="test1" onClick="test0();"/>

</body>

</html>

========================================================================================================


(*) 여기서 중요하게 봐야할 부분은 contentWindow이다.
document.window 와 같이 
iframe의 window라고 생각하면 이해하기 쉬울 것이다.