前言
甲问:说说你知道的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道面试题,并对每个问题作出了回答和解析。
有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享
部分文档展示:
文章篇幅有限,后面的内容就不一一展示了
有需要的小伙伴,可以点下方卡片免费领取
转载自CSDN-专业IT技术社区
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/qq_53225741/article/details/129241291