2009-08-09 127 views
18

是否有任何理由而不是要使用iframe?我目前使用它从不同的服务器(注册页面 - 分布式应用程序的一部分)加载页面以提供无缝体验。是否使用iframe被认为是不好的做法或者它的使用是否正常?不使用IFrame的原因?

+1

看到这个问题:http://stackoverflow.com/questions/362730/are-iframes-considered-bad-practice – 2009-08-09 23:19:25

+6

供参考:多个答案是伟大的。检查所有这些,不只是接受的。 – Alex 2009-08-09 23:50:19

+0

[This](http://stackoverflow.com/a/362752/1257607)可能会帮助 – DanielV 2015-04-14 12:11:13

回答

16

iframe是一个很好的工具。它享有近乎通用的浏览器支持,易于实现并具有许多有用的功能。与其他任何HTML元素一样,它可能会被滥用,但它可以智能化地运用在可靠的用户界面中。

有些开发人员可能会反对使用AJAX,在某些情况下这可能是更合适的方法,但AJAX不是万能的,iframes可以是一个更简单的实现,它对用户具有相同的最终结果。先做任何最简单的事情,只有当你可以验证如何以及为什么不起作用时才做出改变。

+0

我想做AJAX,但正如上面提到的注册页面来自不同的子域,我无法做到这一点(跨域问题) – Alex 2009-08-09 21:43:27

+0

@Alex您可以通过编写自己的Web服务来获取并重新显示来自其他域的数据,并从您的AJAX代码中调用* that *来解决跨域问题。然而,正如我在答复中所说的,如果iframe已经完成了你所需要的,那么不要过度设计它,或者花费更多的时间。 – 2009-08-09 21:45:45

12

继续使用iframe。这就是为什么一个例子:

整个VISA验证的事情真的让我很烦。我很高兴在我信任的某个网站购物,当我重定向到我从未听说过的某个网站时(不是 visa.com),我必须填写其他表单并希望我能够正确重定向回到购物网站。

然后最近我在约翰刘易斯的网站购物,他们带着通过Visa验证的页面在iframe - 精彩!我仍然在看约翰刘易斯的网站,而所有这一切发生的是我被要求提供我的Verified By Visa密码 - 没有问题。

虽然作为网页开发人员,我知道这和原来的重定向没有技术上的区别,那里的用户体验是好多了!

+4

这是一个观点,但我会说相反,当输入信用卡数据时,我会更愿意完全在Visa验证(PayPal)网页(地址栏中显示的网址),而不是使用我的信用卡数据在某人的网站的iframe中。 – 2010-06-08 13:35:55

+2

@Marco Demaio:Visa验证页面包含我在注册该计划时输入的安全短语,所以我知道这是真实的。是的,理论上约翰刘易斯的某个人可以代理Verified By Visa内容并嗅探我的结果,但这就是为什么我说“我很乐意在我信任的某个网站购物” - 我相信John Lewis不会那样做。验证码签证的网址适用于某些您从未听说过的地址,因此看到它实际上会降低您的信任度。 – RichieHindle 2010-06-09 08:59:12

8

内部框架访问该父文档,例如的某些特性使用parent.location.hrefparent.window.locationIE允许限制)将父帧重定向到新位置。

这是伟大的嵌入来自其他服务器的内容时​​(即使你相信它的服务器可能会受到影响),网络钓鱼攻击。

I帧,也可用于其他各种攻击:IFrames security summary

3

使用HTML 5,您可以使用跨文档消息传递API将消息从窗口发送到窗口,但现在iFrame是任何需要样式和脚本加载的AJAX最可行的替代方案数据。

如果你打算只使用文本数据iFrame中,使用AJAX来代替。如果您希望外部CSS或JavaScript在受保护的环境中工作,想要从头开始样式化或需要访问跨域文档,请使用iFrame。

缺点是I帧的可访问性一般很烂,虽然可以防止这种通过确保您继续内嵌框架与针对屏幕外部内容的通知。同时检查HTML规范以获取更多可访问iFrame的其他方法。除此之外,明智的限制脚本,iFrame是一个伟大的工具是负责任和稀疏使用。

最后一个注意事项是,堆满整个iFrames的页面绝对不是一个好主意,记住,对于每个加载的iFrame,创建一个DOM,创建HTML请求并创建文档包装,在内存中占用内存和带宽处理。将页面上的iFrame保持在最低限度,并避免滥用HTML中的强大工具。

3

IFrames是在网页中“包含”外部内容的好方法。但是,有一些(小)缺陷:

  • 如果IFrame不是源自同一个域,安全沙箱将导致JavaScript问题。
  • 你不能让CSS在IFrame和父页面之间进行协作,除非你自己控制样式表。
  • 从索引的角度来看,IFrame的内容不存在。
  • 出于同样的原因,屏幕阅读器可能不喜欢IFrame。或者他们将无法正确指出IFrame内容的相对含义。

除此之外,他们很棒!我提到的观点甚至可能被认为是有利的,如果你仔细考虑它(除了屏幕阅读器之外):原则上,IFrame不能影响其父页面的布局,也不会受到其父页的影响。

10

优点:

  • 缓慢的第三方内容,如徽章和广告
  • 安全沙箱
  • 下载脚本平行

缺点帮助

  • 昂贵即使空白
  • 块页面的onload
  • 非语义

来源:Best Practices for Speeding Up Your Web Site

+0

您网页上的任何资源都可以阻止页面加载,如图片和视频。更现代的方法总是使用DOMContentLoaded,该iframe不会阻塞。我不明白这里的非语义意味着什么。对于昂贵如果空白,有没有参考? – texasbruce 2015-03-01 22:54:48

+0

您作为源提供的链接真的很有用:) – Biki 2016-02-08 11:09:48

1

一般来说,I帧是搜索引擎优化的原因,一个坏的经验。所以,你问有没有理由不使用iframe?是的,如果你使用iframe,你会在搜索引擎中失去一些有机的位置。

当然,有可用性问题,可以(而且应该)打败页面的SEO价值。

0

在许多情况下与他们合作,我真的认为iframe是goto语句的web编程等价物。也就是说,一般要避免的事情。在一个网站内,它们可能有点用处。但是,跨网站,除了最简单的内容之外,它们几乎总是一个糟糕的主意。

考虑可能性...如果用于参数化内容,他们已经创建了一个接口。而在专业网站中,该界面需要SLA和版本管理 - 在急于上网时几乎总是被忽略。

如果用于活动内容 - 托管脚本的帧 - 则存在(不同的)跨域脚本限制。有些可能会被黑客入侵,但很少一致。如果你的框架内容需要互动,那么在框架之外这样做会很困难。

如果与许可内容一起使用,则参与站点需要在主机之间移动授权信息。

因此,尽管在一个站点内偶尔有用,但它们却不适合混搭。你更好地看待真正的门户和portlet。更糟的是,他们是每个网络业余爱好者的宠儿 - 许多技术经理已经将他们作为解决许多问题的方法。事实上,他们创造更多。