iframe 태그는 옛날 IE에서만 지원되던 문서 내에 가상의 프레임을 붙이는 태그로써 상당히 유용한 태그이다. 이 태그가 워낙에 유명하고 유용한 태그라서 추후에 웹표준으로 편입된 약간은 특별한 태그이다.

이 태그를 이용하면서 자동으로 세로 사이즈 조절이라던가 여러가지 밖과 안의 통신이 필요할때가 꽤 있다.

안에서 밖으로 함수 실행시키기

밖 문서 (body.html)

<html>
	<head>
		<script type="text/javascript">
		function callbackTest()
		{
			alert("body.html의 함수");
		}
		window.onload = function(){
			frames['testname'].callbackTestInner();
		}
		</script>
	</head>
	<body>
		<iframe src="inner.html" name="testname"></iframe>
	</body>
</html>

안 문서 (inner.html)

<html>
	<head>
		<script type="text/javascript">
		function callbackTestInner()
		{
			alert('inner.html 의 함수');
		}
		parent.callbackTest();
		</script>
	</head>
	<body>
		테스트
	</body>
</html>

위와 같이 안쪽 문서에서 바깥 문서의 함수를 호출하려면, parent.바깥문서함수이름()를 하면 된다.

반대로 밖에서 안쪽으로 호출을 하려면 iframe 의 name 요소를 이용해서 iframe 오브젝트를 구한 후 함수를 쓰면 된다. 모든 브라우저에서 지원되는 프레임의 오브젝트를 구하는 방법은 다음과 같다.

frames['testname'].callbackTestInner();

위를 바깥에서 실행시키면 해당 프레임 안쪽의 함수가 실행된다.

주의사항

아이프레임과 통신을 할때 자주 생기는 문제중의 하나로, 두 문서의 총 로딩시간이 달라 함수를 실행하는 시간이 엇갈림으로 인해서 생기는 문제가 꽤 있다. 이 문제는 단순히 실행순서가 달라진다는 문제가 상당히 응용되어 예상치 못한 현상이 일어날 수도 있는 오류이므로 아이프레임 통신중에 뭔가가 빠진듯한 느낌의 오류가 나면 이 현상을 의심해야한다.