[js] JS - contentDocument 속성 - 아이프레임(iframe)에 의해 생성된 document 객체 반환 (= contentDocument속성 = 컨텐트다큐먼트속성|컨텐트도큐먼트속성) ※ 아이프레임 배경색 변경

목차

1. contentDocument 예제 - iframe 배경색 변경
2. contentDocument 정의
3. contentDocument 구문

contentDocument 예제 - iframe 배경색 변경

[방법1] - contentWindow 속성이나 contentDocument 속성으로 체크

 

<iframe id="hz" src="hz.html"></iframe>

<p id="demo"></p>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var x = document.getElementById("hz");

  var y = (x.contentWindow || x.contentDocument);

  if(y.document) y = y.document;

  y.body.style.backgroundColor = "yellow";

}

</script>

 

---

[방법2] - contentDocument 속성만으로 체크

 

<iframe id="hz" src="hz.html"></iframe>

<p id="demo"></p>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  var x = document.getElementById("hz");

  var y = x.contentDocument;

  y.body.style.backgroundColor = "yellow";

}

</script>

 

contentDocument 정의

 

frame (또는, iframe) 요소에 의해 생성된 document 객체를 반환.

 

---

 

1.

• 이 속성은 frame 또는 iframe 요소에 속하는 document 개체에 접근 위해 호스트 창에서 사용 가능.
• 보안 상 이유로, 두 문서가 동일한 도메인에 있는 경우에만 다른 문서에서 문서 내용에 접근 가능.

 

2. cf.

contentWindow 속성 - iframe에 의해 생성된 window 객체 반환.

 

3.

모든 브라우저 지원.

 

4. MDN contentDocument 예제보기

https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument

 

contentDocument 구문

 

iframeObject.contentDocument

 

---

[반환값]

 

• 문서 존재 O 경우, 해당 document 객체에 대한 참조.
• 문서 존재 X 경우, null 반환.