• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

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

분류 제목
HTML_Objects JS - <iframe> 객체 ★ - 타웹페이지삽입 (= iframe태그 = 아이프레임태그)
HTML_Objects JS - <img> 객체 ★ - 사진/그림/이미지 (= img태그 = 이미지태그)
HTML_Objects JS - <ins> 객체 - 텍스트삽입표시 (= ins태그 = 인스태그 = 인서트태그)
HTML_Objects JS - <input type="button"> 객체 - button타입 input태그 (= 인풋버튼태그)
HTML_Objects JS - <input type="checkbox"> 객체 ★ - checkbox타입 input태그 (= 인풋…
HTML_Objects JS - <input type="color"> 객체 - color타입 input태그 (= 인풋컬러태그) ※ …
HTML_Objects JS - <input type="date"> 객체 - date타입 input태그 (= 인풋데이트태그) ※ 날…
HTML_Objects JS - <input type="datetime"> 객체 - datetime타입 input태그 (= 인풋데이…
HTML_Objects JS - <input type="datetime-local"> 객체 - datetime-local타입 inp…
HTML_Objects JS - <input type="email"> 객체 - email타입 input태그 (= 인풋이메일태그)
HTML_Objects JS - <input type="file"> 객체 ★ - file타입 input태그 (= 인풋파일태그) ※ …
HTML_Objects JS - <input type="hidden"> 객체 ★ - hidden타입 input태그 (= 인풋히든태그…
HTML_Objects JS - <input type="image"> 객체 ★ - image타입 input태그 (= 인풋이미지태그)…
HTML_Objects JS - <input type="month"> 객체 - month타입 input태그 (= 인풋먼스태그) ※ …
HTML_Objects JS - <input type="number"> 객체 - number타입 input태그 (= 인풋넘버태그) …
HTML_Objects JS - <input type="password"> 객체 - password타입 input태그 (= 인풋패스…
HTML_Objects JS - <input type="radio"> 객체 ★ - radio타입 input태그 (= 인풋라디오태그 …
HTML_Objects JS - <input type="range"> 객체 - range타입 input태그 (= 인풋레인지태그) ※…
HTML_Objects JS - <input type="reset"> 객체 - reset타입 input태그 (= 인풋리셋태그) ※ …
HTML_Objects JS - <input type="search"> 객체 - search타입 input태그 (= 인풋서치태그) …
57/67
목록
찾아주셔서 감사합니다. Since 2012