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

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

news 2025/12/21 3:01:16

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

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

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

<iframe>标签简介

<iframe>标签是 HTML中的一个元素,用于在当前 HTML文档中嵌入另一个 HTML文档。它可以在一个 HTML页面中嵌入另一个 HIML页面或其他类型的文档,比如 PDF 文件或视频文件。

<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> 嵌入到主应用中的一种实现方式。

意思和实现方式：

  1. 微前端架构：

    • 微前端是一种软件架构模式，旨在解决单体应用随着时间增长而变得复杂、难以维护和扩展的问题。它将大型单体应用拆分为更小的、独立的子应用，每个子应用可以由不同的团队独立开发、测试和部署。

  2. 基于 <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＞标签

面试题&#xff1a;iframe 标签的作用是什么?有哪些优缺点 ? 讲真&#xff0c;刷这道面试题之前我根本没有接触过iframe&#xff0c;网课没讲过&#xff0c;项目实战没用过&#xff0c;但却在面试题里出现了&#xff01;好吧&#xff0c;我只能说&#xff1a;前端路漫漫&…...

编程日记 2024/7/27 12:35:55

Docker-Compose实现MySQL之主从复制

1. 主服务器(IP:192.168.186.77) 1.1 docker-compose.yml services:mysql-master:image: mysql:latest # 使用最新版本的 MySQL 镜像container_name: mysql-master # 容器的名称environment:MYSQL_ROOT_PASSWORD: 123456 # MySQL root 用户的密码MYSQL_DATABASE: masterd…...

编程日记 2024/7/27 12:34:54

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

jetson的库&#xff0c;特别是使用显卡的库&#xff0c;大多需要单独安装 大概率是重装了pytorch&#xff0c;可以使用jetson官网的pytorch&#xff01; 下面是官网的链接 PyTorch for Jetson - Announcements - NVIDIA Developer Forums 安装完成之后先使用命令查看是否安…...

编程日记 2024/7/27 12:32:52

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

Fail2ban是一款在Linux服务器上用于保护系统免受恶意攻击的防护工具。它通过监视系统日志&#xff0c;检测到多次失败的登录尝试或其他恶意行为后&#xff0c;会自动将攻击源的IP地址加入防火墙的黑名单&#xff0c;从而阻止攻击者进一步访问服务器。本文将介绍如何在Linux系统…...

编程日记 2024/7/27 12:31:50

js的深浅拷贝

深浅拷贝是编程中对数据复制的两种不同方式&#xff0c;它们在处理对象和数组等复合数据结构时尤为重要。下面将详细解释这两种拷贝方式。 浅拷贝&#xff08;Shallow Copy&#xff09; 浅拷贝创建了原始对象的一个新实例&#xff0c;但这个新实例的属性只是原始对象属性的引…...

编程日记 2024/7/27 12:29:48

实验八: 彩色图像处理

目录 一、实验目的 二、实验原理 1. 常见彩色图像格式 2. 伪彩色图像 3. 彩色图像滤波 三、实验内容 四、源程序和结果 (1) 主程序（matlab (2) 函数FalseRgbTransf (3) 函数hsi2rgb (4) 函数rgb2hsi (5) 函数GrayscaleFilter (6) 函数RgbFilter 五、结果分析 1. …...

编程日记 2024/7/27 12:28:47

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

目录 一、用法精讲 171、pandas.Series.nlargest方法 171-1、语法 171-2、参数 171-3、功能 171-4、返回值 171-5、说明 171-6、用法 171-6-1、数据准备 171-6-2、代码示例 171-6-3、结果输出 172、pandas.Series.nsmallest方法 172-1、语法 172-2、参数 172-3、…...

编程日记 2024/7/27 12:27:46

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

目录 摘要 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1系统开发流程 2.2.2 用户登录流程 2.2.3 系统操作流程 2.2.4 添加信息流程 2.2.5 修改信息流程 2.2.6 删除信息流程 2.3 系统功能…...

编程日记 2024/7/27 12:26:45

自训练和增量训练word2vec模型

1、自己准备训练语料文件 根据自己的业务场景准备训练数据&#xff0c;比如用户在商城上的同购行为序列或同浏览行为序列。 我们希望通过自己训练业务相关的语料word2vec模型来获得词嵌入、词相关性查询等。 1.1 准备语料库文件 # 示例&#xff1a;准备自己的一个大规模的语…...

编程日记 2024/7/27 12:25:44

