iframe是否被视为“不良做法”?[关闭]


Answers:


217

与所有技术一样,它也有起有落。如果您使用iframe到一个经过适当开发的网站周围走走,那当然是个坏习惯。但是,有时iframe是可以接受的。

iframe的主要问题之一与书签和导航有关。如果您使用它只是将页面嵌入内容中,我认为很好。这就是iframe的用途。

但是我也看到iframe也被滥用。永远不要将其用作网站的组成部分,而应将其用作网站中的一部分内容。

通常,如果您可以在没有iframe的情况下做到这一点,那么这是一个更好的选择。我敢肯定,这里的其他人可能会提供更多信息或更多具体示例,所有这些都取决于您要解决的问题。

话虽如此,如果您仅限于HTML并且无法访问PHP或ASP.NET等后端,则有时只有iframe是您唯一的选择。


23
“如果您仅限于HTML并且无法访问PHP或ASP.NET等后端,则有时只有iframe是您唯一的选择”。您可以通过jquery ajax获取数据,然后使用该数据填充div,从而在页面中嵌入外部内容。
developer747

53
@ developer747-如果由于相同的来源政策,如果外部内容位于另一个站点上,则该方法将无效。在某些晦涩的情况下,远程站点可能支持JSONP;但可能不会。
彼得·五Mørch

2
我觉得iframe比以前的框架集有用得多,因为用户无法调整iframe的大小-但是我不会将框架集用于任何东西,而是将其用于手册,因为它在html5中已不存在。示例:游戏制作者手册
Domino

15
应该提到的是,iframe是当前定义嵌套CSS作用域的唯一方法。它们将内部标记,布局,样式和Javascript *与外部文档隔离开来,这在许多用例和应用程序中很有用。*如果内部文档与外部文档共享原点,则不是隔离Javascript;另一方面,来自不同来源的文档仍可以使用window.postMessage()进行通信,例如实现协作iframe自动调整大小。
Tobia 2015年

1
iFrame是邪恶的!可能也有帮助
DanielV

75

它们不是坏习惯,它们只是另一种工具,它们增加了灵活性。

用作标准页面元素...很好,因为它们是将内容分成多个页面的简单可靠的方法。特别是对于用户生成的内容,将内部页面“沙盒化”为iframe标记不佳而不会影响主页面可能很有用。缺点是,如果您引入了多层滚动(一层用于浏览器,一层用于iframe),则用户会感到沮丧。就像adzm所说的那样,您不想将a iframe用作主要导航,而是将它们视为与视频或其他媒体文件的嵌入方式等效的文本/标记。

对于脚本化背景事件,通常在隐藏iframeXmlHttpRequest加载当前页面的内容之间进行选择。两者的区别在于,会iframe产生页面加载,因此您可以在大多数浏览器的浏览器缓存中来回移动。请注意,XmlHttpRequest在各处使用Google的Google iframe在某些情况下也使用s来允许用户在浏览器历史记录中来回移动。


11
我认为必须提及的是,可以使用iframe将来自某个域的页面嵌入到来自另一个域的页面中。如果嵌入式页面希望通过cookie跟踪用户并保留主机域中的信息,那么您唯一的选择是使用iframe,因为JS受主机域控制。
尼古拉斯·伦纳德

@NicholasLeonard一个很好的例子是,可以通过使索引页成为一个脚本来检测子页是否在localstorage中,使用它们来强制基于本地存储的缓存页。然后,从localstorage对其进行document.write,如果没有,则将其添加到该子页面的iframe中。在该子页面中,有一个脚本来将子页面HTML元素的externalhtml存储到localstorage中。使用此方法的一个很好的理由是,它允许您在加载屏幕中添加。

我不同意,但是我不能拒绝投票,因为它是一个重要的POV。
victorf

28

在不了解其缺点的情况下使用它们是“不好的做法”。Adzm的帖子很好地总结了它们。

另一方面,gmail大量使用了iFrames在后台,以实现其一些更酷的功能(例如自动文件上传)。如果您知道iFrame的局限性,我相信您对使用它们会感到困惑。


18

在许多情况下与他们合作之后,我真的开始认为iframe相当于goto语句的网络编程。即,通常应避免的事情。在站点内,它们可能会有所帮助。但是,对于跨网站而言,除了最简单的内容之外,对于几乎所有内容而言,它们始终是个坏主意。

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

