iframe: 문서 내에 다른 HTML 문서를 넣고 싶을 때

inline frame, 내부 프레임이라는 뜻으로 하나의 HTML 문서 내에 다른 HTML 문서를 보여주고자 할 때 사용

속성

iframe 내에 불러올 문서의 주소

<iframe src="http://www.naver.com">

iframe의 너비, 높이를 지정할 수 있음

<iframe src="http://www.naver.com" width="600" height="300">

경계선의 두께를 지정 가능

<iframe src="http://www.naver.com" frameborder="0" width="600" heigh="300">

iframe의 여백 지정 가능

<iframe src="http://www.naver.com" width="600" height="300" marginwidth="10" margihheight="10">

iframe 내에서 스크롤바 사용 여부를 지정 가능

<iframe src="http://www.naver.com" scrolling="yes" width="600" height="300">

iframe 요소의 contentWindow 또는 contentDocument를 사용하여 접근 가능

iframeobj.contentWindow.document;
iframeobj.contentDocument.document;

querySelector로 원래 문서에서 iframe을 가져온 후, contentDocument 속성을 참조하니 그 자체로 iframe의 document를 가리킴
위 에제처럼 iframeobj.contentDocument.document를 참조하니 undefined라고 뜸
iframeobj.contentDocument.querySelector()는 원하는 대로 iframe document의 element에 접근이 가능

console.log(iframeobj.readyState);

iframeobj.addEventListener(`load`, function() {
    console.log(`iframe loading Done!`);
});

addEventListener 대신 iframeobj.onload 속성에 바로 콜백 함수를 등록해도 되지만, 나의 경우는 이미 등록된 기존의 콜백 함수들을 유지하고, 내 작업을 추가해주고 싶어서 addEventListener를 사용함