티스토리 뷰

Javascript

Javascript 와 JQuery에서 iframe 내부 함수 접근 방법

travelpark 2022. 6. 14. 00:05
반응형

Javascript 와 JQuery에서 iframe 내부 함수 접근 방법에 대해 알아보겠습니다. Javascript를 사용해서 iframe 함수를 제어할 수 있습니다. 아래에 예제를 보면서 확인해보겠습니다.

 

- sample.html

<!DOCTYPE html>
<html>
<head>
    <title>iframe Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
<div>
    <iframe id="iframe_id" src="frame.html" title="테스트"></iframe>

    <a href="javascript:;" id="myTag1" onclick="frameCont()">test1</a>
    <a href="javascript:;" id="myTag2" onclick="frameCont1()">test2</a>
</div>
<script>
    //Javascript
    function frameCont(){
        document.getElementById("iframe_id").contentWindow.inputTxt();
    }
    
    //JQuery
    function frameCont1(){
        $("#iframe_id").get(0).contentWindow.inputTxt();
    }
</script>
</body>
</html>

 

- frame.html

<!DOCTYPE html>
<html>
<head>
    <title>iframe1 Demo</title>
</head>
<body>
<div>
    <input type="text" id="element_id" name="element_nm" />
</div>
<script> 
    function inputTxt(){
    	document.getElementById("element_id").value = "Hello world";
    }
</script>
</body>
</html>

iframe id인 iframe_id 로 contentWindow 객체를 이용해 함수를 접근할 수 있습니다. sample.html에서 먼저 iframe 을 접근하고 document.getElementById("iframe_id") 뒤에 contentWindow 객체를 사용한 뒤 frame.html 의 inputTxt() 함수를 호출하면 실행할 수 있습니다. JQuery의 경우는 $("#iframe_id").get(0) 뒤에 동일하게 contentWindow와 실행할 함수를 사용하면 됩니다.

 

반응형

'Javascript' 카테고리의 다른 글

Javascript로 모바일 체크 하는 법(navigator.userAgent)  (0) 2023.06.10
Javascript에서 윈도우 이모지(Windows Emoji) 체크하는 방법  (0) 2023.06.09
Javascript로 iframe에서 부모창 함수 제어하기  (0) 2022.06.16
Javascript 와 JQuery 에서 focus()로 포커스 이동하기  (0) 2022.05.24
Javascript로 Html Title 변경해주기  (0) 2022.05.22
Javascript 문자열 자르는 함수 substr(), substring(), slice() 비교  (0) 2021.07.16
Javascript 소수점 올림, 버림, 반올림 함수 정리  (0) 2021.07.13
공유하기 링크
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
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
글 보관함