모든 사람이 주의해야 할 점 을 바로 요점으로 들어가겠습니다.
HTML5는 더 이상 프레임 사용을 지원하지 않으며 iframe에는 src 속성만 있습니다1. iframe 사용의 장점과 단점
장점:
1. 프로그램이 정적 페이지를 로드하는 것이 더 편리합니다.
2. 페이지와 프로그램의 분리
단점:
1.iframe에는 단점이 있습니다. 스타일/스크립트에는 추가 링크가 필요하므로 요청이 늘어납니다. 또한 핫링크를 방지하기 위해 js를 사용하면 도둑만 방지할 수 있지만 큰 도둑은 방지할 수 없습니다.
2. 다행히 iframe은 원본 웹 페이지를 모두 그대로 표시할 수 있지만, 홈페이지에서 사용하면 검색 엔진이 가장 짜증나는 일이거든요. 그러면 웹 사이트가 아무리 좋아도 순위가 잘 나오지 않거든요! 동적 웹페이지의 경우 include를 사용하는 것이 더 좋습니다! 하지만 그의
2. iframe을 덜 사용하는 이유
iframe은 한 웹사이트의 콘텐츠를 다른 웹사이트에 삽입하는 간단한 방법을 제공합니다. 하지만 iframe을 신중하게 사용해야 합니다. iframe 생성은 스크립트 및 CSS를 포함한 다른 DOM 요소 생성보다 1~2배 정도 느립니다.
일반적으로 iframe을 사용하는 페이지에는 iframe이 너무 많이 포함되어 있지 않으므로 DOM 노드를 만드는 데 소요되는 시간이 큰 비율을 차지하지 않습니다. 그러나 이는 다른 문제를 가져옵니다: onload 이벤트 및 연결 풀.
1.Iframes 페이지 로딩 차단
시간에 맞춰 창의 onload 이벤트를 트리거하는 것이 매우 중요합니다. onload 이벤트는 브라우저의 "사용 중" 표시를 중지하도록 트리거되어 사용자에게 현재 웹 페이지가 로드되었음을 알려줍니다. onload 이벤트가 지연되면 사용자는 웹 페이지가 매우 느리다는 느낌을 받게 됩니다.
모든 iframe이 로드될 때까지(내부 요소 포함) window의 onload 이벤트가 트리거되지 않습니다. Safari 및 Chrome에서는 JavaScript를 통해 iframe의 SRC를 동적으로 설정하여 이러한 차단 상황을 피할 수 있습니다.
2. 유일한 연결 풀
브라우저는 웹 서버에 대한 소수의 연결만 열 수 있습니다. Internet Explorer 6 및 7과 Firefox 2를 포함한 이전 브라우저는 도메인 이름(호스트 이름)에 대해 동시에 두 개의 연결만 열 수 있습니다. 최신 버전의 브라우저에서는 이 숫자 제한이 늘어났습니다. Safari 3 및 Opera 9는 도메인 이름에 대해 동시에 4개의 연결을 열 수 있으며 Chrome 1, IE 8 및 Firefox 3은 동시에 6개의 연결을 열 수 있습니다. 이 기사를 통해 특정 데이터 시트를 볼 수 있습니다: 병렬 연결에 대한 정리
어떤 사람들은 iframe이 자체적인 독립적인 연결 풀을 갖기를 바랄 수도 있지만, 그렇지 않습니다. 대부분의 브라우저에서 기본 페이지와 그 안에 있는 iframe은 이러한 연결을 공유합니다. 이는 리소스를 로드할 때 iframe이 사용 가능한 모든 연결을 사용하여 기본 페이지 리소스의 로드를 차단할 수 있음을 의미합니다. 물론 iframe의 콘텐츠가 기본 페이지의 콘텐츠보다 더 중요한 경우에는 좋습니다. 그러나 일반적으로 iframe의 콘텐츠는 기본 페이지의 콘텐츠만큼 중요하지 않습니다. 이 시점에서는 iframe에서 사용 가능한 연결이 부족해지는 것은 가치가 없습니다. 한 가지 해결책은 기본 페이지의 중요한 요소가 로드된 후 iframe의 SRC를 동적으로 설정하는 것입니다.
미국 상위 10개 웹사이트는 모두 iframe을 사용합니다. 대부분 광고를 로드하는 데 사용됩니다. 이는 광고 게재를 쉽게 로드할 수 있는 이해하기 쉽고 논리적인 솔루션입니다. 하지만 iframe은 페이지 성능에 큰 타격을 줄 수 있다는 점을 기억하세요. 가능하면 iframe을 사용하지 마세요. 꼭 필요한 경우에는 아껴서 사용하십시오.
3. iframe과 프레임의 차이점
1. FrameSet 없이는 Frame을 단독으로 사용할 수 없습니다.
2. 프레임은 본체에 넣을 수 없습니다.
다음은 정상적으로 표시될 수 있습니다.
<!--<body>--> <frameset rows="50%,*"> <frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> </frameset> <!--<body>-->
다음은 정상적으로 표시될 수 없습니다.
<body> <frameset rows="50%,*"> <frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> </frameset> <body>
3.frameSet에 중첩된 iframe은 본문에 배치되어야 합니다.
다음과 같이 정상적으로 표시될 수 있습니다.
<body> <frameset> <iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> </frameset> </body>
如下不能正常显示:
<!--<body>--> <frameset> <iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> </frameset> <!--</body>-->
4、不嵌套在frameSet中的iframe可以随意使用;
如下均可以正常显示:
<body> <iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> </body> <!--<body>--> <iframe name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <iframe name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> <!--</body>-->
5、frame的高度只能通过frameSet控制;iframe可以自己控制,不能通过frameSet控制,如:
<!--<body>--> <frameset rows="50%,*"> <frame name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <frame name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> </frameset> <!--</body>--> <body> <frameset> <iframe height="30%" name="frame1" src="http://gongxquan.blog.163.com/test1.htm"/> <iframe height="100" name="frame2" src="http://gongxquan.blog.163.com/test2.htm"/> </frameset> </body>
6、如果在同一个页面使用了两个以上的iframe,在IE中可以正常显示,在firefox中只能显示出第一个(firefox已经改进,这个问题已经不存在了);使用两个以上的frame在IE和firefox中均可正常
小结:
Frame与Iframe两者可以实现的功能基本相同,不过Iframe比Frame具有更多的灵活性。 frame是整个页面的框架,iframe是内嵌的网页元素,也可以说是内嵌的框架 Iframe标记又叫浮动帧标记,可以用它将一个HTML文档嵌入在一个HTML中显示。它和Frame标记的最大区别是在网页中嵌入 的所包含的内容与整个页面是一个整体,而< /Frame>所包含的内容是一个独立的个体,是可以独立显示的。另外,应用Iframe还可以在同一个页面中多次显示同一内容,而不必重复这段内 容的代码。