iframe的简单介绍

一.什么是iframe?

iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容
嵌入在现有的网页中

使用会创建包含另外一个文档的内联框架（行内框架）

二.如何使用？

<iframe src="demo_iframe_sandbox.html"  id="iframe1"></iframe>

三.常用的一些属性？

width	定义iframe的宽度
height	定义iframe的高度
name	规定iframe的名称
frameborder	规定是否显示边框，0(不显示) 、1(显示)
src	设置iframe的地址（页面/图片）
scrolling	规定是否在iframe中显示滚动条，属性值(yes ，no，auto)
vspace	设置或获取对象的水平边距
hspace	设置或获取对象的垂直边距

四.常用的一些方法？

1.获取iframe

var iframe = document.getElementById("iframe1");

2.获取iframe的window对象

• 通过iframe.contentWindow

var iwindow = iframe.contentWindow

• 通过window.frame[‘name’] 通过这种方法可以获取window对象

var iwindow = window.frames['name']

3.获取iframe的document对象

• 通过iframe.contentDocument 获取iframe的document对象

var idocument = iframe.contentDocument

4.在iframe中获取父级内容

• 获取上一级的window对象

  window.parent
  

• 获取最顶级容器的window对象

  window.top
  

• 返回自身window对象

  window.self
  

五.iframe的优缺点？

优点：

1.它属于html的独立封装，可以把需要的代码分成一个个html的模块存储，需要的时候进行引用，代码复用上挺好的。
2.它另外一个非常霸道的地方在于2个页面中有遇到重复命名的时候它的css和js不会互相冲突，对于团队开发命名上可以很好的避免同名冲突。

缺点：

1.创建比一般的DOM元素慢了1-2个数量级

2.阻塞页面加载。及时触发window的onload事件是非常重要的，如果加载延迟，就会给用户网页很慢的感觉，而window的onload事件需要在所有的iframe加载完毕后才会出发。

3.唯一的连接池

4.不利于SEO，搜索引擎的检索程序无法解读iframe。

最后，iframe本身不是动态语言，样式和脚本都是自个导入的，所以得谨慎使用，安全性不高
详细介绍可参考：https://www.cnblogs.com/Leophen/p/11403800.html