[HTML5]에서 frameset 대체 방법과 iframe 속성 정보
[HTML5]에서 frameset 대체 방법과 iframe 속성
본문
HTML 5에서 framset을 지원하기 않아 대체 방법을 찾으시는 분들이 있어 글 남깁니다.
# framset 대처 방법
<script type="text/javascript">
<!--
var webUrl = "http://www.naver.com";
var mobileUrl = "http://m.naver.com";
window.onload = function()
{
window.document.body.ownerDocument.clear();
var ifrmFlag = document.getElementById('ifrm');
if(ifrmFlag != null && ifrmFlag != "null" && ifrmFlag != "")
{
document.body.removeChild(ifrmFlag);
}
var iframe = document.createElement("iframe");
iframe.id = "ifrm";
iframe.src = webUrl;
iframe.width = "100%";
iframe.height = "100%";
iframe.frameBorder = "0";
iframe.scrolling = "no";
document.body.appendChild(iframe);
};
//-->
</script>
<body topmargin="0" leftmargin="0">
</body>
# iframe 속성 관련
seamless: 값은없다 이속성을 사용하면 문서에 그냥일반콘텐츠로나타난다.
예제)
<iframe seamless src="form.html" width="300" height="200"></iframe>
sandbox: 보안강화를 위해 추가된것이다. 값은 4가지가있다.
예제)
<iframe sandbox="allow-same-origin"></iframe>
<iframe sandbox="allow-top-navigation"></iframe>
<iframe sandbox="allow-forms"></iframe>
<iframe sandbox="allow-scripts"></iframe>
사라진 기능들
<iframe align="" frameborder="" longdesc="" marginheight="" marginwidth="" scrolling=""></iframe>
align은 img엘리먼트에서 설명했듯이 css로 대체, 마진 보더역시 마찬가지다.
옛부터 논의되던 scroll바역시 overflow로 css로 대체된다.
설명해주던 엘리먼트 longdesc는 a엘리먼트로 대체되었다.
<iframe src="inner.html" width="300" height="200"></iframe>
가로 세로 링크할 파일을 보여준예이다.
꼭 src가 아니더라도 콘텐트에 포함시킬려면 srcdoc를 사용하면된다.
하지만 지원되는 브라우저가 없다.
<iframe srcdoc="<p>모든부라우저에서 지원안함</p>" width="300" height="200"></iframe>
출처:
2
댓글 1개
- 반응형 웹 사이트가 대세인 오늘날의 트렌드와 상극이다.
- 페이지의 파편화 문제가 생긴다.
ㄴ 검색 엔진 등록 시 frameset 뿐만 아니라 메뉴용 페이지, 콘텐츠용 페이지 까지 함께 크롤링 할 수 있다.
- 웹접근성 저해의 요인이 될 수 있음으로 남용에 주의해야한다.
- 프레임 구조가 가지고 있던 장점을 CSS와 jQuery로 해결 할 수 있다.
출처: https://okayoon.tistory.com/entry/아이프레임iframe [쪼랩의 저장소]
