Advertisement

你知道iframe是什么吗?它有什么缺点?

阅读量:

iframe元素能够创建内联框架并嵌入其他页面内容,优点包括原封不动显示嵌入页面、支持快速更改多个页面内容(通过修改iframe内容)、便于代码重用以及解决加载缓慢的第三方内容(如图标和广告)等问题。然而,iframe也存在一些缺点:阻塞主页面onload事件、与主页面共享连接池导致浏览器对相同域限制、框架结构复杂可能影响用户体验、代码难以被搜索引擎索引(影响SEO)、移动设备兼容性差以及增加服务器http请求(不利于大型网站)。鉴于这些原因,如今前端开发中更多采用Ajax替代iframe。。

嵌入式 iframes 生成一个嵌套式内联结构,并将其内容嵌入到当前文档中。为了提高用户体验,在某些不可用条件下需以某种方式向用户提示不可用浏览器的支持情况。该技术在部署时可能会带来以下问题:首先,在调用主页面的 onload 事件时会遭到阻塞;其次,在搜索引擎中此类页面难以被有效解析;最后由于 iframe 和主页面共享相同的网络资源池(即连接池),这将导致网络性能受到影响

优点:

该技术能够完美呈现嵌入式网页。
当多个网站使用iframe时只需修改内层代码即可实现所有调用页面内容都能轻松更改。
为了统一样式编写一个通用版本然后通过iframe将其嵌入到其他页面可显著提升代码复用性。
遇到像图片和该广告这样的加载缓慢问题可以通过iframe有效解决。

缺点:

Iframe会导致主页面onload事件被阻塞;
Iframe和主页面共用同一个连接池资源,但浏览器对同一域内的多个资源加载存在限制,在这种情况下可能会出现页面并发加载的问题;
Iframe框架的结构有时会令人感到困惑;如果框架数量较多,则可能导致上下文或左右文滚动条出现(甚至在某些情况下滚动条可能交替显示),从而分散访问者的注意力并降低用户体验度;
由于大多数搜索引擎爬虫目前还无法有效地抓取Iframe内容中的信息(尤其是嵌入式脚本),这对SEO优化(SEO)不利;
此外,在移动设备端展示效果较差的情况下(尤其是在屏幕过小导致无法完整显示框架时),跨设备兼容性成为一个挑战;
而嵌入式脚本框架不仅会增加服务器端的HTTP请求量( requests ),对于依赖较低带宽资源或有严格带宽控制要求的应用来说(尤其是大型网站),这种做法是不可取的。

如今大多数情况下Ajax已经被广泛用于取代iframe ,因此iframe在现代前端开发中已经逐渐被淘汰。 如果想在某些场景中仍然使用iframe,则可以通过javascript动态地设置src属性来实现绕过相关限制。

全部评论 (0)

还没有任何评论哟~