一个容易被忽视的标签 —

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

news2024/11/15 17:45:31

前言

甲问：说说你知道的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道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/376472.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！