iframe和frame的区别及框架间的数据调用

最新推荐文章于 2022-03-31 10:29:46 发布

南乔几经秋

最新推荐文章于 2022-03-31 10:29:46 发布

阅读量187

点赞数

分类专栏： HTML 文章标签： frame iframe frameset

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、frame不能脱离frameSet单独使用，iframe可以；

2、frame不能放在body中；如下可以正常显示：

<frameset rows="50%,*">
   <frame   name="frame1"   src="test1.htm"/>
   <frame   name="frame2"   src="test2.htm"/>
</frameset>


如下不能正常显示：
<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>
如下不能正常显示：


    <frameset>
      <iframe   name="frame1"   src="test1.htm"/>
      <iframe   name="frame2"   src="test2.htm"/>
    </frameset>


4、不嵌套在frameSet中的iframe可以随意使用；
     如下均可以正常显示：
<body>
   <iframe   name="frame1"   src="test1.htm"/>
   <iframe   name="frame2"   src="test2.htm"/>
</body>


   <iframe   name="frame1"   src="test1.htm"/>
   <iframe   name="frame2"   src="test2.htm"/>


5、frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制，如：


<frameset rows="50%,*">
   <frame   name="frame1"   src="test1.htm"/>
   <frame   name="frame2"   src="test2.htm"/>
</frameset>


<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)

南乔几经秋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe和frame的区别及框架间的数据调用

1、frame不能脱离frameSet单独使用，iframe可以； 2、frame不能放在body中；如下可以正常显示： &lt;!--&lt;body&gt;--&gt; &lt;frameset rows="50%,*"&gt; &lt;frame name="frame1" src="test1.htm"/&gt; &lt;frame
复制链接

扫一扫