개발/HTML

[HTML] Iframe이란

아현이라구 2023. 10. 25. 11:22
반응형

iframe이란

Inline Frame 의 약자로, 웹 브라우저 내에 또 다른 프레임, 즉 현재 브라우저에 렌더링되고 있는 문서 안에 또 다른 HTML페이지를 삽입할 수 있도록 하는 기능을 제공합니다.

쉽게 설명하여 내가 만든 웹에서 다른 사람이 만든 웹 화면을 보여줄 수 있는 기능이라 보면 된다.

<body>
  <iframe src="page.html" width="300" height="300">
      iframe을 지원하지 않는 브라우저입니다.
  </iframe>
</body>

속성값

  • src : 삽입 할 홈페이지 url
  • name : 프레임 이름
  • width : 프레임 가로 너비
  • height : 프레임 세로 길이
  • frameborder : 프레임 테두리 선 (0으로 설정하면 프레임의 테두리선 x, 1로 설정하면 프레임의 테두리선 o)
  • scrolling : 스크롤바의 표시 여부를 나타냅니다. (yes로 설정하면 스크롤 바 무조건 표시, auto는 자동 표시)
  • align : 정렬, left 왼쪽, right 오른쪽, middle 중앙, absmiddle 줄 중간 정렬이 있다.
  • seamless : 경계선 없이 문서의 일부인 것처럼 화면에 렌더한다.
  • srcdoc : 직접 태그소스를 iframe으로 표시할 수 있다.
<iframe srcdoc="<p>하이?</p>"></iframe>
  • sandbox : 보안을 위해 iframe에서 폼이나 자바스크립트 실행이 되지 못하게 함.(해킹 문제고 생긴 속성)
    • allow-forms - 폼실행 허용
    • allow-same-origin 같은 도메인의 리소스 이용가능
    • allow-scripts 스크립트 실행 허용
<iframe sandbox="" src="주소"></iframe>

// 스크립트 실행 가능
<iframe sandbox="allow-script" src="주소"></iframe>

target 속성

a 태그 속성 중 target 속성은 링크가 걸린 문서가 나타날 프레임을 설정하는 것으로 새로운 창으로 링크를 호출 할 수도 있고 현재창에 보여줄 수 도 있다.

그리고 부모 프레임 영역에 나타날 수 도 있고 프레임을 지정하여 원하는 프레임에 링크를 실행할 수 도 있다.

_blank 새창에서 열기
_self 내용을 현재 프레임 영역에서 열기(포커스가 있는 프레임 / 기본값)
_parent 내용을 부모 프레임 영역에 열기
_top 내용을 무조건 전체 영역에 열기
프레임명 해당 이름을 가진 프레임 영역에 열기 
// 새창에서 열기
<iframe target="_blank" src="주소"></iframe>

// 내용을 현재 프레임 영역에서 열기(포커스가 있는 프레임 / 기본값)
<iframe target="_self" src="주소"></iframe>

// 내용을 부모 프레임 영역에 열기
<iframe target="_parent" src="주소"></iframe>

// 내용을 무조건 전체 영역에 열기
<iframe target="_top" src="주소"></iframe>

// 해당 이름을 가진 프레임 영역에 열기
<iframe target="프레임명" src="주소"></iframe>
반응형