一个容易被忽视的标签 —— iframe
Posted 前端码农小王
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个容易被忽视的标签 —— iframe相关的知识，希望对你有一定的参考价值。
前言
甲问：说说你知道的html标签。
乙于是说了一大堆标签，比如div，span等等。
甲说：那你知道 iframe 标签吗？
乙这时候迟疑了片刻，缓缓说出：知道它，但是不太了解这个标签。
HTML里有很多标签，比如head，body，text，p，section等等，这些都是很常用的标签。但是今天的主角并不是它们，而是一个貌似看起来不起眼的标签 iframe。我问了我身边很多朋友，“说听过，但是没怎么用到过” 是大部分人的回答，实际上确实如此，如今已经是HTML5时代了，由于 iframe 可能在某些方面不符合标准网页设计的理念，已经被HTMLl5抛弃，目前的HTML5不再支持它了。
iframe 介绍
虽然这个标签在HTML5中不被支持，但是我也在某些项目中偶然间发现了它的存在，也因此去专门了解了它的相关知识。不了解不知道，一了解才发现原来网站上的嵌入广告就是通过它来实现的。
我们经常可以在一些网站上看到广告，网站引入广告是很正常的事。而将广告放在网页上的做法就是使用 iframe 引入广告地址就可以了，所以说这个标签并不是所谓的看起来不起眼，而是我们对它的了解不够，一旦了解了，会发现很多地方都有它的身影。
那么，使用 iframe 来进行设置广告有什么好处呢？通过查阅资料得知，用它来加入广告可以减少网页布局的紊乱，也可以增加网页的安全性。
iframe 应用
聊了这么多理论知识，我们来应用一下这个标签吧，下面是我用 iframe 写的一个 demo，我在 iframe 标签里放入掘金的网址，便可以在网页中嵌入掘金网页。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><iframe src='https://www.juejin.cn' width="100%" height="300px"></iframe>
</body>
</html>
效果如下：
但是，我们也会发现有些网址会无法访问，比如baidu.com，效果如下：
<iframe src='https://www.baidu.com' width="100%" height="300px"></iframe>
这是为什么呢？我首先想到的是产生了跨域，然后查看后台我们可以看到如下错误：
这个错误也印证了我的猜想。对于 iframe 产生的跨越，有很多解决方法，大家可以在网上查阅相关资料。
iframe 的优缺点
iframe 之所以这么容易被忽视，其中一个很大的原因就是它产生的一些缺点问题。这里整理了部分 iframe 的优缺点。
优点：
- 可以减少数据的传输，减少网页的加载时间
- 使用起来很方便
- 方便开发，减少代码的重复率
缺点：
- 部分使用会产生跨域（如上所示）
- 会产生很多的页面，不易于管理
- 浏览器的后退按钮无效
iframe 常用属性
- height:框架作为一个普通元素的高度
- width:框架作为一个普通元素的宽度
- name:框架的名称
- scrolling:框架是否滚动
- src：框架的地址，可以使用页面地址，也可以是图片的地址。
- frameborder:是否显示边框
- …
总结
iframe 中文翻译过来就是框架的意思，iframe 标签规定一个内联框架。内联框架就是在一个页面中嵌入另一个页面。
有很多网页看上去是一个网页，但实际上它其中可能镶嵌有其它网页，iframe 标签就可以把其它网页无缝地嵌入在一个页面中。
总之，这个看起来不起眼、容易忽视、被HTML5抛弃的标签，被应用到的地方可真不少。
最后
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、javascript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享
部分文档展示：
文章篇幅有限，后面的内容就不一一展示了
有需要的小伙伴，可以点下方卡片免费领取
以上是关于一个容易被忽视的标签 —— iframe的主要内容，如果未能解决你的问题，请参考以下文章