iframe/ContentDocument 프로퍼티 (+삼항연산자)

삼항연산자

var a = ( 조건문 ) ?  b  :  c  ;

               조건문이 true일때 b가 담기고, 조건문이 false일때 c가 담긴다.

 

if 조건문

if (a>b) {
	c =10;
} else {
	c= 20;
}

조건 (삼항)연산자

(a > b) ? c=10 : c=20;

---

html DOM 내에 iframe이 있고, 그 안에서 html 을 로드할 경우

페이지 내에 iframe이 있고, 그 안에 html페이지가 로드할 경우 사용

 

 

 

if 조건문

if ($('#iframe', parent.document).length > 0){
	var targetFrameContent = $('#iframe', parent.document).get(0);
	if (targetFrameContent.contentDocument) {
		targetFrameContent.contentDocument;
	} else {
		targetFrameContent.contentWindow.document;
	}
	('#iframe', parent.document).css({"height" : (targetFrameDocContent.body.scrollHeight + 17) + "px"});
}

 

조건 (삼항)연산자

if ($('#iframe', parent.document).length > 0){ 
	var targetFrameContent = $('#iframe', parent.document).get(0); 
    var targetFrameDocContent = (targetFrameContent.contentDocument) ? targetFrameContent.contentDocument : targetFrameContent.contentWindow.document;
	$('#iframe', parent.document).css({"height" : (targetFrameDocContent.body.scrollHeight + 17) + "px"});
}
		

삼항연산자를 사용하여 코드라인이 줄어드는 장점이 있으나 

가독성이 떨어 질 수 있으므로 증복처리는 피하는 것이 좋다.

• if ($('#iframe', parent.document).length > 0){ ... }

      -  #iframe(자식요소)의 parent.document (iframe의 부모요소) 길이가 0보다 클 때 실행

---

 

• var targetFrameContent = $('#iframe', parent.document).get(0);

      -  #iframe(자식요소)의 parent.document(iframe의 부모요소)에서 첫번째 인덱스(0)를 가져와 targetFrameContent 에 대입

    -  $(selector).get(index);  : 선택한 요소를 배열의 (index)번째로 가져온다. 

 

---

 

• (targetFrameContent.contentDocument) ?  targetFrameContent.contentDocument  :  targetFrameContent.contentWindow.document ;

     -  contentDocument 프로퍼티 : iframe에 의해 생성된 document 객체

     -  contentWindow 프로퍼티 : iframe에 의해 생성된 window객체

     -  true 일때 .contentDocument : document 객체 

     -  false 일때 .contentWindow.document : window의 document 객체

 

---

 

• $('#iframe', parent.document).css( { "height" : (targetFrameDocContent.body.scrollHeight + 17) + "px" });

#iframe의 부모페이지 

scrollHeight의 픽셀(pixel)

scrollHeight는 읽기 전용 속성

 

참고 링크

https://strangelight.tistory.com/entry/iframe-%EB%B6%80%EB%AA%A8-%EC%9E%90%EC%8B%9D-%EC%A0%91%EA%B7%BC

iframe 부모 자식 접근

https://mylife365.tistory.com/10

[jQuery] iframe 접근, 제어

https://zeronica.tistory.com/80

jquery iframe 부모에 접근하기