华三路由器开启web访问

配置路由器&#xff1a; # 配置Web用户名为admin&#xff0c;认证密码为admin&#xff0c;服务类型为http&#xff0c;用户角色为network-admin。 [Sysname] local-user admin [Sysname-luser-manage-admin] service-type http [Sysname-luser-manage-admin] authorization…...

编程日记 2024/7/27 12:21:41

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

目录 1、概述 2、高效软件工具介绍 2.1、窗口查看工具SPY 2.2、Dependency Walker 2.3、剪切板查看工具Clipbrd 2.4、GDI对象查看工具GDIView 2.5、Process Explorer 2.6、Prcoess Monitor 2.7、API Monitor 2.8、调试器Windbg 2.9、反汇编工具IDA 2.10、抓包工具…...

编程日记 2024/7/27 12:19:38

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

更换原因&#xff1a;node-sass经常会出现node版本问题&#xff0c;就很麻烦 卸载项目中的node-sass sass-loader npm uninstall sass-loader sass 安装dart-sas sass-loader 推荐安装sass1.26.2 sass-loader7.3.1 npm install sass-loader7.3.1 sass1.26.2 从新配置vue.…...

编程日记 2024/7/27 12:18:37

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

情况描述 近期发现48网段主机无法访问8.83这个VIP&#xff08;虚拟IP&#xff09;&#xff0c;环境是 8.83 绑定了两个LVS实例&#xff0c;然后LVS实例转发到后端的nginx 静态资源&#xff1b;整个流程是&#xff0c;客户端发起对VIP的请求&#xff0c;LVS将请求转发到后端实例…...

编程日记 2024/7/27 12:17:36

类和对象(四)

构造函数中的初始化列表 之前在实现构造函数时&#xff0c;主要是在函数体内进行赋值&#xff0c;而构造函数还有另一种初始化方式&#xff0c;通过初始化列表进行初始化。 初始化列表的使⽤⽅式是以⼀个冒号开始&#xff0c;接着是⼀个以逗号分隔的数据成员列表&#xff0c;…...

编程日记 2024/7/27 12:15:34

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

前言 汇川的HMI软件是使用了Qt来编写的，因此在汇川的HMI程序编写过程，是支持使用qt的样式来自定义部件样式的，即qss格式。 概述 汇川的软件本身提供三个系统的style样式，我们可以直接使用，但是，如果系统提供的样式不符合你的需求，那么你可以对其进行修改，或者自己新建…...

编程日记 2024/7/27 12:14:33

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

在Git项目中添加并应用.gitignore文件 创建或修改.gitignore文件&#xff1a; 在项目的根目录下创建一个名为.gitignore的文件。如果已经有此文件&#xff0c;可以直接修改。 在文件中添加您希望Git忽略的文件和目录。例如&#xff1a; # 忽略所有的log文件 *.log# 忽略所有的…...

编程日记 2024/7/27 12:10:29

LeetCode Hot100 搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。…...

编程日记 2024/7/27 12:08:27

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

iOS中的KVO&#xff08;Key-Value Observing&#xff09;详解 一、KVO概述 KVO&#xff08;Key-Value Observing&#xff09;&#xff0c;即键值观察/监听&#xff0c;是苹果提供的一套事件通知机制。它允许一个对象&#xff08;观察者&#xff09;观察/监听另一个对象&#…...

编程日记 2024/7/27 12:07:26

算法 —— 暴力枚举

目录 循环枚举 P2241 统计方形&#xff08;数据加强版&#xff09; P2089 烤鸡 P1618 三连击&#xff08;升级版&#xff09; 子集枚举 P1036 [NOIP2002 普及组] 选数 P1157 组合的输出 排列枚举 P1706 全排列问题 P1088 [NOIP2004 普及组] 火星人 循环枚举 顾名思…...

编程日记 2024/7/27 12:06:25

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

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 1023D - Array Restoration 二、解题报告 1、思路分析 先考虑合法性检查&#xff1a; 对于数字x&#xff0c;其最左位置和最右位置 之间如果存在数字比x小&#xff0c;则非法 由于q次操作&#xff0c;第q…...

编程日记 2024/7/27 12:05:25

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/11/25 10:36:53

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/12/12 8:18:42

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/12/18 5:57:51

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/12/18 20:09:12

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/12/10 23:18:38

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2025/12/15 13:24:52

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2025/12/13 7:21:22

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2025/12/12 12:58:45