1:iframe的概念以及作用

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

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

<iframe src="demo_iframe.html"></iframe>

2:iframe的优缺点

优点:

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

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

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

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

缺点:

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

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

3. iframe兼容性较差

4. iframe有一定的安全风险

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

3: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是内嵌的网页元素

4:iframe的一些属性

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

5:获取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的documentconsole.log("html",idoc.documentElement);//获取iframe的htmlconsole.log("head",idoc.head);  //获取headconsole.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>

6:在iframe中获取父级内容

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

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

7: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> //允许将内容作为普通来源对待。如果未使用该关键字，嵌入的内容将被视为一个独立的源。

8: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.

什么是iframe及作用是什么？相关推荐

基于 iframe 的全新微前端方案
作者:damyxu,腾讯 PCG 前端开发工程师 iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于 iframe 的全新微前端方案,继承iframe的优点, ...
什么不用 iframe 做微前端
如果不考虑体验问题,iframe 几乎是最完美的微前端解决方案了. iframe 最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离.js 隔离这类问题统统都能被完美解决.但他的最大问题也在于 ...
vue 中嵌入iframe页面
使用的是vue-element-admin. 需求项目需求是在点击左边侧边栏的时候判断如果是外部的页面之后,将此页面在右侧打开,每打开一个,tagview中也会相应加上,当切换这些tagview时, ...
iframe标签详解
在我们的页面中可能会需要用到,点击链接页面的某一块变成其他的页面,这时候iframe的作用就显现出来了. iframe 元素会创建包含另外一个文档的内联框架(即行内框架),这里所说的内联框架指的就是达 ...
iframe自适应高度，多层嵌套iframe自适应高度的解决方法
在页面无刷新更新方面,虽然现在的ajax很强悍,但是处理代码相对多点.想比之下,iframe就简单多了!处理iframe的自适应宽.高,会经常用到,网上整理了一份,写在这里备用: 单个iframe 高 ...
frameset,frame,iframe区别
frame是html语言中重要的一部分,使用frame必须首先用frameset来定义. 需要注意的是:frameset元素和body元素不能同时使用. 例: <center> <m ...
【HTML基础-3】iframe框架详解及应用案例—实现页面嵌套
目录 1 iframe框架概述 2 iframe常用属性 2.1 name属性 2.2 src属性 2.3 width属性 2.4 height属性 2.5 frameboder属性 2.6 其他 3 ...
让iframe焕发新生
背景前端开发中我们对iframe已经非常熟悉了,那么iframe的作用是什么?可以归纳如下: 在一个web应用中可以独立的运行另一个web应用这个概念已经和微前端不谋而合,相对于目前配置复杂.高适 ...
【HTML基础】iframe框架
目录 1 iframe框架简介 2 iframe常用属性 2.1 name属性 2.2 src属性 2.3 width属性 2.4 height属性 2.5 其他 3 总结参考文献 1 iframe ...

什么是iframe及作用是什么？