iframe 내에서 밖으로, 또는 안에서 밖으로 자바스크립트 통신하기. 2011-11-13 01:09:33에 작성. 3,017번 읽힘.

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();

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

주의사항

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

이 포스트와 비슷한 포스트들

드디어 이제 구글도 IE6을 버렸습니다. 2010-02-03 10:29:34에 작성. 1,408번 읽힘.

사용자 삽입 이미지

드디어 유튜브에 이어서 구글도 ie6 에 대한 지원을 중단한다고 밝혔습니다. 이제는 IE 7버전 이상, Firefox 3.0 이상, 크롬 4.0 이상, 그리고 사파리 3.0 이상을 지원한다고 합니다.
3월 1일부터 시작되며, 이번주를 시작으로 구글의 여러 프로그램들에 접근할 때 IE6 을 사용하는 사람들에게는 경고 메시지를 준다고 합니다.
아직도 쓰레기 브라우저 IE6 쓰시는 분들은 이제 꼼짝달싹 못하게 업그레이드 하게 되버렸네요. IE6은 2001년에 출시한 9년이 된 브라우저입니다. IE7 이나 IE8이 훨씬 좋습니다. 물론 IE 자체의 순위에서 IE8이 제일 낫다는거지, 다른 브라우저 구글 크롬, 파이어폭스등에는 IE가 절대 못따라갑니다.
저는 메인브라우저는 구글 크롬, 그리고 IE8 은 결제등을 할때나 들어갑니다. 요즘엔 한국 사이트라고 하더라도 웬만한 사이트는 크롬에서 잘 보입니다. 속도는 말할 것도 없구요. 아무튼 이걸 계기로 네이버나 다음이 과감하게 IE6 뻐킹 운동을 시작해줬으면 좋겠네요.