如果用于活动内容(托管脚本的框架),则存在(不同的)跨域脚本限制。有些可以被黑客入侵,但很少会持续被入侵。而且,如果框架内容需要交互,它将很难在框架之外进行交互。

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

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


10

根据我的经验,在调用第三方代码时,iframe 的积极一面是调用一个具有Document.write();命令的javascript 。如您所知,由于解析方式(DOM解析器等),无法异步调用这些命令。例如http://sourceforge.net/projects/phpadsnew/我使用iframe来帮助加快我们的网站的速度,因为有多个调用phpadsnews的网站,并且该网站在继续进行渲染之前一直在等待响应页面的各个部分。使用iframe,我可以允许网站呈现页面的其他部分,并且仍然Document.write()异步调用phpads 的命令。防止和js锁定。


8

iframe使用者肯定有用途。您还如何将天气网络小部件放在页面上?唯一的另一种方法是获取他们的XML并解析它,但是当然,您需要条件来抛出持久的天气图形...并不是很值得,但是如果有时间的话可以使它更干净。


6

从可用性的角度来看,原始框架集模型(框架集和框架元素)非常糟糕。IFrame是后来的发明,它没有原始框架集模型那么多的问题,但是确实有其缺点。

如果您允许用户在iframe中进行导航,则链接和书签将无法按预期工作(因为您将外页的URL标记为书签,而不是iframe的URL)。


1
必须不同意...像这样的广泛评论根本没有资格。
达威西'16

5

当您的主页加载了HTTP协议,并且页面的某些部分需要使用HTTPS协议时,iFrame可以击败jsonp。

特别是,如果您的dataType不是本机json,则需要在服务器上将其转换为json,并在客户端上转换为例如复杂的html。

所以没有-iFrame不是邪恶的。


5

他们不错,但实际上很有帮助。前段时间我遇到了一个很大的问题,我必须嵌入我的Twitter提要,但它不允许md在同一页面上完成,因此我将其设置在另一个页面上,并将其作为iframe放入。

它们也很好,因为所有浏览器(和电话浏览器)都支持它们。只要您正确使用它们,就不能认为它们是不良做法。


4

值得注意的是,无论用户的互联网连接速度或iframe的内容如何,​​iframe都会导致网页下载速度变小(约0.3秒),但速度明显下降。在本地对其进行测试时不会看到此内容。实际上,对添加到页面的任何元素都是如此,但是iframe似乎更糟。


1
为什么?并且是在主页完成加载后使iframe加载的一种方法吗?
尼古拉斯·伦纳德

3
我不记得他们为什么这么慢;一年前我正在研究。可能是因为浏览器基本上为每个iframe创建了一个全新的渲染上下文。至于要让它们在页面加载完成之前不加载,可以使用空白的iframe,然后在页面加载完成后设置iframe的src标签。不过请注意,即使是空白的iframe,也会降低页面渲染的速度,但下载速度却不会降低,因此,对您的用户而言,一切看起来仍然会变慢。
Brian

3
相反,在参考速度和iFrame时,可以考虑讨论CDN(内容交付网络)。考虑到iFrame可以并行下载资源,因此可以提高速度(取决于浏览器)。这是至少一个与我的立场一致的参考。developer.yahoo.com/performance/rules.html
Strixy

2
@Strixy:您指定的网址表明IFrame昂贵,即使空白。建议尽量减少使用IFrame。使用CDN加快您的网站与使用IFrame是正交的。CDN可以帮助减轻使用IFrame的成本。但是,没有IFrame的CDN优于CDN和IFrame。
2013年

1
@Strixy:如果要并行下载资源,则有更好的方法来进行下载。以前的热门是通过javascript加载所有这些东西。新的热点是使用Service worker,它有效地使您可以使用客户端逻辑直接管理用户代理如何加载,预加载和缓存站点资源。另一个新的热点是http / 2 push,它使您可以将资源发送到浏览器,而无需等待浏览器请求资源。但是,由于其他浏览器缓存之后检查了http / 2 缓存,因此通常不是一个好的选择。
Brian

3

我已经看到IFRAME非常成功地应用为制作动态上下文菜单的简便方法,但是该Web应用程序的目标受众只是Internet Explorer用户。

我会说,这完全取决于您的要求。如果您希望确保页面在每种浏览器上都能正常运行,请避免使用IFRAME。如果您瞄准的是狭窄且知名的受众(例如,在本地Intranet上),并且您发现使用IFRAME有好处,那么我认为这样做是可以的。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.