【问题标题】:Good Reasons why not to use Iframes in page content [closed]为什么不在页面内容中使用 iframe 的充分理由 [关闭]
【发布时间】:2014-06-04 09:39:43
【问题描述】:

好的,我正在寻找一些在页面内容中不使用 iFrame 的充分理由。我的朋友设置为我们的聊天框使用 iFrame 并加载 html 页面,而不是仅使用 ajax 加载所需的参数并长时间轮询请求。一旦我们有了我们的参数,我们就可以用我们的内容填充一些 div。


我最大的原因

  1. 为什么要同时加载两个页面

  2. 需要更多编码才能注入 iFrame

有没有人知道任何其他可能出现的冲突和问题?我知道不久前 iFrame 应该被弃用,然后它们又跳回了网站。


ps 我不确定这是否应该放入 SO 或 MSO,如果需要我可以移动它

【问题讨论】:

    标签: javascript html iframe


    【解决方案1】:

    iframe 为页面上下文增加了灵活性,因为它们是一种将内容分隔到多个页面的简单而可靠的方法。将内部页面“沙箱化”到 iframe 中也可能很有用,因此糟糕/缺失的标记不会影响主页。

    不利的一面是,如果您引入多层滚动(一层用于浏览器,一层用于 iframe),用户会感到沮丧。

    【讨论】:

    • 这会增加页面的加载时间,还有多种其他方式来提供内容,例如DIVs,除了 Facebook 使用它的方法之外,没有真正好的目的。除此之外,他们网站的真正程序员不应使用 iFrame。请阅读接受的答案
    • @EasyBB 我不同意。为什么 Facebook 是唯一获得通过的实体?如果他们找到了合适的用途,那么其他“真正的程序员”肯定也会找到一个完全可以接受的理由来使用 iframe。
    • 我相信您错过了整个回复的重点和独创性。他们使用它,推特使用,以及其他。但他们不会因为滚动而过度拥挤您的页面。他们使用一个简单的按钮或其他类似的东西。所以我不认为你真的明白你的意思。
    【解决方案2】:

    来源:http://www.rwblackburn.com/2012/07/iframe-evil/

    所以似乎我从事的每项工作都会出现相同的主题。有人,在某些时候会说,“为此使用 iFrame”。然后我需要走老路,看看为什么这不是一个好主意。

    好吧,这篇文章对我来说有点实用。我希望将 iFrame 不是万能解决方案的所有原因都放在一个地方,这样我就可以在未来节省一些时间,并将人们指向这个 URL。因此,当我完善这些要点时,我可能会不时更新这篇文章。如果您愿意,请随意将这篇文章用于相同的目的,并将我错过的任何建议或要点发布到我的 Twitter 帐户 (@rwbDev),如果我在本文中添加要点,我一定会感谢您。

    现在,让我说清楚。 iFrame 确实有一个有效的用途。实际上,我自己多次使用 iFrame 并取得了巨大的成功。问题是人们倾向于使用它们来绕过糟糕的架构,或者作为解决问题的简单方法。以我的经验,这通常只是用一个小问题来换取一个更大的问题,而且通常这是一个不必要的权衡。我将在下面介绍这两点。

    对 SEO 不利。这是避免使用 iFrame 的最普遍原因之一。某些搜索引擎可能对 iFrame 中引用的页面有困难。这对网站或页面的搜索排名有多大影响尚不完全清楚。然而,与我交谈过的大多数专家都同意它肯定会产生一些影响。在热带查看这个有趣的表格帖子。有关 SEO 的工作原理以及此类设计决策的影响的详细信息,我建议您查看 seomoz.org。如果 SEO 不是您的页面或应用程序的问题,这当然不是问题。例如,需要登录的应用程序(无论如何,搜索引擎都无法访问登录后的所有页面)。 * 注意(2013 年 6 月 6 日添加):最近的测试表明,搜索引擎实际上可能会跟踪 iFrame 中的链接。这意味着 iFrame 对 SEO 的影响远小于过去。目前尚不清楚是否有影响,不同的搜索引擎在这方面可能表现不同。

    链接/书签。除非您引入额外的 JavaScript,否则用户将无法直接获得指向 iFrame 内容的链接。这包括某人可能通过电子邮件发送给朋友的链接、书签或搜索引擎结果中出现的页面。假设您的用户访问您的页面,并且某些内容位于 iFrame 中。他们单击 iFramed 内容中的链接。此内容将按预期保留在 iFrame 中。现在,您的用户在 iFrame 中找到了他们导航到的一些内容,并希望将其发送给朋友。但是在他们的浏览器中复制 URL 将不起作用,这只会将朋友发送到初始页面,原始内容显示在 iFrame 中。有一些脚本可以解决这个问题。我自己已经实施了几次(在我别无选择的情况下)。然而,这些通常会引入一些他们自己的问题,并且经常存在跨浏览器兼容性问题。通常它也很糟糕。同样,根据您的网站或应用程序的需求,这可能不是问题,但对于大多数网站来说这是一个大问题。

    调试困难。这是人们经常忽略的问题。如果您有一个健壮的应用程序,其中包含复杂的 jQuery、Ajax 和其他在整个页面上发生的很酷的东西——iFrames 会使调试问题变得更加困难。错误发生在外部页面还是框架内的页面?浏览器开发者工具可以帮助解决这个问题,但即使是这些工具也不能总是在处理 iFrame 时明确问题出在哪里。当页面位于 iFrame 内时,您会惊讶地发现 bug 被复制的频率,但在 iFrame 外部加载时工作正常。这是任何网站的问题。但特别是对于广泛使用 iFrame 的网站。系统中的活动部件越多,诊断问题就越困难。

    没有真正的性能提升。有时我会发现有人想要使用 iFrame,因为他们觉得这会提高他们网站的性能。他们通常有这种感觉,因为它可以避免在网站分页时重新加载网站的页眉/页脚/菜单。通常情况正好相反。事实上,根据我的经验,与修复应用程序架构相比,它从未带来性能提升。首先,考虑浏览器会缓存图像、CSS 和 JS 文件。所以这些无论如何都不会重新加载每个页面。但更重要的是,沿着这些思路思考的人经常将 iFrame 视为穷人的 AJAX。但是,iFrame 分页的内容几乎总是比真正的 AJAX 调用重,后者使用 XML 或 JSON 加载和刷新页面内容的一小部分。

    它很难保持稳定。我以前工作的一个大型网站广泛使用了 iFrame。我不确定 NDA 在哪里适用,所以为了安全起见,我不会链接到他们的网站。他们经常使用它们,并且拥有所有用于(理论上)避免使用 iFrame 的正常缺点的脚本和花哨的技巧。然而,由于 iFrame 的广泛滥用和过度使用,他们的网站上仍然经常出现问题和错误。论坛、LinkedIn、Twitter 等上也经常有客户抱怨这给他们带来的问题。刚才我跳到他们的网站,几分钟后发现一个页面因为 iFrame 问题而给我一个错误。这些是非常了解 iFrame 问题的聪明人。然而,即使是他们也在继续与它搏斗,多年后。当 iFrame 像在本网站上一样被滥用时,再多花哨的脚本也无法完全解决不可避免地出现的问题。

    【讨论】:

    【解决方案3】:

    某些浏览器不支持 iFrame,在 iFrame 中,您的网站上可能有您的内容,以及另一个网站的内容,但内容可以随时更改为您可能同意或不同意的材料。一些问题,例如即使是空白也很昂贵。 阻止不需要的、非语义的页面 remianing onload

    除非您自己控制样式表,否则您无法让 CSS 在 IFrame 和父页面之间进行协作。如上所述,这是真的-

    我们无法使用 I Frame 获得良好的性能,某些搜索引擎可能在 i Frames 中引用的页面有困难。这对网站或页面的搜索排名有多大影响尚不完全清楚。 我的建议是先简单地使用所有其他选项。不要仅仅因为表面上看起来很容易就跳到 iFrame 解决方案。

    【讨论】:

    • 哦,我从不使用 iFrame,哈哈。我宁愿长时间轮询 ajax 请求并在 div 中提供内容。页面上的语义元素。
    • 还有一件事,Iframe setTimeout() 在 Internet Explorer 9 中不起作用!!
    【解决方案4】:

    重要的原因是:

    • 性能下降
    • iframe 阻止 onload 事件
      onload 事件主要由 Web 开发人员用来启动 UI 操作,例如在加载时关注登录字段。

    【讨论】:

      猜你喜欢
      • 2011-02-15
      • 2023-03-24
      • 2010-09-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-05-11
      • 2013-04-16
      • 2017-10-31
      相关资源
      最近更新 更多