一个容易被忽视的标签 —— iframe

5,557 阅读3分钟

本文正在参加「金石计划 . 瓜分6万现金大奖」

前言

甲问:说说你知道的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>

效果如下:

image.png

但是,我们也会发现有些网址会无法访问,比如baidu.com,效果如下:

<iframe src='https://www.baidu.com' width="100%" height="300px"></iframe>
image.png

这是为什么呢?我首先想到的是产生了跨域,然后查看后台我们可以看到如下错误:

image.png

这个错误也印证了我的猜想。对于 iframe 产生的跨越,有很多解决方法,大家可以在网上查阅相关资料。

iframe 的优缺点

iframe 之所以这么容易被忽视,其中一个很大的原因就是它产生的一些缺点问题。这里整理了部分 iframe 的优缺点。

优点:

  • 可以减少数据的传输,减少网页的加载时间
  • 使用起来很方便
  • 方便开发,减少代码的重复率

缺点:

  • 部分使用会产生跨域(如上所示)
  • 会产生很多的页面,不易于管理
  • 浏览器的后退按钮无效

iframe 常用属性

  • height:框架作为一个普通元素的高度
  • width:框架作为一个普通元素的宽度
  • name:框架的名称
  • scrolling:框架是否滚动
  • src:框架的地址,可以使用页面地址,也可以是图片的地址。
  • frameborder:是否显示边框
  • ...

总结

iframe 中文翻译过来就是框架的意思,iframe 标签规定一个内联框架。内联框架就是在一个页面中嵌入另一个页面。

有很多网页看上去是一个网页,但实际上它其中可能镶嵌有其它网页,iframe 标签就可以把其它网页无缝地嵌入在一个页面中。

总之,这个看起来不起眼、容易忽视、被HTML5抛弃的标签,被应用到的地方可真不少。