• Q&A
  • 회원가입
  • 로그인

[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으로 생성된 문서 객체 반환.

 

contentWindow
iframe으로 생성된 윈도우 객체 반환.

 

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> 객체는 표준 속성/메서드/이벤트 지원.

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012