설명
The HTML inline frame element (<iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window.
HTML 인라인 프레임 요소 ( <iframe> )는 현재 페이지에서 효율적으로 다른 HTML 페이지를 포함하여 웹페이지 내부에서 context(맥락)을 나타냅니다. 각각의 보여지는 context(맥락)은 활성화된 문서와 그것 자신이 세션을 가진다. 보여지는 context(맥락)은 내장되어 있는 콘텐츠를 담고 있고 이것은 부모 브라우징 컨텍스트라고 합니다. 최상위 브라우징 context(맥락) (부모가 없다)은 일반적으로 브라우저 창입니다.
Usage Context
| Permitted content | Normal character data (text and character references) |
| Tag omission | None, must have both a start tag and an end tag. |
| Permitted parent elements | Any element that accepts Phrasing content. |
| Normative document | HTML 5, section 4.8.2; HTML 4.01, section 16.5 |
Usage Context
| Permitted content | 일반적인 문자 데이타 (텍스트, 문자 레퍼런스) |
| Tag omission | 시작태그와 끝나는 태그 둘다 반드시 가질 필요가 없다. |
| Permitted parent elements | 해석되어 컨텐트는 어떠한 요소도 된다. |
| Normative document | HTML 5, section 4.8.2; HTML 4.01, section 16.5 |
속성
이 엘리먼트는 전역속성을 지원한다.
align - Deprecated in HTML 4.01, Obsolete in HTML5
The alignment of this element with respect to the surrounding context.
align - HTML 4.01에서 사용 중지, HTML5에서 사용하지 않음
주변 맥락에 따라 요소의 정렬.(주변에 요소에 따라 <iframe> 요소가 정렬된다.)
frameborder - HTML 4 only
The value 1 (the default) tells the browser to draw a border between this frame and every other frame. The value 0 tells the browser not to draw a border between this frame and other frames.
frameborder - HTML 4 만 지원
값을 1 (기본값)이 프레임과 다른 모든 프레임 사이의 경계선을 그릴 수있는 브라우저를 알려줍니다. 값 0이 프레임과 다른 프레임 사이의 경계선을 그릴 수 없는 브라우저를 알려줍니다.
height
Indicates the height of the frame HTML5 in CSS pixels, or HTML 4.01 in pixels or as a percentage.
height
픽셀 또는 백분율로 HTML 4.01를 나타내고, HTML5안에서 CSS픽셀로 프레임의 높이를 나타냅니다.
marginheight - HTML 4 only
The amount of space in pixels between the frame's content and its top and bottom margins.
marginheight - HTML 4 만 지원
프레임의 내용과 상단과 하단 여백 사이의 픽셀 공간의 양입니다.
marginwidth - HTML 4 only
The amount of space in pixels between the frame's content and its left and right margins.
marginwidth - HTML 4 만 지원
프레임의 내용과 왼쪽 및 오른쪽 여백 사이의 픽셀 공간의 양입니다.
name
A name for the embedded browsing context (or frame). This can be used as the value of the target attribute of an <a> or <form> element, or the formtarget attribute of an <input> or <button> element.
name
내장 된 브라우징 컨텍스트의 이름 (또는 프레임). 이것은 <A> 또는 <FORM> 요소의 대상 속성, 또는 <input> 또는 <button> 요소의 formtarget 속성의 값으로 사용할 수 있습니다.
scrolling - HTML 4 only
Enumerated attribute indicating when the browser should provide a scroll bar (or other scrolling device) for the frame:
• auto: Only when needed.
• yes: Always provide a scroll bar.
• no: Never provide a scoll bar.
scrolling - HTML 4 만 지원
브라우저가 프레임에 스크롤 막대 (또는 다른 스크롤 장치)를 제공해야 할 때 나타내는 열거된 속성 :
• auto: 필요할 때만 스크롤 막대를 제공합니다.
• yes: 항상 스크롤 막대를 제공합니다.
• no: 스코롤 막대를 제공하지 않는다.
sandbox - HTML5 only
If specified as an empty string, this attribute enables extra restrictions on the content that can appear in the inline frame. The value of the attribute can be a space-separated list of tokens that lift particular restrictions. Valid tokens are: •allow-same-origin: Allows the content to be treated as being from the same origin as the containing document. If this keyword is not used, the embedded content is treated as being from a unique origin.
• allow-top-navigation: Allows the embedded browsing context to navigate (load) content from the top-level browsing context. If this keyword is not used, this operation is not allowed.
• allow-forms: Allows the embedded browsing context to submit forms. If this keyword is not used, this operation is not allowed.
• allow-scripts: Allows the embedded browsing context to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.
sandbox - HTML5 만 지원
빈 문자열로 지정된 경우,이 속성은 인라인 프레임에 표시 될 수있는 콘텐츠에 대한 추가적인 제한 할 수 있습니다. 속성의 값은 특별한 제한을 해제된 토큰의 공백으로 구분 된 목록이 될 수 있습니다. 유효한 토큰은 다음과 같습니다 • allow-same-origin : 콘텐츠가 내장 문서와 같은 원래의 것으로 간주 할 수 있습니다.이 키워드를 사용하지 않으면 내장 된 콘텐츠는 고유 한 원래의 것으로 간주됩니다.
설명 추가 : <iframe> 태그안에서 콘텐트를 대상으로 한 추가적인 제한.
• allow-top-navigation: 최상위 맥락에서 부터 내장된 컨텐츠가 불러지는 것을 허용한다. 이 키워드가 사용되지 않는다면, 이 연산은 사용이 허락되지 않는다.
• allow-forms: 제출된 컨텐츠를 허용한다. 이 키워드를 사용되지 않는다면, 이 연산을 사용되지 않는다.
• allow-scripts: 스크립트 동작(but not create pop-up windows)을 내장된 브라우징 맥락(context)를 허용한다. 이 키워드를 사용되지 않는다면, 이 연산을 사용되지 않는다.
seamless - HTML5 only
This Boolean attribute indicates that the browser should render the inline frame in a way that makes it appear to be part of the containing document, for example by applying CSS styles that apply to the <iframe> to the contained document before styles specified in that document, and by opening links in the contained documents in the parent browsing context (unless another setting prevents this).
seamless - HTML5 만 지원
이 Boolean 속성은 담고 있는 문서의 일부분이 인라인 프레임으로 브라우져가 렌더링 되도록 지정한다. 예를 들어 문서 안에서 전에 지정된 스타일을 지정하기 전에 담고 있는 문서의 CSS 스타일이 적용되게 되고, 부모 보여지는 맥락 안에서 담고 있는 문서의 링크를 연다.
src
The URL of the page to embed.
src
내장되어지는 페이지의 URL.
srcdoc - HTML5 only
The content of the page that the embedded context is to contain.
srcdoc - HTML5 만 지원
그 내장된 맥락의 페이지의 컨텐츠는 담을 수 있다.
width
Indicates the width of the frame HTML5 in CSS pixels, or HTML 4.01 in pixels or as a percentage.
width
HTML 4.01안에서 픽셀과 퍼선트로 지정하고, HTML5 프레임의 넓이를 CSS 픽셀으로 지정한다.
예제
<script type="text/javascript"> var iframe = window.getElementsByTagName( "iframe" )[ 0 ]; alert( "Frame title: " + iframe.contentWindow.title ); </script> <iframe src="page.html" width="300" height="300"> <p>Your browser does not support iframes.</p> </iframe>
Gecko 6.0 note
(Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)
Starting in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) , rendering of inline frames correctly respects the borders of their containing element when they're rounded using border-radius. The above example is not valid. You cannot access iframe.contentWindow properties anymore.
Gecko 6.0 note
(Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)
Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)안에 시작 , 인라인 프레임워크의 렌더링은 border-radius를 사용하여 그것들을 둥글게 그릴때 그것들이 담고 있는 엘리먼트의 border는 정확하게 지켜진다. 위에 예제는 유효하지 않다. 당신은 iframe.contentWindow 속성은 더이상 접근할수 없다.
DOM Interface
Inline frames, like <frame> elements, enter the window.frames pseudo-array.
From the DOM iframe element, scripts can get access to the window object of the included HTML page via the contentWindow property. The contentDocument property refers to the document element inside the iframe (this is equivalent to contentWindow.document), but is not supported by Internet Explorer versions before IE8.
From the inside of a frame, a script can get a reference to the parent window via window.parent.
Scripts trying to access a frame's content are subject to the same-origin policy, and cannot access most of the properties in the other window object if it was loaded from a different domain. This also applies to a script inside a frame trying to access its parent window. Cross-domain communication can still be achieved with window.postMessage.
DOM Interface
인라인 프레임이 <frame> 요소처럼, window.frames 유사 배열을 입력합니다.
DOM IFRAME 요소에서 스크립트는 contentWindow 속성을 통해 내장된 HTML 페이지의 창 개체에 대한 액세스 권한을 얻을 수 있습니다. contentDocument 속성은 iframe이 내부의 문서 요소 (contentWindow.document 동일합니다)를 말합니다. 하지만, IE8 이전의 Internet Explorer 버전을 지원하지 않습니다.
프레임의 내부에서 스크립트가 window.parent를 통해 부모 창에 대한 참조를 얻을 수 있습니다.
프레임의 콘텐츠에 액세스하는 스크립트는 same-origin policy가 적용됩니다, 그리고 그것은 다른 도메인에서 로드 된 경우 다른 창 개체의 속성의 대부분을 액세스 할 수 없습니다. 이 또한 부모 창에 액세스하는 프레임 내부에 스크립트에 적용됩니다. 도메인 간 통신은 여전히 window.postMessage으로 달성 될 수있다.
호환성
| 기능 | 구글크롬 | 파이어폭스Gecko) | 인터넷 익스플로러 | Opera | Safari |
|---|---|---|---|---|---|
| 기본적인 지원 | 1.0 | 지원 | 지원 | 지원 |
| 기능 | 안드로이드 | 파이어폭스 모바일(Gecko) | 인터넷 익스플로러 모바일 | 오페라 모바일 | 사파리 모바일 |
|---|---|---|---|---|---|
| 기본적인 지원 | 지원 | 지원 | 지원 | 지원 | 지원 |
