iframe과 Frame_javascript 스킬의 차이점에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:20:151287검색
모든 사람이 주의해야 할 점 을 바로 요점으로 들어가겠습니다.
HTML5는 더 이상 프레임 사용을 지원하지 않으며 iframe에는 src 속성만 있습니다1. iframe 사용의 장점과 단점
장점:
1. 프로그램이 정적 페이지를 로드하는 것이 더 편리합니다.
2. 페이지와 프로그램의 분리
단점:
1.iframe에는 단점이 있습니다. 스타일/스크립트에는 추가 링크가 필요하므로 요청이 늘어납니다. 또한 핫링크를 방지하기 위해 js를 사용하면 도둑만 방지할 수 있지만 큰 도둑은 방지할 수 없습니다.
2. 다행히 iframe은 원본 웹 페이지를 모두 그대로 표시할 수 있지만, 홈페이지에서 사용하면 검색 엔진이 가장 짜증나는 일이거든요. 그러면 웹 사이트가 아무리 좋아도 순위가 잘 나오지 않거든요! 동적 웹페이지의 경우 include를 사용하는 것이 더 좋습니다! 하지만 그의 100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30eb2386ffb911b14667cb8f0f91ea547a76c04bd5ca3fcae76e30b72ad730ca86d 태그를 제거해야 합니다.
3. 프레임 구조는 때때로 혼란스러울 수 있습니다. 특히 위쪽, 아래쪽, 왼쪽 및 오른쪽 스크롤 막대가 여러 프레임에 나타날 때 더욱 그렇습니다. 페이지에서 이미 제한된 공간을 차지하는 것 외에도 이러한 스크롤 막대는 방문자의 주의를 산만하게 합니다. 이런 종류의 사이트를 접한 방문자는 즉시 돌아서서 떠나는 경향이 있습니다. 그들은 귀하의 홈페이지가 너무 복잡하기 때문에 사이트의 나머지 부분은 읽을 가치가 없다고 생각할 것입니다. (여기서 요점은 스크롤 막대가 하위 프레임에 나타나서는 안 되며 창의 스크롤 막대는 메인 페이지에서만 제어할 수 있다는 것입니다.)
4. 링크 탐색 질문. 프레임 구조를 사용할 때 모든 탐색 링크가 올바르게 구성되었는지 확인해야 합니다. 그렇지 않으면 방문자에게 많은 문제가 발생할 수 있습니다. 예를 들어 링크된 페이지가 탐색 프레임 내에 나타나면 방문자는 더 이상 갈 곳이 없기 때문에 꼼짝 못하게 됩니다.
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标记的最大区别是在网页中嵌入 的744a36ce5a80811620fd656a5a6732af47339a95073fc7313e65a7a8ddc71270所包含的内容与整个页面是一个整体，而a6b59115af808fdb3d02f302deb8ef36f9b0513b6ff359fbfea4dc7aef959a5a所包含的内容是一个独立的个体，是可以独立显示的。另外，应用Iframe还可以在同一个页面中多次显示同一内容，而不必重复这段内 容的代码。