[HTML_Objects] JS - <iframe> 객체 ★ - 타웹페이지삽입 (= iframe태그 = 아이프레임태그)

목차

1. <iframe> 객체 정의 - 아이프레임
2. <iframe> 객체 구문
3. <iframe> 객체 예제 - 접근
4. <iframe> 객체 예제 - 생성
5. <iframe> 객체 속성

<iframe> 객체 정의 - 아이프레임

 

HTML <iframe> 태그(요소) 의미.

 

<iframe> 객체 구문

 

[접근]

var x = document.getElementById("요소ID");

또는,

var x = window.frames; 

 

[생성]

var x = document.createElement("IFRAME");

<iframe> 객체 예제 - 접근

 

<iframe id="hz" src="https://homzzang.com"></iframe>

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

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

<script>

function homzzang() {

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

  document.getElementById("demo").innerHTML = x;

}

</script>

 

결과보기

<iframe> 객체 예제 - 생성

 

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

<script>

function homzzang() {

  var x = document.createElement("IFRAME");

  x.setAttribute("src", "https://homzzang.com");

  document.body.appendChild(x);

}

</script>

 

결과보기

※ 아이프레임 차단 사이트 경우, 아이프레임에 호출 불가.

<iframe> 객체 속성

 

align

HTML5 제외. 대신 style.cssFloat 속성 사용.

iframe에서 align 속성값 설정/반환.

 

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

 

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

 

frameBorder
HTML5 제외. 대신 style.border 속성 사용.

iframe에서 frameborder 속성값 설정/반환.

 

height
iframe의 height 속성값 설정/반환.

 

longDesc
HTML5 제외.

iframe에서 longdesc 속성값 설정/반환.

 

marginHeight

HTML5 제외. 대신 style.margin 속성 사용.

iframe에서 marginheight 속성값 설정/반환.

 

marginWidth

HTML5 제외. 대신 style.margin 속성 사용.

iframe에서 marginwidth 속성값 설정/반환.

 

name

iframe에서 name 속성값 설정/반환.

 

sandbox

iframe의 sandbox 속성값 반환.

 

scroll

HTML5 제외.

iframe에서 스크롤 속성값 설정/반환.

 

seamless

iframe이 포함된 문서의 일부처럼 보일지 여부를 설정/반환. (테두리 또는 스크롤바 없음).

 

src
iframe에서 src 속성값 설정/반환.

 

srcdoc

iframe에서 srcdoc 속성값 설정/반환.

 

width

iframe의 width 속성값 설정/반환.

 

※ <iframe> 객체는 표준 속성/메서드/이벤트 지원.