当前位置：首页 > news >正文

HTML前端面试题之＜iframe＞标签

news 2026/2/7 22:02:02

面试题：iframe 标签的作用是什么?有哪些优缺点 ?

讲真，刷这道面试题之前我根本没有接触过iframe，网课没讲过，项目实战没用过，但却在面试题里出现了！好吧，我只能说：前端路漫漫，学无止境……

好吧，那就借机学习一下iframe

<iframe>标签简介

代码示例：在网页中嵌入Webpack官网的首页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用iframe嵌入网页</title>
</head>
<body><h1>欢迎访问我们的网站！</h1><p>这里是我们网站的主页内容。</p><h2>Webpack官方网站</h2><!-- 使用iframe嵌入新闻网页 --><iframe src="https://webpack.docschina.org/concepts/#entry" width="600" height="400" title="Latest News"><!-- 如果浏览器不支持iframe，则显示此内容 --><p>抱歉，您的浏览器不支持嵌入框架，请<a href="https://webpack.docschina.org/concepts/#entry">点击这里</a>查看网站内容。</p></iframe><p>继续浏览我们的网站内容...</p>
</body>
</html>

浏览器预览效果

<iframe>标签优缺点

<iframe>标签的优点包括

可以让页面嵌入其他网站或文档，从而扩展页面的功能。

可以使用一个单独的文档来管理页面的内容，从而简化页面的管理。

可以在一个页面中嵌入多个，从而允许多个不同的内容在同一页面中显示。

<iframe>标签的缺点包括

可能会影响页面的加载速度和性能，特别是在页面中嵌入大型媒体文件时。

可能会影响页面的可访问性，因为屏幕阅读器可能无法读取嵌入的内容。

可能会导致安全风险，因为嵌入的文档可以访问父页面的JavaScript 对象，从而可能被用于恶意攻击

补充：这题如果有同学能提到部分微前端的实现是基于 iframe 的，会加分

好的，那么，什么是微前端呢？

微前端是一种软件架构模式，旨在解决单体应用随着时间增长而带来的复杂性、维护困难以及团队协作上的挑战。它通过将大型单体应用拆分为更小、更独立的部分（通常称为微前端应用或子应用），每个部分可以由不同的团队独立开发、测试和部署。

部分微前端基于 <iframe> 实现，通常指在微前端架构中，将不同的子应用（或称微前端应用）作为独立的 HTML 页面通过 <iframe> 嵌入到主应用中的一种实现方式。

意思和实现方式：

微前端架构：
- 微前端是一种软件架构模式，旨在解决单体应用随着时间增长而变得复杂、难以维护和扩展的问题。它将大型单体应用拆分为更小的、独立的子应用，每个子应用可以由不同的团队独立开发、测试和部署。
基于 <iframe> 的实现：
- 在微前端架构中，每个子应用可以作为一个独立的前端项目，它们可以使用不同的技术栈、框架甚至语言来开发。为了将这些子应用整合到主应用中，可以使用 <iframe> 元素将它们嵌入到主页面中。

示例：

假设一个电子商务平台拥有多个功能模块，如商品展示、购物车、支付等，每个模块可以作为一个微前端子应用。这些子应用可以独立开发，最终通过 <iframe> 嵌入到主应用的页面中，形成一个统一的用户界面。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>主应用</title>
</head>
<body><h1>电子商务平台</h1><!-- 嵌入商品展示子应用 --><iframe src="https://products.example.com" width="100%" height="600px"></iframe><!-- 嵌入购物车子应用 --><iframe src="https://cart.example.com" width="100%" height="400px"></iframe><!-- 嵌入支付子应用 --><iframe src="https://checkout.example.com" width="100%" height="300px"></iframe></body>
</html>

在这个示例中，每个 <iframe> 嵌入了一个不同的子应用，分别是商品展示、购物车和支付。这些子应用可以独立开发和部署，通过主应用的统一界面提供完整的电子商务功能。

总结来说，基于 <iframe> 实现的部分微前端允许开发团队在技术上更为灵活，同时保持应用的独立性和隔离性，是微前端架构的一种实现方式。

再扯点题外的，今天我上午一上午只刷了两道前端面试题，因为我需要把面试题的答案吃透，所以需要把答案所涉及的知识点都学一遍。

而面试题和我平时敲代码还是有挺大区别的，敲代码 = 实战，面试题 = 八股文。

我虽然会敲代码、写项目，但是在面对面试题时却很多都答不上来，既然实战和面试的知识不对等，会不会导致大家为了找工作而把大部分精力放在面试八股文上，却忽略了真正重要的实战呢？

HTML前端面试题之＜iframe＞标签

面试题：iframe 标签的作用是什么?有哪些优缺点 ?

<iframe>标签简介

<iframe>标签优缺点

<iframe>标签的优点包括

<iframe>标签的缺点包括

补充：这题如果有同学能提到部分微前端的实现是基于 iframe 的，会加分

意思和实现方式：

示例：

相关文章：

HTML前端面试题之＜iframe＞标签

Docker-Compose实现MySQL之主从复制

jetson显卡没有加速，而是在用cpu推理？

Linux下如何安装配置Fail2ban防护工具

js的深浅拷贝

实验八: 彩色图像处理

Python酷库之旅-第三方库Pandas(048)

springboot爱宠屋宠物商店管理系统-计算机毕业设计源码52726

自训练和增量训练word2vec模型

华三路由器开启web访问

C++软件开发值得推荐的十大高效软件分析工具

vue2老项目中node-sass更换dart-sass

源/目的检查开启导致虚拟IP背后的LVS无法正常访问

类和对象(四)

＜PLC＞＜HMI＞＜汇川＞在汇川HMI画面中，如何为UI设置全局样式？

在Git项目中添加并应用“.gitignore”文件

LeetCode Hot100 搜索二维矩阵

iOS中的KVO（Key-Value Observing）详解

算法 —— 暴力枚举

构造+有序集合，CF 1023D - Array Restoration

C++实现分布式网络通信框架RPC(3)--rpc调用端

简易版抽奖活动的设计技术方案

Unity3D中Gfx.WaitForPresent优化方案

黑马Mybatis

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

JavaScript 数据类型详解

Go语言多线程问题

作为测试我们应该关注redis哪些方面