[js] JS - contentWindow 속성 - iframe (아이프레임)에 의해 생성된 window 객체 반환 (= contentWindow속성 = 컨텐트윈도우속성) ※ 아이프레임 (배경색/높이) 자동 설정

목차

1. contentWindow 예제 - iframe 배경색 변경
2. contentWindow 정의
3. contentWindow 구문
4. contentWindow 예제 - iframe 높이 자동 설정

contentWindow 예제 - 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] - contentWindow 속성만으로 체크

 

<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.document;

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

}

</script>

 

contentWindow 정의

 

iframe 요소에 의해 생성된 window 객체를 반환.

 

---

 

1.

window 객체를 통해 document 객체에 접근 후 document 객체의 요소 중 하나에 접근 가능.

 

2. cf.

contentDocument 속성 - iframe에 의해 생성된 document 객체 반환.

 

3.

모든 브라우저 지원.

 

4. MDN contentWindow 예제보기

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

 

contentWindow 구문

 

iframeObject.contentWindow

 

---

[반환값]

 

해당 window 객체에 대한 참조.

 

contentWindow 예제 - iframe 높이 자동 설정

 

<iframe id="hz" src="hz.html" onload="autoResize(this)" scrolling="no" frameborder="0" width="100%"></iframe>

<script>

// iframe resize

function autoResize(i) {

    var iframeHeight = i.contentWindow.document.body.scrollHeight;

    i.style.height = iframeHeight + 100 + 'px';

}

</script>

 

---

cf. jQuery 사용 경우 

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

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

<script>

$('#hz').on('load', function() {

    this.style.border='none';

    this.style.overflow='hidden';

    this.style.height=(this.contentWindow.document.body.scrollHeight)+100+'px';

});

</script>

 

제이앤 님 (240222) https://sir.kr/qa/526153 (JS)

개노미 님 (221222) https://sir.kr/qa/483934 (jQuery)