본문 바로가기
IT_Developers/Javascript

javascript - iframe 안에 함수 function 접근 제어 하기

by 고코더 2018. 7. 10.


아이프레임 함수 접근 실행 하기 

안녕하세요.
고코더 입니다.

iframe을 쓰게 되면 자식 객체의 함수를 실행 해야 할 경우가 있습니다.
이때 자바스크립트로 접근하여 실행 시켜 보는 방법을 알아보겠습니다.

▼ 우선 참고 소스를 보시겠습니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<meta http-equiv="Content-Type" content="application/octet-stream; charset=utf-8">
<html>
<head>
    <script type="text/javascript">
        function iframeTest(){
            var frame = document.getElementById("ifrm");
            var gocoderFrameGo = frame.contentWindow || frame.contentDocument ;
 
            gocoderFrameGo.iframefun();
        }
    </script>
</head>
<body>
<iframe  width="100%" height="100" scrolling="no" frameborder="0" id="ifrm" src="2.html" marginwidth="0" marginheight="0"></iframe>
<input type="button" value="아이프레임속 경고창 실행" onclick="iframeTest()">
</body>
</html>            

cs




▼ 방법은 간단합니다.
아래의 기능을 통해 대상을 가져온 후에 실행하면 됩니다. 
document.getElementById : 대상 아이프레임 아이디를 가져온다
frame.contentWindow || frame.contentDocument : 브라우저 호환성을 위해 참인걸 사용한다. 최신 브라우저는 "contentWindow" 으로 모두 가능

▼go.html 에서
해당 버튼을 누르면


▼프레임에 경고창이 뜹니다.


▼ 소스를 다운로드 하여 확인해보세요 



마무리


jquery 프레임 사용 방법도 올리겠습니다.



댓글