[Spring] 크롬 F12 console 에서 iframe 내부 Element 접근하기

크롬 F12를 이용해서 console에서 스크립트로 테스트를 하곤 하실 텐데요. iframe 내부에 있는 Element에 직접적으로 접근할 순 없습니다. 이번 포스팅에선 간단하게 iframe 내부 Element에 접근하는 방법에 대해 알아보겠습니다.

 

1. iframe 접근

var iframe = document.getElementById('mainframe');

• iframe 의 ID를 찾습니다.

 

2. document 접근

var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

• iframe.contentDocument : iframe의 내부 HTML 문서에 직접 접근(최신브라우저 가능)
• iframe.contentWindow.document : window 객체의 document 속성으로, iframe의 내부 문서에 접근(IE8 이하 버전에서도 호환)

 

3. value 출력

var inputElement = iframeDoc.getElementById('findInput');
var inputValue = inputElement.value;
console.log(inputValue);

• 원하는 Element 를 찾아 value를 출력합니다.

 

4. 전체소스

var iframe = document.getElementById('mainframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
var inputElement = iframeDoc.getElementById('findInput');
var inputValue = inputElement.value;
console.log(inputValue);

 

감사합니다.