iframe和frame的区别

    iframe和frame的功能差不多，iframe用来定义一个内联框架，在html文档里嵌入另一个html文档。iframe包含的内容和页面是一个整体，但是frame包含的内容是一个独立的区域。

  先来说说frameset

一、frameset

主要属性：1、cols：

       纵向分割页面。其数值表示方法有三种：“30%、30（或者30px）、*”；数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素；“*”表示该区域占用余下页面空间。例如：cols="25%,200,*" 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。

                  2、rows：横向分割页面。数值表示方法与意义与cols相同。

意思是：第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。

二、iframe

  常见的iframe标签格式为

scrolling：是否显示滚动条 no/yes/auto
frameborder：是否显示框架边框 0/1

  iframe可以用来在同一页面引入相同的内容，不需要重写相同代码

  iframe透明：通过style="background-color=transparent和allowTransparency="true"两个属性设置

  iframe的缺点：1、会增加页面的请求次数；

                         2、不利于SEO；

                         3、iframe标签相比于其他的DOM元素创建速度要慢得多；

                         4、iframe和主页面共享同一个连接池，若页面中引入过多的iframe，则会影响主                                  页面的连接。

  因此还是尽可能的少用iframe。

三、frame

  常见格式：

         必须用在body标签外部

  frame标签必须包裹在frameset标签内，而frameset标签不能用在body标签内部

三、区别

1、 frame标签必须包裹在frameset标签内，而frameset标签不能用在body标签内部

      iframe较灵活，单独使用也行，若包裹在frameset标签内使用，可以直接放在body标签内部

2、frame标签的高度只能通过frameset设定，而iframe标签高度可以自己定义

四、iframe标签-获取父子页面dom元素的方法

  1、contentWindow：用来获取子窗口的window对象

  2、contentDocument：用来获取子窗口的document对象

例：

//用来获取iframe包含页面的document/window对象
document.getElementById('iframeId').contentDocument/contentWindow

例：父页面的子页面想要获取到父页面中的另一个id为c2的子页面

parent.getElementById('iframeId').contentDocument.getElementById('c2')
parent.getElementById('iframeId').contentWindow.document.getElementById('c2')

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！