[HTML] 아이프레임<iframe> 태그 사용법

<iframe> 태그란 무엇인가? 왜 사용하는가?

 

:  iframe은 HTML Inline Frame 요소이며 inline frame의 약자이다.

  iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 할 수 있다고 한다.

 

 

 

사용방법은 간단하다. 이 틀에 맞춰서 넣고 싶은 페이지를 삽입해 주면 된다.

<iframe src="삽입할페이지주소" width="너비" height="높이"></iframe>

 

※ <iframe>의 속성들

·  src : 삽입할 페이지의 URL을 지정.

·  width, height : iframe의 너비와 높이를 설정.

·  name : iframe의 이름을 지정하여 자바스크립트에서 참조할 수 있음.

·  sandbox : iframe의 행동을 제한하는 데 사용됨. (ex. sandbox="allow-script"는 스크립트 실행을 허용함.)

·  allow : iframe에서 허용할 권한을 지정함. (ex. allow="fullscreen"은 전체 화면모드를 허용함.)

·  loading : iframe로딩 방식을 지정함. loading="lazy"로 설정하면 페이지 로딩 속도를 개선할 수 있음.

 

 

 

이해를 쉽게 하기 위해서 그림으로 그려보았다.

parent.jsp라는 큰 틀에 header랑 left랑 content로 child.jsp를 넣어준 형태이다.

<iframe id="header" src="/header.jsp?flag=<%=flag%>" width="1202" height="100"></iframe>
<iframe id="left" src="/left.jsp?flag=<%=flag%>&flagId=<%=flagId%>&fwd=<%=fwUrl%>" width="220" height="100%"></iframe>
<iframe id="content" src="/child.jsp" width="950" height="100%" ></iframe>

 

 

iframe과 부모 페이지 간의 통신을 위해 'postMessage' API를 사용할 수 있다.

이는 보안이 강화된 방식으로 데이터를 주고받을 수 있게 해준다.

// 부모 페이지에서 자식 iframe에 메시지 보내기
iframe.contentWindow.postMessage('Hello from parent', '*');

// 자식 페이지에서 부모로부터 메시지 받기
window.addEventListener('message', function(event) {
  console.log('Message from parent:', event.data);
});

 

 

설명만 보면 어떠한 제한없이 다른 페이지를 삽입할 수 있어서 편리해보이지만,, 삽입만 쉬운것같다.

<javascript>로 기능 구현을 할 때는 부모와 자식 페이지간의 접근 조건들이 붙고 param값들이 잘 넘어가지 않는다.. 

그래서 요즘에는 iframe을 잘 안쓴다고 한다!

 

<iframe을 사용하는 대신 고려할 수 있는 대안 기술>

- AJAX : 부분 페이지를 동적으로 로드하여 페이지의 특정 부분만 업데이트할 수 있다.

- 웹 컴포넌트 : 재사용 가능한 캡슐화된 HTML 태그를 생성하여 사용할 수 있다.

- React, Angular, Vue 같은 프론트엔드 프레임워크 : 더 나은 상태 관리와 컴포넌트 기반 아키텍처를 제공한다.