第7天 iframe框架都有哪些优缺点?
Activity
yxkhaha commentedon Apr 23, 2019
优点
缺点
*不容易打印
Konata9 commentedon Jul 24, 2019
优点:
iframe
刷新不影响整体窗口的刷新(可以实现无刷新上传,在FormData
无法使用时)iframe
的源都可以不相同(方便引入第三方内容)header
,footer
可以使用iframe
加载,拆分代码(导航栏的应用)缺点:
iframe
都对应着一个页面,也就意味着多余的css
,js
文件的载入,会增加请求的开销iframe
内还有滚动条,会严重影响用户体验window.onload
事件会在所有iframe
加载完成后才触发,因此会造成页面阻塞参考文章: Iframe 有什么好处,有什么坏处?国内还有哪些知名网站仍用Iframe,为什么?有哪些原来用的现在抛弃了?又是为什么?
x011223 commentedon Aug 17, 2019
缺点第三条,请问既然可以异步刷新,那么为什么不能异步加载呢?
ZhChen7 commentedon Sep 25, 2019
iframe是一种框架,也是一种很常见的网页嵌入方式
iframe的优点:
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。
iframe的缺点:
1.会产生很多页面,不容易管理。
2.iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。
3.代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。
5.iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。
分析了这么多,现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发
censek commentedon Oct 8, 2019
https://www.cnblogs.com/consh/p/6589602.html
blueRoach commentedon May 21, 2020
缺点:
1.不利于seo
2.增加服务器的请求
3.window.onload会等待所有iframe加载完成后才触发(可以通过动态的设置iframe的SRC解决)
优点:
1.投放广告之类的飘窗无疑是最好的选择
2.跨域
3.异步刷新
4.与主页面是分离的,可以独自重载
giggleCYT commentedon Jun 1, 2020
iframe的优点:
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。
iframe的缺点:
1.会产生很多页面,不容易管理。
2.iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。
3.代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。
5.iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。
smile-2008 commentedon Sep 1, 2020
优点
重载页面时不需要重载整个页面,只需要重载页面中的一个框架页
技术易于掌握,使用方便,可主要应用于不需搜索引擎来搜索的页面
方便制作导航栏
缺点
会产生很多页面,不容易管理
*不容易打印
对浏览器搜索引擎不友好
多框架的页面会增加服务器的http请求
buuug7 commentedon Jan 9, 2021
HTML内联框架元素
<iframe>
表示嵌套的浏览上下文,它能够把一个HTML页面嵌入到当前页面中,每个嵌入的浏览上下文都有自己的会话和DOM树。优点
<iframe>
之间加载的资源互不影响,类似于国中之国缺点
<iframe>
中嵌套的页面互相操作不方便结论
能不用
<iframe>
就不要使用,开源社区HTML最佳实践都不推荐,<iframe>
算是web发展过程中的一个妥协产物amikly commentedon Oct 25, 2021
优点
缺点
现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发
qiilee commentedon Jan 11, 2022
参考答案:yisainan/web-interview#4
WangXi01 commentedon Jul 12, 2022
优点:
缺点:
Iambecauseyouare commentedon Feb 14, 2023
优点:
1.iframe能够把嵌入的网页原样展现出来
2.模块分离,便于更改,如果有多个网页引用iframe,只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷
3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,增加代码的可重用
4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决
5.重载页面时不需要重载整个页面,只需要重载页面中的一个框架页
6.方便制作导航栏
缺点:
1.样式和脚本需要额外链入,调用外部界面需要额外调用css,增加页面额外的请求次数,增加服务器的http请求
2.代码复杂,在网页中使用框架结构最大的弊病时搜说引擎的“蜘蛛”程序无法解读这种页面,会影响搜索引擎优化,努力与网站排名
3.框架结构有时会让人感到迷惑,滚顶条除了会挤占有限的页面空间外会使iframe布局混乱,还会分散访问者的注意力,影响用户体验
4.链接导航疑问,运用框架结构时,必须保证正确配置所有的导航链接,否则,会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内,这种情况下访问者便被陷住了,因为此时他没有其他站点可去
5.产生多个页面,不易管理
6.多数小型的移动设备(PDA手机)无法完全显示框架,设备兼容性差
lili-0923 commentedon Feb 2, 2024
优点:
1、重载页面时不必整个页面加载,只需重载框架页(增加了网页加载速度)
2、例如加载缓慢的第三方广告和图标时,使用框架方便简洁。
缺点:
1、不利于搜索引擎抓取解读
2、移动设备页面上框架显示不全
3、不容易打印
4、框架页面过多会增加服务http请求,且不易管理
5、浏览器的后退按钮失效
pengsir120 commentedon Sep 8, 2024
优点:沙箱隔离,可以用于微前端
缺点:使用不恰当会造成混淆
xiaotangaichihuluobo commentedon Sep 19, 2024
优点
<iframe> 提供了一个独立的文档上下文,能够有效隔离嵌入内容与主页面的样式和脚本。 便捷的内容集成:内容隔离:
可以轻松地在页面中集成外部资源,如视频、地图和其他网页内容,而不需要将它们直接嵌入到 HTML 中。
异步加载:
嵌入内容不会影响主页面的加载速度,因为它们可以异步加载。
支持跨域内容:
允许从不同域加载内容,可以用于集成第三方服务。
缺点
SEO 不友好:
搜索引擎可能不会索引 <iframe> 中的内容,这可能会影响网站的搜索引擎优化(SEO)。
安全性问题:
嵌入不可信的内容可能导致安全问题,如跨站脚本(XSS)攻击。
可能需要使用 sandbox 属性来限制 <iframe> 的权限。
用户体验:
可能导致用户体验不佳,例如滚动条、样式不一致等,特别是在嵌入的页面和主页面之间的设计风格不同。
响应式设计问题:
处理不同屏幕尺寸的适应性可能更复杂,需要额外的 CSS 来确保 <iframe> 在各种设备上都能正常显示。