Fe-interview: [html] 第7天 iframe框架都有哪些优缺点?

Created on 22 Apr 2019  ·  9Comments  ·  Source: haizlin/fe-interview

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

html

Most helpful comment

优点:

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

缺点:

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

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

All 9 comments

优点

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

    缺点

  • 会产生很多页面,不容易管理
    *不容易打印

  • 对浏览器搜索引擎不友好
  • 多框架的页面会增加服务器的http请求

优点:

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

缺点:

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

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

优点:

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

缺点:

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

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

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

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已经渐渐的退出了前端开发

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

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

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

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

优点

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

缺点

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

结论

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

Was this page helpful?
0 / 5 - 0 ratings