前端面试题（3）—— iframe相关知识

iframe元素会创建包含另外一个文档的内联框架（即行内框架），即会在网页中显示网页。

---

• 添加 iframe 的语法：
  <iframe src="URL"></iframe>
  URL指向隔离页面的位置。
  这里我不注释代码了，直接展示一下效果给到大家，下面就是一个iframe创建的内联框架：

---

• Iframe设置高度和宽度：
  height和width属性用于规定iframe的高度和宽度。属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。
  例如：
  <iframe src="URl" width="200" height="200"></iframe>

---

• Iframe删除边框
  frameborder属性规定是否显示iframe周围的边框，设置属性值为 "0" 就可以移除边框。
  例如：
  <iframe src=URL frameborder="0"></iframe>

---

• 使用iframe作为链接的目标
  iframe可用作链接的目标（target），链接的target属性必须引用iframe的name属性。
  例如：
  <iframe src=URL name="aa"></iframe>
<p><a href="" target="aa">AAA</a></p>

---

• iframe优点:
  1.iframe能够把嵌入的网页原样展现出来；
  2.模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；
  3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用；
  4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；
  5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页；
  6.方便制作导航栏。

---

• iframe缺点:
  1.iframe会阻塞主页面的Onload事件（在页面完全载入后执行，包括图片css等用法：window.onload = function(){xxx}）；
  2.iframe和主页面共享链接池，而浏览器对相同城的链接有限制，所以会影响页面的并行加载；
  3.代码复杂，搜索引擎无法理解，不利于SEO；
  4.iframe框架页面会增加服务器的http请求，对于大型网站不可取；
  5.很多的移动设备无法完全显示框架，设备兼容性差。

解决办法：用js动态给iframe添加src属性。