HTML | 6. 인라인 프레임 (iframe) 속성

아이프레임은 HTML 문서에서 임의의 위치에 다른 HTML 문서를 보여주는 내부 프레임 태그입니다.

웹페이지 안에서 다른 페이지의 일정 부분만 보여주고 싶을 때, 웹 페이지를 또 만들기 보다는 적절하게 크기와 모양을 다듬어 보여주면 효율적이겠죠? 

예를 들어 쇼핑몰이 여러 곳에 있다고 가정해 볼게요. 메인 쇼핑몰이 있고 이제 각종 스토어에 확장하려고 합니다. 그러면 각 스토어에 상품 상세페이지를 다 꾸며주려면 많은 시간과 노력이 필요합니다. 상세페이지에 iframe을 사용해 필요한 부분만 메인 쇼핑몰에서 불러온 다면 편합니다. 

주의할 점은 iframe을 추가할 때 마다 header footer을 깐다고 해도 완전한 페이지에 가깝기 때문에 무겁습니다. 무겁다는건 로딩이 오래걸리고 컴퓨터 메모리 등을 더 잡아먹는다는 말입니다. 너무 많은 페이지를 불러 와야 할 경우에 조심하세요.

속성

allow — 

allowfullscreen — requestFullscreen()을 호출해 풀스크린으로 보여줍니다.

allowpaymentrequest — 영수증 같은 API를 포함한 크로스 오리진을 가능하게 합니다. 결제 등의 이슈에 대해 iframe은 보안상의 문제가 있으니 주의바랍니다.

cross-origin (교차출처)

크로스 오리진은 같은 서버가 아니 다른 서버에서 자원 (이미지, 문서) 등을 불러오는 것을 말합니다. 다른 페이지에서 아무거나 막 신나게 불러올 수가 없어요. ㅜ

csp — 

height — 

importance — 

loading — 

name — 

referrerpolicy — 

sandbox — 보일 콘텐츠에 대한 추가적인 제한 사항들입니다. 

• allow-forms : 리소스가 폼데이터를 제출할 수 있도록 허용
• allow-modals : 모달 윈도우를 열 수 있도록 허용
• allow-orientation-lock : 화면 방향 전환을 잠글 수 있도록 허용
• allow-pointer-lock : Pointer Lock API를 사용할 수 있게 허용
• allow-popups : window.open()이나 target="_blank" 등의 팝업 허용
• allow-pupups-to-escape-sandbox : 
• allow-presentation : 프레젠테이션 세션을 시작할 수 있게 허용
• allow-same-origin : same-origin policy를 통과된 것처럼 취급
• allow-scripts : 스크립트를 실행 할 수 있게 허용
• allow-storage-access-by-user-activation : 상위 스토리지 기능에 접근 요청 허용
• allow-top-navigation : 최상위 브라우징 컨텍스트를 탐색할 수 있게 허용
• allow-top-navigation-by-user-activation : 

src — 불러 올 웹페이지 주소. 사실 이것만 아셔도 사용가능해요.

srcdoc — 보

width — 프레임 넓이. 디폴트값은 300입니다.

<iframe src="">
 
</iframe>

참고

onload

정해진 width, height로 바꾸기 위해서는 로드 시 resize_frame함수를 호출해야합니다.

<iframe src="xxx.php" 
        width="100%"
        height="500px"
        onload="resize_frame(this)">
 
</iframe>

noheader

웹페이지의 구조는 header, content, footer, side 정도입니다. 헤더는 상단에 메뉴바 같은 부분입니다. iframe으로 페이지를 불러올 경우 굳이 헤더를 불러올 필요가 없는 경우가 대부분이죠. 컨텐츠부분만 불러오고 싶다면 noheader=y 값을 php에 get방식으로 전해주면 됩니다. 다음과 같은 형태로 주소 뒤에 추가해주시면 됩니다. 

<iframe src="xxx.php?noheader=y">
 
</iframe>

style

아이프레임을 쓰다보면 넓이나 높이가 내용에 따라 딱 맞게 자동 조절되었으면 좋겠다는 생각이 들죠. CSS style 태그로 뷰포트기준으로 100% 맞춰주시면 됩니다.

1 2 3

<iframe style="width:100vw; height:100vh">   </iframe>

cs

관련포스트

• HTML | 기초
• HTML | 태그와 속성
• CSS | 개념
• JavaScript | Ajax 기초
• XML 기초