什么是iframe及作用是什么？

一. iframe是什么及作用

iframe是嵌入式框架, 是html标签, 还是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架（即行内框架) . 说白了, iframe用来在页面嵌入其他页面.

通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。

<iframe src="demo_iframe_sandbox.htm"></iframe>

 

二. iframe的优缺点

优点:

1. 页面和程序分离,几乎不会受到外界任何js或者css的影响, 便于使用

2. 可以通过iframe嵌套通用的页面, 提高代码的重用率, 比如页面的头部样式和底部版权信息

3. 重新加载页面时, 不需要重载iframe框架页的内容, 增加页面重载速度.

4. iframe可以解决第三方内容加载缓慢的问题.

缺点:

1. 会产生很多页面，不容易管理

2. iframe框架的内容无法被搜索引擎捕获, 所以iframe不适用于首页

3. iframe兼容性较差

4. iframe有一定的安全风险

5. iframe会阻塞主页面的Onload事件

三. iframe和frame的区别

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

2. frame不能放在body中, iframe可以

3. 嵌套在frameSet中的iframe必需放在body中

4. frame的高度只能通过frameSet控制；iframe可以自己控制，不能通过frameSet控制

5. iframe 可以在表格中使用, frame 则不行

6. HTML5支持iframe, 不支持frame

7. frame几乎废弃, iframe老当益壮

8. frame和iframe实现功能基本相同, 不过iframe更灵活. frame是整个页面的框架, iframe是内嵌的网页元素

四.iframe中还可以设置些什么属性

iframe常用属性:
1.frameborder:是否显示边框，1(yes),0(no)
2.height:框架作为一个普通元素的高度，建议在使用css设置。
3.框架作为一个普通元素的宽度，建议使用css设置。
4.name:框架的名称，window.frames[name]时专用的属性。
5.scrolling:框架的是否滚动。yes,no,auto。
6.src：内框架的地址，可以使页面地址，也可以是图片的地址。
7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
8.sandbox: 对iframe进行一些列限制，IE10+支持

五.同域和跨域

我们通常使用iframe最基本的特性，就是能自由操作iframe和父框架的内容(DOM). 但前提条件是同域. 如果跨域顶多只能实现页面跳转window.location.href.

那什么是同域/ 什么是跨域呢?就是判断你的url首部是否一样

同域不同域的问题:

A:<iframe id="mainIframe" name="mainIframe" src="/main.html" frameborder="0" scrolling="auto" ></iframe>
B:<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>

使用A时，因为同域，父页面可以对子页面进行改写,反之亦然。
使用B时，不同域，父页面没有权限改动子页面,但可以实现页面的跳转
这里，我们先从简单的开始，当主页面和iframe同域时，我们可以干 些什么。

 

六.获取iframe里的内容

主要的两个API就是contentWindow,和contentDocument
iframe.contentWindow, 获取iframe的window对象
iframe.contentDocument, 获取iframe的document对象
这两个API只是DOM节点提供的方式(即getELement系列对象)

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
       console.log("window",iwindow);//获取iframe的window对象
       console.log("document",idoc);  //获取iframe的document
       console.log("html",idoc.documentElement);//获取iframe的html
       console.log("head",idoc.head);  //获取head
       console.log("body",idoc.body);  //获取body

另外更简单的方式是，结合Name属性，通过window提供的frames获取.

<iframe src ="/index.html" id="ifr1" name="ifr1" scrolling="yes">
  <p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
    console.log(window.frames['ifr1'].window);
console.dir(document.getElementById("ifr1").contentWindow);
</script>

七.在iframe中获取父级内容

同理，在同域下，父页面可以获取子iframe的内容，那么子iframe同样也能操作父页面内容。在iframe中，可以通过在window上挂载的几个API进行获取.

window.parent 获取上一级的window对象，如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象，即，就是你打开页面的文档
window.self 返回自身window的引用。可以理解 window===window.self(脑残)

 

八. iframe属性分析
1 align (HTML5 不支持。HTML 4.01 已废弃。)

规定 <iframe> 相对于周围元素的对齐方式, 属性值有 top, right, bottom, left, middle

<iframe align = "top"> </iframe>

 

2 frameborder (HTML5不支持)

规定是否显示 <iframe> 周围的边框.

<iframe frameborder = "0"></iframe>     //不显示边框

<iframe frameborder = "1"></iframe>     //显示边框

 

3 marginheight (HTML5 不支持)

规定 <iframe> 的顶部和底部的边距。其实可以理解为iframe的上下内边距, 并且这个属性不会增加iframe的高度, 超出默认显示滚动条

<iframe marginheight="10"></iframe>

 

4 marginwidth(HTML5 不支持)

同上, iframe左右内边距, 不影响宽度, 超出显示滚动条

 

5 scrolling(HTML5 不支持)

是否显示滚动条

<iframe scrolling="auto"></iframe>     //默认值, 内容超出显示

<iframe scrolling="yes"></iframe>      //始终显示

<iframe scrolling="no"></iframe>       //始终不显示

 

6 width height(HTML5支持)

<iframe>的宽高, 属性值可以是固定值, 也可以是百分比(父类容器百分比)

<iframe width = "100%" height = "200"></iframe>

 

7 name (HTML5支持)

规定 <iframe> 的名称。

在 XHTML 中，name 属性已废弃，并将被移除。使用 id 属性代替。

<iframe name="helloworld"></iframe>

 

8 src (HTML5支持)

iframe显示的内容地址

<iframe src="www.baidu.com"></iframe>

 

9 sandbox(HTML5新特性)

额外的限制, HTML 5通过sandbox属性提升<iframe>的安全性。sandbox属性可以防止不信任的Web页面执行某些操作。sandbox它可以防止如下操作

访问父页面的DOM（从技术角度来说，这是因为相对于父页面iframe已经成为不同的源了）

执行脚本

通过脚本嵌入自己的表单或是操纵表单

对cookie、本地存储或本地SQL数据库的读写

 

<iframe sandbox = ""></iframe>      //属性值空字符串 限制上述所有操作

<iframe sandbox = "allow-forms"></iframe>     //允许表单提交

<iframe sandbox = "allow-scripts"></iframe>     //允许脚本执行

<iframe sandbox = "allow-same-origin"></iframe>     //允许将内容作为普通来源对待。如果未使用该关键字，嵌入的内容将被视为一个独立的源。

<iframe sandbox = "allow-top-navigation"></iframe>     //嵌入页面的上下文可以导航（加载）内容到顶级的浏览上下文环境（browsing context). 如果未使用该关键字，这个操作不可用。

 

九.iframe自适应

默认情况下，iframe会自带滚动条，不会全屏.如果你想自适应iframe的话:第一步：去掉滚动条

<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>

第二步,设置iframe的高为body的高

var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
iframe.height = idoc.body.offsetHeight;

另外,还可以添加其它的装饰属性:

属性	效果
allowtransparency	true or false 是否允许iframe设置为透明，默认为false
allowfullscreen	true or false 是否允许iframe全屏，默认为false

看个例子:

<iframe id="google_ads_frame2" name="google_ads_frame2" width="160" height="600" frameborder="0" src="target.html" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"></iframe>

你可以直接写在内联里面，也可以在css里面定义，不过对于广告iframe来说，样式写在属性中，是best pratice.