IFrame이란?

 

 

1. iFrame이란? -

iframe은 HTML 문서 내에서 다른 HTML 문서를 삽입하고 표시하는 데 사용되는 요소입니다.

주요 목적은 웹 페이지 내에 외부 콘텐츠를 표시하거나 다른 문서를 삽입하여 웹 페이지의 일부를 동적으로 로드하는 것입니다.

iframe은 "Inline Frame"의 약자로, 다른 웹 페이지를 현재 페이지에 포함시켜주는 기능을 합니다.

이를 통해 웹 페이지는 여러 웹 서비스나 콘텐츠를 통합하여 하나의 페이지에서 다양한 정보를 제공할 수 있습니다.

 

2. iFrame 사용 예시 - 

1. 외부 콘텐츠 삽입: 다른 웹 사이트의 콘텐츠를 현재 페이지에 삽입하여 표시할 수 있습니다.

예를 들어, 다른 웹 사이트의 지도, 동영상 플레이어, 소셜 미디어 위젯 등을 현재 페이지에 삽입할 수 있습니다.

 

2. 광고 삽입: 광고를 표시하기 위해 외부 광고 서비스를 iframe으로 삽입할 수 있습니다.

이렇게 함으로써 광고 서비스는 자체적으로 콘텐츠를 관리하고 업데이트할 수 있으며, 페이지의 로딩 속도도 향상됩니다.

 

3. 동적 콘텐츠 로딩: 웹 페이지의 일부분을 동적으로 로드하고 갱신하는 데 사용될 수 있습니다.

예를 들어, 사용자가 선택한 옵션에 따라 다른 콘텐츠를 로드하고 표시할 때 사용될 수 있습니다.

 

4. 보안: 외부 웹 사이트를 iframe으로 삽입하여 보안을 강화할 수 있습니다.

iframe은 외부 콘텐츠를 현재 페이지와 격리시키므로, 외부 콘텐츠의 스크립트나 스타일이 현재 페이지에 영향을 미치는 것을 방지할 수 있습니다.

 

이러한 용도로 iframe은 웹 개발에서 유용하게 사용됩니다. 그러나 iframe을 남용하면 페이지의 성능 문제나 보안 취약점이 발생할 수 있으므로, 적절한 상황에서 사용하는 것이 중요합니다.

 

3. iFrame 내의 document를 호출하려면? -

 

// 새로운 iframe 요소 생성
     var iframe = document.createElement('iframe');
// 내부 문서 URL 설정
     iframe.src = '내부_문서_URL';
// iframe을 현재 문서에 추가
     document.body.appendChild(iframe);

 

위와 같이 선언되어있는 상황이라고 할때, contentDocument 또는 contentWindow를 사용하여 호출할 수 있습니다.

// iframe의 내부 document에 액세스하여 작업 수행
var innerDoc = iframe.contentDocument 또는 iframe.contentWindow.document;

 

여기까지 iFrame에 대하여 정리해보았습니다, 감사합니다.