详解iframe与frame的区别
开门见山了，大家需要注意的地方：HTML5不再支持使用frame，iframe只有src 属性
一、使用iframe的优缺点
优点:
1.程序调入静态页面比较方便;
2.页面和程序分离;
缺点：
1.iframe有不好之处：样式/脚本需要额外链入，会增加请求。另外用js防盗链只防得了小偷，防不了大盗。
2.iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最讨厌的.那么你的网站即使做的在好,也排不到好的名次!如果是动态网页，用include还好点！但是必须要去除他的<html><head><title><body>标签！
3.框架结构有时会让人感到迷惑，特别是在多个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经特别有限的页面空间外，还会分散访问者的留心力。访问者遇到这种站点往往会立刻转身离开。他们会想，既然你的主页如此混乱，那么站点的其他部分也许更不值得阅读。（这里面本人的观点就是子框架不要出现滚动条，窗口的滚动条只能有由主页面来控制）
4.链接导航疑问。运用框架结构时，你必须保证正确配置所有的导航链接，如不然，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去。
5.调用外部页面,需要额外调用css,给页面带来额外的请求次数;
二、为什么少用iframe
iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要慎重的使用iframe。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。
使用 iframe 的页面一般不会包含太多 iframe，所以创建 DOM 节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload 事件以及连接池(connection pool)。
1.Iframes 阻塞页面加载
及时触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。
window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况。
2.唯一的连接池
浏览器只能开少量的连接到web服务器。比较老的浏览器，包含 Internet Explorer 6 & 7 和 Firefox 2，只能对一个域名(hostname)同时打开两个连接。这个数量的限制在新版本的浏览器中有所提高。Safari 3+ 和 Opera 9+ 可同时对一个域名打开 4 个连接，Chrome 1+, IE 8 以及 Firefox 3 可以同时打开 6 个。你可以通过这篇文章查看具体的数据表：Roundup on Parallel Connections.
有人可能希望 iframe 会有自己独立的连接池，但不是这样的。绝大部分浏览器，主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要，这当然是很好的。但通常情况下，iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 SRC。
美国前 10 大网站都使用了 iframe。大部分情况下，他们用它来加载广告。这是可以理解的，也是一种符合逻辑的解决方案，用一种简单的办法来加载广告服务。但请记住，iframe 会给你的页面性能带来冲击。只要可能，不要使用 iframe。当确实需要时，谨慎的使用他们。
三、iframe和frame的区别
1、frame不能脱离frameSet单独使用，iframe可以；
2、frame不能放在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>-->
如下不能正常显示：
<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中；
如下可以正常显示：
<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标记的最大区别是在网页中嵌入 的<Iframe></Iframe>所包含的内容与整个页面是一个整体，而<Frame>< /Frame>所包含的内容是一个独立的个体，是可以独立显示的。另外，应用Iframe还可以在同一个页面中多次显示同一内容，而不必重复这段内 容的代码。
相关推荐
-
禁止iframe页面的所有js脚本如alert及弹出窗口等
今天做一个小软件遇到一个问题,就是在一个页面里面需要放一个iframe框架来预览网站,可是被预览的这个网站中含有很多js脚本,如弹出窗口,提示框,最可恶的是一直让设为首页和加入收藏,我想应该有办法禁止iframe里面的脚本吧,于是百度了一下,还发现不少新大陆,于是解决了这个问题,记录下来,方便以后查询,也方便大家参考: <iframe src="fillseo.html"></iframe> fillseo.html里面有个js脚本,其中有alert,还有弹出窗
-
iOS中使用schema协议调用APP和使用iframe打开APP的例子
在iOS中,需要调起一个app可以使用schema协议,这是iOS原生支持的,并且因为iOS系统中都不能使用自己的浏览器内核,所以所有的浏览器都支持,这跟android生态不一样,android是可以自己搞内核的,但是iOS不行. 在iOS中提供了两种在浏览器中打开APP的方法:Smart App Banner和schema协议. Smart App Banner 即通过一个meta 标签,在标签上带上app的信息,和打开后的行为,例如:app-id之类的,代码形如: 复制代码 代码如下: <m
-
iframe如何动态创建及释放其所占内存
最近参与一个项目的开发,由于项目是基于浏览器的胖客户端(RIA)应用程序,页面中大量调用iframe.后期测试发现浏览器内存一直居高不下,而且打开iframe页面越多内存占用越大,在IE系列浏览器中尤其明显.所有打开的iframe页面即使关闭了,内存使用也没有明显的下降,IE浏览器在内存占用达到400M左右就变得很卡.分析发现是iframe没有释放造成的,于是对所有已关闭的iframe所占用的内存进行释放,虽然不能完全释放,但是iframe内存占用量不会一直增长,整个应用内存使用量控制在150M
-
jquery、js调用iframe父窗口与子窗口元素的方法整理
1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 代码如下: $("#objid",document.frames('iframename').document) 3.js 在iframe子页面获取父页面元素代码如下: indow.parent.document.getElementByIdx_x("元素id");
-
Jquery方式获取iframe页面中的 Dom元素
测试页面代码: 复制代码 代码如下: <html> <head> <title>jquery方式,访问iframe页面dom元素</title> <meta name="Author" content="孙勤波"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> &l
-
教你用jquery实现iframe自适应高度
iframe代码,注意要写ID 复制代码 代码如下: <iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe> jquery代码一: 复制代码 代码如下: //注意:下面的代码是放在test.html调用 $(windo
-
js实现网页防止被iframe框架嵌套及几种location.href的区别
首先我们了解一下:window.location.href.location.href.self.location.href.parent.location.href.top.location.href他们的区别与联系,简单的说:几种location.href的区别 js实现网页被iframe框架功能 "window.location.href"."location.href"."self.location.href"是本页面跳转 "p
-
iframe子页面与父页面在同域或不同域下的js通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html 复制代码 代码如下: <html> <head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say()
-
PHP+iFrame实现页面无需刷新的异步文件上传
本文实例讲述了PHP+iFrame实现页面无需刷新的异步文件上传,是非常实用的常见技巧.分享给大家供大家参考.具体分析如下: 说到iframe,现在用它的人是越来越少了,并且很多人都相信它应该被AJAX所取代,的确如此,因为AJAX太出色了. 不过有一种情况的实现我还是选择了iframe,这就是本文要说的文件的异步上传,感兴趣的可以试试,如果用原生的AJAX来实现应该是要复杂的多. 先来给初学者补补基础知识: 1. 在iframe标签一般会指定其name特性以于标识: 2. 在form表单中通过
-
详解iframe与frame的区别
开门见山了,大家需要注意的地方:HTML5不再支持使用frame,iframe只有src 属性 一.使用iframe的优缺点 优点: 1.程序调入静态页面比较方便; 2.页面和程序分离; 缺点: 1.iframe有不好之处:样式/脚本需要额外链入,会增加请求.另外用js防盗链只防得了小偷,防不了大盗. 2.iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最讨厌的.那么你的网站即使做的在好,也排不到好的名次!如果是动态网页,用include还好点!但是必须要去除他
-
详解path和classpath的区别
详解path和classpath的区别 path的作用 path是系统用来指定可执行文件的完整路径,即使不在path中设置JDK的路径也可执行JAVA文件,但必须把完整的路径写出来,如C:\Program Files\Java\jdk1.6.0_10\bin\javac TheClass.java.path是用来搜索所执行的可执行文件路径的,如果执行的可执行文件不在当前目录下,那就会依次搜索path中设置的路径:而java的各种操作命令是在其安装路径中的bin目录下,所以在path中设置了JDK
-
详解Mybatis中的 ${} 和 #{}区别与用法
Mybatis 的Mapper.xml语句中parameterType向SQL语句传参有两种方式:#{}和${} 我们经常使用的是#{},一般解说是因为这种方式可以防止SQL注入,简单的说#{}这种方式SQL语句是经过预编译的,它是把#{}中间的参数转义成字符串,举个例子: select * from student where student_name = #{name} 预编译后,会动态解析成一个参数标记符?: select * from student where student_name
-
详解Shell $*和$@之间的区别
$* 和 $@ 都表示传递给函数或脚本的所有参数,我们已在<Shell特殊变量>一节中进行了演示,本节重点说一下它们之间的区别. 当 $* 和 $@ 不被双引号" "包围时,它们之间没有任何区别,都是将接收到的每个参数看做一份数据,彼此之间以空格来分隔. 但是当它们被双引号" "包含时,就会有区别了: "∗ " 会 将 所 有 的 参 数 从 整 体 上 看 做 一 份 数 据 , 而 不 是 把 每 个 参 数 都 看 做 一 份
-
分析详解python多线程与多进程区别
目录 1 基础知识 1.1 线程 1.2 进程 1.3 两者的区别 2 Python 多进程 2.1 创建多进程 方法1:直接使用Process 方法2:继承Process来自定义进程类,重写run方法 2.2 多进程通信 Queue Pipe 2.3 进程池 3 Python 多线程 3.1 GIL 3.2 创建多线程 方法1:直接使用threading.Thread() 方法2:继承threading.Thread来自定义线程类,重写run方法 3.3 线程合并 3.4 线程同步与互斥锁 3
-
详解java中&和&&的区别
&&(短路与).&.||(短路或).|,这几种运算符在Java程序开发中经常用到,下面小编主要给大家介绍下&和&&的区别. 其中&&与&都表示逻辑与,当运算符两边的表达式的结果都为true时,其运算结构才是true. 但是&&有短路的作用,如果第一个表达式为false,则不用判断第二个表达式. 复制代码 代码如下: if((str!=null)&&(!str.equals("")))
-
详解js中==与===的区别
为了减少概念混淆,应该把 =称作(得到或者赋值),==称作(相等),===称作(严格相等) 相同点: 它们两个运算符都允许任意类型的的操作数,如果操作数相等,返回true,否则返回false 不同: ==:运算符称作相等,用来检测两个操作数是否相等,这里的相等定义的非常宽松,可以允许进行类型转换 ===:用来检测两个操作数是否严格相等 1.对于string,number等基础类型,==和===是有区别的 不同类型间比较,==之比较"转化成同一类型后的值"看"值"是否
-
详解a++和++a的区别
以前我也是老搞不懂a++和++a的区别, 后来看了很多资料, 终于总结出来一条规律, 小白专用! 看完这个例子就懂了: 例1:$a = 8, 求 ++a + a++ - --a + a-- + ++a得多少? 旧值: 8 9 10 9 8 ++a + a++ - --a + a-- + ++a 新值: 9 10
-
详解路由器和交换机的区别
计算机网络往往由许多种不同类型的网络互连连接而成.如果几个计算机网络只是在物理上连接在一起,它们之间并不能进行通信,那么这种"互连"并没有什么实际意义.因此通常在谈到"互连"时,就已经暗示这些相互连接的计算机是可以进行通信的,也就是说,从功能上和逻辑上看,这些计算机网络已经组成了一个大型的计算机网络,或称为互联网络,也可简称为互联网.互连网. 将网络互相连接起来要使用一些中间设备(或中间系统),ISO的术语称之为中继(relay)系统.根据中继系统所在的层次,可以
-
java面试题——详解HashMap和Hashtable 的区别
一.HashMap 和Hashtable 的区别 我们先看2个类的定义 public class Hashtable extends Dictionary implements Map, Cloneable, java.io.Serializable public class HashMap extends AbstractMap implements Map, Cloneable, Serializable 可见Hashtable 继承自 Dictiionary 而 HashMap继承自Abs