iframe

iframe 是网页的 html 载体，用于在网页中加载一个页面。

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

iframe 常用属性:

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

iframe 的优点

1、iframe 能够原封不动的把嵌入的网页展现出来;

2、如果有多个网页引用 iframe，那么只需要修改 iframe 的内容，就可以实现调用每一个页面的更改，方便快捷;

3、网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 嵌套，可以增加代码的可重用;

4、如果遇到加载缓慢的第三方内容，如图标或广告，这些问题可以由 iframe 来解决;

5、iframe 会堵塞主页面的 Onload 事件;

6、iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

iframe 的缺点

1、iframe 会阻塞主页面的 Onload 事件;

2、iframe 和主页面共享链接池，而浏览器对相同城的链接有限制，所以会影响页面的并行加载;

3、使用 iframe 之前需要考虑这两个缺点，如果需要使用 iframe，最好是通过 JavaScript;

4、动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题

5、不利于 seo

6、代码复杂，无法一下被搜索引擎索引到

7、iframe 框架页面会增加服务器的 http 请求，对于大型网站不可取。

8、很多的移动设备无法完全显示框架，设备兼容性差。

是否禁用 iframe 嵌套

1. 可以使用 window.top 来防止你的网页被 iframe.（禁用所有 iframe）

if (window != window.top) {
  window.top.location.href = correctURL;
}

2. 只允许同源 iframe

try {
  top.location.hostname; // 检测是否出错
  // 如果没有出错，则降级处理
  if (top.location.hostname != window.location.hostname) {
    top.location.href = window.location.href;
  }
} catch (e) {
  top.location.href = window.location.href;
}

3. 请求头 X-Frame-Options

将前端 js 对 iframe 的把控交给服务器来进行处理

属性：

（1）DENY：当前页面不能被嵌套 iframe 里，即便是在相同域名的页面中嵌套也不允许,也不允许网页中有嵌套 iframe

（2）SAMEORIGIN：iframe 页面的地址只能为同源域名下的页面

（3）ALLOW-FROM：可以在指定的 origin url 的 iframe 中加载

iframe 使用场景

1. 沙箱隔离。
2. 引用第三方内容。
3. 独立的带有交互的内容，比如幻灯片。
4. 需要保持独立焦点和历史管理的子窗口，如复杂的 Web 应用。

邮箱类 Web 应用 普遍使用 Iframe 来显示 Html 格式的邮件。

---

https://segmentfault.com/a/1190000004502619 (opens new window)