티스토리 뷰

Javascript

Javascript로 iframe에서 부모창 함수 제어하기

travelpark 2022. 6. 16. 23:11
반응형

Javascript로 iframe에서 부모창 함수 제어하는 방법에 대해서 알아보도록 하겠습니다. 자식창에서 window.parent.함수명을 사용하게 되면 간단히 부모창 함수를 제어할 수 있습니다.

 

- sample.html

<!DOCTYPE html>
<html>
<head>
<title>iframe Demo</title>
</head>
<body>
<div>
    <textarea id="colorTest"></textarea>
    <iframe id="iframe_id" src="frame.html" title="테스트"></iframe>
</div>
<script> 
      
    function frameCont(){
    	document.getElementById("colorTest").style.backgroundColor = "blue";
    }

    function frameCont1(){
    	document.getElementById("colorTest").style.backgroundColor = "";
    }

</script>
</body>
</html>

 

- frame.html

<!DOCTYPE html>
<html>
<head>
<title>iframe1 Demo</title>
</head>
<body>
<div>
    <a href="javascript:;" id="myTag1" onclick="inputTxt1()">test1</a>
    <a href="javascript:;" id="myTag2" onclick="inputTxt2()">test2</a>
</div>
<script> 

    function inputTxt1(){
        window.parent.frameCont();
    }

    function inputTxt2(){
        window.parent.frameCont1();
    }

</script>
</body>
</html>

샘플을 보시면 sample.html에서 iframe으로 frame.html 파일을 불러오고 있습니다. frame.html에는 a태그 두 개가 있습니다. 하나는 inputTxt1() 함수를 실행해 부모창의 frameCont() 라는 함수를 실행하고 있고 또 다른 하나는 inputTxt2() 라는 함수를 실행해 부모창의 frameCont1() 라는 함수를 실행해줍니다.

 

sample.html의 frameCont() 라는 함수는 id가 colortest인 textarea 태그 배경색을 파란색으로 만들어주고 frameCont1() 라는 함수는 배경색을 원래대로 되돌려줍니다.

 

함수를 제어하는 방법을 알아봤기 때문에 그 안에서 실행할 수 있는 명령문들은 무궁무진합니다. 웹페이지를 개발하다보면 iframe을 사용해야하는 일이 생길 수 있기 때문에 기억하시면 많은 도움이 됩니다.

반응형

'Javascript' 카테고리의 다른 글

Javascript와 JQuery로 체크박스 선택된 값 가져오기  (0) 2023.06.14
Javascript로 모바일 체크 하는 법(navigator.userAgent)  (0) 2023.06.10
Javascript에서 윈도우 이모지(Windows Emoji) 체크하는 방법  (0) 2023.06.09
Javascript 와 JQuery에서 iframe 내부 함수 접근 방법  (0) 2022.06.14
Javascript 와 JQuery 에서 focus()로 포커스 이동하기  (0) 2022.05.24
Javascript로 Html Title 변경해주기  (0) 2022.05.22
Javascript 문자열 자르는 함수 substr(), substring(), slice() 비교  (0) 2021.07.16
공유하기 링크
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함