HTML <iframe> 태그

  • 이전 페이지 <i>
  • 다음 페이지 <img>

과목 추천：

<iframe> 정의와 사용법

태그는 행내 프레임(인라인 프레임)을 정의합니다.

의 스타일을 설정하십시오(아래 예제를 참조하십시오).행내 프레임은 현재 HTML 문서에 다른 문서를 삽입하는 데 사용됩니다. <iframe> CSS를 사용하여 설정하십시오.

의 스타일을 설정하십시오(아래 예제를 참조하십시오).푸시: <iframe> 좋은 것이면 항상 <iframe> 콘텐츠 설명.

다른 것을 참조하십시오：

HTML 튜토리얼：HTML Iframe

HTML DOM 참조 설명서：IFrame 객체

예제

예제 1

행내 프레임 마크는 다음과 같습니다：

<iframe src="https://www.codew3c.com" title="CodeW3C.com 在线教程"></iframe>

직접 시험해 보세요

예제 2

iframe의 경계선을 추가하고 제거하세요 (CSS를 사용하여):

<iframe src="/index.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/index.asp" width="100%" height="300" style="border:none;">
</iframe>

직접 시험해 보세요

속성

속성 값 설명
allow <iframe>의 기능 전략을 정의합니다。
allowfullscreen
  • true
  • false
 <iframe>가 requestFullscreen() 메서드를 호출하여 전체 화면 모드를 활성화할 수 있으면 true로 설정합니다。
allowpaymentrequest
  • true
  • false
 Across-origin <iframe>가 Payment Request API 호출을 허용하면 true로 설정합니다。
height 픽셀 <iframe>의 높이를 정의합니다. 기본 높이는 150 픽셀입니다。
loading
  • eager
  • lazy
 브라우저가 iframe를 즉시 로드할지 아니면 특정 조건이 충족될 때까지 로드를 지연할지 정의합니다。
name 텍스트 <iframe>의 이름을 정의합니다。
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 <iframe>를 가져오는 때 전달할 참조 정보를 정의합니다。
sandbox
  • allow-forms
  • allow-pointer-lock
  • allow-popups
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
 <iframe> 내용에 대한 추가 제한을 활성화합니다。
src URL <iframe>에 삽입할 문서의 주소를 정의합니다。
srcdoc HTML 코드 <iframe>에 표시할 페이지의 HTML 내용을 정의합니다。
width 픽셀 <iframe>의 너비를 정의합니다. 기본 너비는 300 픽셀입니다。

전역 속성

<iframe> 태그는 또한 HTML에서의 전역 속성。

이벤트 속성을 지원합니다

<iframe> 태그는 또한 HTML에서의 이벤트 속성。

기본 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시합니다 <iframe> 요소:

iframe:focus {
  outline: none;
}
iframe[seamless] {
  display: block;
}

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원
  • 이전 페이지 <i>
  • 다음 페이지 <img>