开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第34天，点击查看活动详情

前言

当我们想要将一个系统的页面嵌入到另外一个系统当中，简单粗暴地方法用iframe标签，虽然iframe有一些问题，但还是一种简单高效的方法，iframe标签我们还是要掌握的。

属性

iframe是一个标签，用法跟其他标签是一样的，它是一个双标签，具体的属性如下：

• src:嵌入路径，这个是最重要的属性，路径正确iframe就会显示路径内容。

    <iframe src="./img/1.png"></iframe>

• width、height:宽高属性，标签公共属性。
• srcdoc:嵌入标签内容，srcdoc的优先级比scr高，当浏览器支持该属性，就会覆盖src里面的内容。

   <iframe srcdoc="<span>这个srcdoc</span>" src="./img/1.png"></iframe>

• sandbox:设置限制条件，iframe本身安全性不高，通过该属性可以阻止一些页面的一些操作，比如防止页面执行一些脚本。对应的属性值有：
  allow-forms:支持表单提交。
  allow-scriptes:支持脚本。
  allow-same-origin:支持操作嵌入内容的dom，如果不设置该属性，嵌入内容会被当成单独的源。
  allow-top-navigation:支持嵌入内容导航到顶级窗口。
  空字符:不支持所有的行为。
  用空格间隔开就能设置多个属性值。

  <iframe sandbox="allow-forms allow-scripts" src="./img/1.png"></iframe>

• seamless:去掉iframe标签边框，属性值为布尔属性，让其看起来像页面的一部分。该属性只有谷歌跟Safari6支持。

注意事项

虽然iframe很方便，但是它还是有安全隐患的，iframe可能会泄露一些信息。所以我们在使用iframe的时候有几项注意事项：

• 设置sandbox,该属性可以限制条件提高安全性。
• 优先选择https开头的路径，https开头的比http多了SSL/TSL加密，安全性要高。
• 考虑其他方式，如果其他方式确实不好实现就可以考虑iframe。

总结

iframe能够方便快捷地将页面嵌入到另一个页面当中，但使用的时候还要考虑安全性，各个属性也要牢记，尤其是sandbox可以帮助我们提高安全性。