iframe 내에서 밖으로, 또는 안에서 밖으로 자바스크립트 통신하기. While이 에 작성. 2,061번 읽힘.
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();
위를 바깥에서 실행시키면 해당 프레임 안쪽의 함수가 실행된다.
주의사항
아이프레임과 통신을 할때 자주 생기는 문제중의 하나로, 두 문서의 총 로딩시간이 달라 함수를 실행하는 시간이 엇갈림으로 인해서 생기는 문제가 꽤 있다. 이 문제는 단순히 실행순서가 달라진다는 문제가 상당히 응용되어 예상치 못한 현상이 일어날 수도 있는 오류이므로 아이프레임 통신중에 뭔가가 빠진듯한 느낌의 오류가 나면 이 현상을 의심해야한다.
IE에서 컨텐츠가 스크롤바를 덮는 문제 While이 에 작성. 1,011번 읽힘.
원인은 모르겠지만 IE에서 프레임셋을 쓸때 위와 같이 컨텐츠가 스크롤바를 덮어 버리는 문제가 있다.
해결 방법은 프레임셋 소스에서 scrolling=yes 를 제거해주면 된다.