网站如何做竞价,wordpress 截取字符串,网站建设哪家最专业,创建自己的个人网站面试题#xff1a;iframe 标签的作用是什么?有哪些优缺点 ?
讲真#xff0c;刷这道面试题之前我根本没有接触过iframe#xff0c;网课没讲过#xff0c;项目实战没用过#xff0c;但却在面试题里出现了#xff01;好吧#xff0c;我只能说#xff1a;前端路漫漫iframe 标签的作用是什么?有哪些优缺点 ?
讲真刷这道面试题之前我根本没有接触过iframe网课没讲过项目实战没用过但却在面试题里出现了好吧我只能说前端路漫漫学无止境……
好吧那就借机学习一下iframe
iframe标签简介
iframe标签是 HTML中的一个元素,用于在当前 HTML文档中嵌入另一个 HTML文档。它可以在一个 HTML页面中嵌入另一个 HIML页面或其他类型的文档,比如 PDF 文件或视频文件。
iframe标签的主要作用是将一个页面嵌入到另一个页面中。例如在一个页面中嵌入一个地图或一个视频,或者在一个页面中嵌入一个在线表单。都可以使用iframe标签。
代码示例在网页中嵌入Webpack官网的首页
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title使用iframe嵌入网页/title
/head
bodyh1欢迎访问我们的网站/h1p这里是我们网站的主页内容。/ph2Webpack官方网站/h2!-- 使用iframe嵌入新闻网页 --iframe srchttps://webpack.docschina.org/concepts/#entry width600 height400 titleLatest News!-- 如果浏览器不支持iframe则显示此内容 --p抱歉您的浏览器不支持嵌入框架请a hrefhttps://webpack.docschina.org/concepts/#entry点击这里/a查看网站内容。/p/iframep继续浏览我们的网站内容.../p
/body
/html浏览器预览效果 iframe标签优缺点
iframe标签的优点包括
可以让页面嵌入其他网站或文档从而扩展页面的功能。
可以使用一个单独的文档来管理页面的内容从而简化页面的管理。
可以在一个页面中嵌入多个从而允许多个不同的内容在同一页面中显示。
iframe标签的缺点包括
可能会影响页面的加载速度和性能特别是在页面中嵌入大型媒体文件时。
可能会影响页面的可访问性因为屏幕阅读器可能无法读取嵌入的内容。
可能会导致安全风险因为嵌入的文档可以访问父页面的JavaScript 对象从而可能被用于恶意攻击 补充这题如果有同学能提到部分微前端的实现是基于 iframe 的会加分
好的那么什么是微前端呢
微前端是一种软件架构模式旨在解决单体应用随着时间增长而带来的复杂性、维护困难以及团队协作上的挑战。它通过将大型单体应用拆分为更小、更独立的部分通常称为微前端应用或子应用每个部分可以由不同的团队独立开发、测试和部署。
部分微前端基于 iframe 实现通常指在微前端架构中将不同的子应用或称微前端应用作为独立的 HTML 页面通过 iframe 嵌入到主应用中的一种实现方式。
意思和实现方式 微前端架构 微前端是一种软件架构模式旨在解决单体应用随着时间增长而变得复杂、难以维护和扩展的问题。它将大型单体应用拆分为更小的、独立的子应用每个子应用可以由不同的团队独立开发、测试和部署。 基于 iframe 的实现 在微前端架构中每个子应用可以作为一个独立的前端项目它们可以使用不同的技术栈、框架甚至语言来开发。为了将这些子应用整合到主应用中可以使用 iframe 元素将它们嵌入到主页面中。
示例
假设一个电子商务平台拥有多个功能模块如商品展示、购物车、支付等每个模块可以作为一个微前端子应用。这些子应用可以独立开发最终通过 iframe 嵌入到主应用的页面中形成一个统一的用户界面。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title主应用/title
/head
bodyh1电子商务平台/h1!-- 嵌入商品展示子应用 --iframe srchttps://products.example.com width100% height600px/iframe!-- 嵌入购物车子应用 --iframe srchttps://cart.example.com width100% height400px/iframe!-- 嵌入支付子应用 --iframe srchttps://checkout.example.com width100% height300px/iframe/body
/html在这个示例中每个 iframe 嵌入了一个不同的子应用分别是商品展示、购物车和支付。这些子应用可以独立开发和部署通过主应用的统一界面提供完整的电子商务功能。
总结来说基于 iframe 实现的部分微前端允许开发团队在技术上更为灵活同时保持应用的独立性和隔离性是微前端架构的一种实现方式。 再扯点题外的今天我上午一上午只刷了两道前端面试题因为我需要把面试题的答案吃透所以需要把答案所涉及的知识点都学一遍。
而面试题和我平时敲代码还是有挺大区别的敲代码 实战面试题 八股文。
我虽然会敲代码、写项目但是在面对面试题时却很多都答不上来既然实战和面试的知识不对等会不会导致大家为了找工作而把大部分精力放在面试八股文上却忽略了真正重要的实战呢
