<iframe>

iframe

HTML iframe은 웹 페이지 내에 웹 페이지를 표시하는 데 사용되며, 동영상이나 뮤직비디오도 넣을 수 있다.

• 장점
  쉽게 컨텐츠를 추가할 수 있고, 페이지 이동 없이 바로 보여줄 수 있다.
• 단점
  유지보수를 힘들게 하고, HTML코드량이 많아져 메모리 과부화가 일어난다.

사용법
src에 불러올 문서의 주소를 적어주면 된다.

<iframe src="url" title="description" />

속성

1. width, height
   iframe의 너비와 높이를 지정할 수 있다.

   <iframe src="url" width="600" height="300" />

2. frameborder
   iframe의 경계선의 두께를 지정할 수 있다.

   <iframe src="url" frameborder="0" />

3. scrolling
   스크롤바 사용 여부를 지정할 수 있다. (yes or no)

   <iframe src="url" scrolling="yes" />

4. sandbox
   보안을 위해 iframe 에서 form 이나 자바스크립트 등이 실행이 되지 못하게 할 수 있다.
   비어있다면 모든 제한사항을 적용한다.

• allow-forms: Form 허용
• allow-modals: modal window 를 열 수 있도록 허용 ex) alert()
• allow-same-origin: 도메인이 다르더라도, CORS 를 통과된 것처럼 허용
• allow-scripts: 스크립트를 실행할 수 있도록 허용
• allow-popups: window.open 등의 팝업 허용
• allow-storage-access-by-user-activation: Storage API 허용

  <iframe src="url" sandbox="allow-scripts allow-popups" />

youtube 영상 넣기

<iframe
	src={`https://www.youtube.com/embed/${code}`}
/>

src로 embed/ 뒤에 넣고싶은 유튜브 코드를 넣어주면 된다.

영상 옵션

주소의 매개변수로 영상의 옵션을 설정할 수 있다.

<iframe src="영상주소?autoplay=1&mute=1&loop=1"></iframe>

1. autoplay: 영상 자동재생
2. mute: 음소거
3. loop: 반복재생

구현 화면

Iframe 과 Dom

DOM Parsing 중 iframe 을 만나도 DOM Parsing 을 중단 시키지 않는다. Node 에 Iframe 을 추가하고, 새로운 Render Layer 를 만들게 된다.

부모 문서의 load 가 완료되고, iframe 에서 요청한 문서가 Load 되면, DOM parsing 및 Rendering 이 시작된다. 이때 script 가 실행되면, 같은 event loop 에서 동작하기 때문에 부모에서 실행되던 스크립트가 밀릴 수 있다.