[HTML5]에서 frameset 대체 방법과 iframe 속성
HTML 5에서 framset을 지원하기 않아 대체 방법을 찾으시는 분들이 있어 글 남깁니다.
# framset 대처 방법
[code]
<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>
[/code]
# 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>
출처:
댓글 1개
- 반응형 웹 사이트가 대세인 오늘날의 트렌드와 상극이다.
- 페이지의 파편화 문제가 생긴다.
ㄴ 검색 엔진 등록 시 frameset 뿐만 아니라 메뉴용 페이지, 콘텐츠용 페이지 까지 함께 크롤링 할 수 있다.
- 웹접근성 저해의 요인이 될 수 있음으로 남용에 주의해야한다.
- 프레임 구조가 가지고 있던 장점을 CSS와 jQuery로 해결 할 수 있다.
출처: https://okayoon.tistory.com/entry/아이프레임iframe [쪼랩의 저장소]
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4407 | ||
| 2514 | 1년 전 | 902 | ||
| 2513 |
베리소프트
|
1년 전 | 619 | |
| 2512 |
 SiheonLee |
1년 전 | 949 | |
| 2511 |
 RYANRYAN |
1년 전 | 1078 | |
| 2510 | 1년 전 | 1006 | ||
| 2509 | 1년 전 | 1057 | ||
| 2508 | 1년 전 | 1308 | ||
| 2507 | 1년 전 | 686 | ||
| 2506 | 1년 전 | 1253 | ||
| 2505 |
RYANRYAN |
1년 전 | 1208 | |
| 2504 | 1년 전 | 1409 | ||
| 2503 | 1년 전 | 944 | ||
| 2502 | 1년 전 | 1070 | ||
| 2501 | 1년 전 | 1170 | ||
| 2500 |
welcome
|
1년 전 | 1077 | |
| 2499 |
하늘그루터기
|
1년 전 | 870 | |
| 2498 | 1년 전 | 1177 | ||
| 2497 | 1년 전 | 646 | ||
| 2496 | 1년 전 | 964 | ||
| 2495 |
oneit |
1년 전 | 1417 | |
| 2494 | 1년 전 | 945 | ||
| 2493 | 1년 전 | 947 | ||
| 2492 | 1년 전 | 1155 | ||
| 2491 | 1년 전 | 1120 | ||
| 2490 | 1년 전 | 1089 | ||
| 2489 | 1년 전 | 1019 | ||
| 2488 | 1년 전 | 772 | ||
| 2487 |
 매직크레용 |
1년 전 | 1210 | |
| 2486 | 1년 전 | 830 | ||
| 2485 | 1년 전 | 1007 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기