[html] 第7天 iframe框架都有哪些优缺点？

[haizhilin2013]

第7天 iframe框架都有哪些优缺点？

[yxkhaha]

优点

• 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页
• 技术易于掌握，使用方便，可主要应用于不需搜索引擎来搜索的页面
• 方便制作导航栏

缺点

• 会产生很多页面，不容易管理
  *不容易打印
• 对浏览器搜索引擎不友好
• 多框架的页面会增加服务器的http请求

[Konata9]

优点：

• 可以实现异步刷新，单个 iframe 刷新不影响整体窗口的刷新（可以实现无刷新上传，在 FormData 无法使用时）
• 可以实现跨域，每个 iframe 的源都可以不相同（方便引入第三方内容）
• 多页面应用时，对于共同的 header, footer 可以使用 iframe 加载，拆分代码（导航栏的应用）

缺点：

• 每一个 iframe 都对应着一个页面，也就意味着多余的 css, js 文件的载入，会增加请求的开销
• 如果 iframe 内还有滚动条，会严重影响用户体验
• window.onload 事件会在所有 iframe 加载完成后才触发，因此会造成页面阻塞

参考文章: Iframe 有什么好处，有什么坏处？国内还有哪些知名网站仍用Iframe，为什么？有哪些原来用的现在抛弃了？又是为什么？

[x011223]

优点：

• 可以实现异步刷新，单个 iframe 刷新不影响整体窗口的刷新（可以实现无刷新上传，在 FormData 无法使用时）
• 可以实现跨域，每个 iframe 的源都可以不相同（方便引入第三方内容）
• 多页面应用时，对于共同的 header, footer 可以使用 iframe 加载，拆分代码（导航栏的应用）

缺点：

• 每一个 iframe 都对应着一个页面，也就意味着多余的 css, js 文件的载入，会增加请求的开销
• 如果 iframe 内还有滚动条，会严重影响用户体验
• window.onload 事件会在所有 iframe 加载完成后才触发，因此会造成页面阻塞

参考文章: Iframe 有什么好处，有什么坏处？国内还有哪些知名网站仍用Iframe，为什么？有哪些原来用的现在抛弃了？又是为什么？

缺点第三条，请问既然可以异步刷新，那么为什么不能异步加载呢？

[ZhChen7]

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]

https://www.cnblogs.com/consh/p/6589602.html

[blueRoach]

缺点：
1.不利于seo
2.增加服务器的请求
3.window.onload会等待所有iframe加载完成后才触发（可以通过动态的设置iframe的SRC解决）
优点：
1.投放广告之类的飘窗无疑是最好的选择
2.跨域
3.异步刷新
4.与主页面是分离的，可以独自重载

[giggleCYT]

iframe的优点：
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
iframe的缺点：
1.会产生很多页面，不容易管理。
2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

[smile-2008]

优点
重载页面时不需要重载整个页面，只需要重载页面中的一个框架页
技术易于掌握，使用方便，可主要应用于不需搜索引擎来搜索的页面
方便制作导航栏
缺点
会产生很多页面，不容易管理
*不容易打印
对浏览器搜索引擎不友好
多框架的页面会增加服务器的http请求

[buuug7]

HTML内联框架元素 <iframe>表示嵌套的浏览上下文，它能够把一个HTML页面嵌入到当前页面中，每个嵌入的浏览上下文都有自己的会话和DOM树。

优点

• 可以容易的嵌套其他网页
• 完全隔绝，主页面跟<iframe>之间加载的资源互不影响，类似于国中之国

缺点

• 不易于维护
• 主页面跟<iframe>中嵌套的页面互相操作不方便
• 用户体验非常糟糕

结论

能不用<iframe>就不要使用，开源社区HTML最佳实践都不推荐，<iframe>算是web发展过程中的一个妥协产物

[amikly]

优点

1. 重载时只需要重载页面中的一个iframe，不需要重载整个页面
2. 可以实现异步刷新，单个iframe刷新不影响整个窗口的刷新（在FormData无法使用时，可以实现无刷新上传）
3. 可以实现跨域，每个iframe的源可以不相同（方便引入第三方内容）
4. 多页面应用时，对于共同的header，footer可以使用iframe加载，拆分代码（方便制作导航栏）
5. 技术容易掌握。可主要应用于不需要搜索引擎来搜索的页面

缺点

1. 会产生多个页面，不容易管理
2. 多iframe的页面会增加服务器的http请求
3. 每个iframe对应一个页面，其多余的css和js文件的载入会增加请求的开销
4. window.onload事件会在所有的iframe加载完成后才触发，会造成页面阻塞
5. 如果iframe内有滚动条，会影响用户的使用体验
6. 代码复杂，无法被一些搜索引擎索引到，对搜索引擎不友好

现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发

[qiilee]

参考答案：yisainan/web-interview#4

[WangXi01]

优点：

1. 可以加载第三方的界面进来
2. iframe可以和父界面互动，实现一些功能
   缺点：
3. 加载了额外的东西进来，影响速度
4. 不利于seo

[Iambecauseyouare]

优点:
1.iframe能够把嵌入的网页原样展现出来
2.模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决
5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页
6.方便制作导航栏
缺点：
1.样式和脚本需要额外链入，调用外部界面需要额外调用css，增加页面额外的请求次数，增加服务器的http请求
2.代码复杂，在网页中使用框架结构最大的弊病时搜说引擎的“蜘蛛”程序无法解读这种页面，会影响搜索引擎优化，努力与网站排名
3.框架结构有时会让人感到迷惑，滚顶条除了会挤占有限的页面空间外会使iframe布局混乱，还会分散访问者的注意力，影响用户体验
4.链接导航疑问，运用框架结构时，必须保证正确配置所有的导航链接，否则，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他站点可去
5.产生多个页面，不易管理
6.多数小型的移动设备（PDA手机）无法完全显示框架，设备兼容性差

[lili-0923]

优点：

1、重载页面时不必整个页面加载，只需重载框架页（增加了网页加载速度）

2、例如加载缓慢的第三方广告和图标时，使用框架方便简洁。

缺点：

1、不利于搜索引擎抓取解读

2、移动设备页面上框架显示不全

3、不容易打印

4、框架页面过多会增加服务http请求，且不易管理

5、浏览器的后退按钮失效

[pengsir120]

优点：沙箱隔离，可以用于微前端
缺点：使用不恰当会造成混淆

[xiaotangaichihuluobo]

优点
内容隔离：

<iframe> 提供了一个独立的文档上下文，能够有效隔离嵌入内容与主页面的样式和脚本。 便捷的内容集成：

可以轻松地在页面中集成外部资源，如视频、地图和其他网页内容，而不需要将它们直接嵌入到 HTML 中。
异步加载：

嵌入内容不会影响主页面的加载速度，因为它们可以异步加载。
支持跨域内容：

允许从不同域加载内容，可以用于集成第三方服务。
缺点
SEO 不友好：

搜索引擎可能不会索引 <iframe> 中的内容，这可能会影响网站的搜索引擎优化（SEO）。
安全性问题：

嵌入不可信的内容可能导致安全问题，如跨站脚本（XSS）攻击。
可能需要使用 sandbox 属性来限制 <iframe> 的权限。
用户体验：

可能导致用户体验不佳，例如滚动条、样式不一致等，特别是在嵌入的页面和主页面之间的设计风格不同。
响应式设计问题：

处理不同屏幕尺寸的适应性可能更复杂，需要额外的 CSS 来确保 <iframe> 在各种设备上都能正常显示。