[Javascript] iframe 개념/장점/단점

iframe

• 개념 

1. 아이프레임이란 내부 프레임(inline frame)이라는 의미로 하나의 HTML문서내에서 다른 HTML문서를 보여주고자 할때 사용합니다. /
2. 동영상, 뮤비도 넣을 수 있습니다.

• 특징 

1. 모든 브라우저에서 작동합니다.
2. DOCTYPE문서 에서는 작동하지만 script문서에서는 작동하지 않습니다

• src 속성 

 

inline frame 내에 불러올 문서의 주소를 적어주면 됩니다.

홈짱 홈페이지를 불러오는 예제를 만들어 보겠습니다.

 

<iframe src="http://www.homejjang.com">

 

1) width와 height 속성

inline frame의 너비와 높이를 지정할 수 있습니다.

 

<iframe src="http://www.homejjang.com" width="600" height="300">

 

2) frameborder 속성

inline frame의 경계선의 두께를 지정할 수 있습니다.

 

<iframe src="http://www.homejjang.com" frameborder="0" width="600" height="300">

 

3) marginwidth와 marginheight

inline frame의 여백을 지정할 수 있습니다.

 

<iframe src="http://www.homejjang.com" frameborder="0" width="600" height="300" marginwidth="0" marginheight="0">

 

4) scrolling

inline frame내에서 스크롤바 사용여부를 지정할 수 있습니다.

 

<iframe src="http://www.homejjang.com" frameborder="0" width="600" height="300" marginwidth="0" marginheight="0" scrolling="yes">

 

scrolling 값을 no로 지정하면 스크롤바가 생기지 않습니다.

 

5) a태그의 타켓 으로 사용하기

 

                                                    <참고 이미지>

• 장단점

1. 장점 :
   1. 금방 컨텐츠를 추가할 수 있다.
   2. 페이지 이동이 없으므로 사용자로 하여금 응용프로그램을 다루는 느낌을 줄 수 있다.
2. 단점 :
   1. 유지보수를 힘들게 한다.(버틸때까지 버티세요. /  iframe보다는 ajax 통신이 바른 방향이라고 생각)
   2. HTML 코드량이 방대해져 브라우저 메모리가 과대해진다.
   3. iframe으로 삽입된 컨텐츠를 크롤링하지 못하는 검색엔진이 있기 때문에 안쓰는게 좋습니다 & 스크린리더에 읽히지 않습니다. (대부분의 사용자는 검색엔진에 의해 유입되는데 이부분을 제대로 활용하지 못하면 서비스 입장에서는 난감
   4. 보안 위험을 유발합니다.(https://syudal.tistory.com/entry/html-iframe%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EB%A7%90%EC%95%84%EC%95%BC-%ED%95%A0-%EC%9D%B4%EC%9C%A0-%EB%8B%A8%EC%A0%90)
   5. 사용성 문제를 일으킴 (브라우저의 뒤로가기버튼을 간헐적으로 작동되지 않게함, 해상도에 따라 이상하게 보입니다.)

   6. 화면의 크기가 작을경우 프레임을 사용하지 못할 수 있습니다.

      제가 여기서 경험한 부분만 전달하겠습니다. 우선 iframe은 그 안에 담겨질 컨텐츠가 있는 주소에 쉽게 변화를 가져다줄 수 있습니다. 서버사이드든 클라이언트사이드에서든 언제든 부모페이지의 로직이 진행되는 과정에서 주소를 만들어서 링크만 해주면 됩니다. 컨텐츠의 추가는 부모페이지에서 iframe을 만들고 그 iframe에 주소만 연결해주면 되니 무척 쉽습니다. 그런데 컨텐츠의 유지보수를 위해 진행된 사항을 다시 거슬러 올라가야 한다면, 그 해당 컨텐츠가 나오는 주소를 찾기 위해 그 컨텐츠가 담겨진 iframe을 가지고 있는 부모페이지의 로직까지도 알아야 합니다. 사람의 뇌가 한 번 작업한 것들을 영원히 기억할 수 있다면 사실 문제될 게 없을수도 있지만.. 금새 잊게 되지요. 저처럼 처음으로 그 작업을 하게 되는 사람은 애초부터 그 컨텐츠를 보기 위해 경우의 수를 모두 대입해보아야 합니다. 로직이 심플하면 상관 없습니다만... 해당 화면을 보는 회원의 등급에 따라, 부모 페이지에서 선택된 메뉴에 따라, 부모 페이지에서 기존에 저장된 어떤 세션에 따라, 뭐 이렇게 온갖 복잡한 로직이 들어가있다면 헬입니다. 문제는 일단 iframe이 시작되면 그 편의성때문에 너무나 쉽게 온갖 경우의 수를 추가하면서 iframe을 쓰게 된다는 것입니다.

총평 

HTML5에서는 아이프레임태그 사용을 권하지 않는 비추천 태그입니다.