1、frame不能脱离frameSet单独使用,iframe可以;
2、frame不能放在body中;如下可以正常显示:
<!--<body>-->
<frameset rows="50%,*">
<frame name="frame1" src="test1.htm"/>
<frame name="frame2" src="test2.htm"/>
</frameset>
<!--<body>-->
如下不能正常显示:
<body>
<frameset rows="50%,*">
<frame name="frame1" src="test1.htm"/>
<frame name="frame2" src="test2.htm"/>
</frameset>
<body>
3、嵌套在frameSet中的iframe必需放在body中;如下可以正常显示:
<body>
<frameset>
<iframe name="frame1" src="test1.htm"/>
<iframe name="frame2" src="test2.htm"/>
</frameset>
</body>
如下不能正常显示:
<!--<body>-->
<frameset>
<iframe name="frame1" src="test1.htm"/>
<iframe name="frame2" src="test2.htm"/>
</frameset>
<!--</body>-->
4、不嵌套在frameSet中的iframe可以随意使用;
如下均可以正常显示:
<body>
<iframe name="frame1" src="test1.htm"/>
<iframe name="frame2" src="test2.htm"/>
</body>
<!--<body>-->
<iframe name="frame1" src="test1.htm"/>
<iframe name="frame2" src="test2.htm"/>
<!--</body>-->
5、frame的高度只能通过frameSet控制;iframe可以自己控制,不能通过frameSet控制,如:
<!--<body>-->
<frameset rows="50%,*">
<frame name="frame1" src="test1.htm"/>
<frame name="frame2" src="test2.htm"/>
</frameset>
<!--</body>-->
<body>
<frameset>
<iframe height="30%" name="frame1" src="test1.htm"/>
<iframe height="100" name="frame2" src="test2.htm"/>
</frameset>
</body>
6、如果在同一个页面使用了两个以上的iframe,在IE中可以正常显示,在firefox中只能显示出第一个;使用两个以上的frame在IE和firefox中均可正常
7、iframe的使用比较灵活自由,但是支持frame的浏览器比较多
frame是把网页分成多个页面的页面。它要有一个框架集页面frameset
iframe是一个浮动的框架,就是在你的页面里再加上一个页面,
<frame>用于全页面
<iframe>用于局部
---------------------------------------------------------------------------------------------
frameset和iframe框架之间如何互调数据
(1)获得html页面上的frame
window.frames可以获得本页面上所有frame集合,用法与document.forms,document.imgs的用法相似,这是这里用的是window对象,获取某个框架可以这样做window.frames[0]、window.frames['frameName']、frames['frameName']、frames[0]、self.frames[0],此处self与window等价,相当于本页面的window对象。
这里也还要再看两个属性,contentWindow、contentDocument两个属性,也是可以用来获取子窗口,框架的window对象的。
contentWindow 兼容各个浏览器,可取得子窗口的 window 对象。
contentDocument Firefox 支持,> ie8 的ie支持。可取得子窗口的 document 对象。
假如我要刷新本页面中第一个框架的页面,可以怎么做:
window.frames[0].contentWindow.location.reload();
(2)父框架调用子框架的变量或函数
结合上面说的获得页面上的frame,那么调用子框架的变量或是函数可以这样来:
frames[0].a; frames[0].refresh(); alert(frames[0].location.href);
这是调用第一个框架里面的a变量和refresh函数。
(3)子框架调用父框架的变量或函数
对于子框架调用父框架的这种情况下,window有个属性叫parent,用来调用上层框架的,所以可以这样来:
window.parent.a; window.parent.refresh();
这是调用子框架调用父框架的a变量和refresh函数。
(4)兄弟框架之间的调用
可以通过它们的父框架来相互调用,可以这样做
self.parent.frames['child1']; self.parent.frames['child2'];
(5)多层框架的调用
window.frames[0].frames[2]; window.frames['child_1'].frames['sub_child_3'];
(6)顶层框架
首先需要判断是否为顶层框架,也就是根,可以这样来做:
if(self==window.top){ //.... } /*window的另外一个属性top,它表示对顶层框架的引用,这可以用来判断一个框架自身是否为顶层框架*/
(7)获得顶部的body
如何想要获得顶层的body元素,那么可以使用top来获得。
比如:
var topBody=$(top.document.body)
(8)获得iframe窗口的外部窗口
如何想要获得iframe窗口的外部窗口,可以通过:
var iframe= $('iframe的id', parent.document)