当前位置: 首页 > 面试题库 >

浏览器检测与功能检测

冉俊德
2023-03-14
问题内容

我将扮演一个恶魔的拥护者片刻。我一直想知道为什么将浏览器检测(而不是功能检测)视为一种不好的做法。如果我测试某个浏览器的某个版本并确认该功能以某种可预测的方式运行,则可以决定对其进行特殊处理。这样做的理由是将来会万无一失,因为此部分浏览器版本不会更改。另一方面,如果我检测到DOM元素具有函数X,则不一定表示:

  1. 此功能在所有浏览器中的工作方式相同,并且
  2. 更重要的是,即使在所有未来的浏览器中,它也将以相同的方式工作。

我只是窥视了jQuery源,他们通过将精心构建的HTML代码段插入DOM中来进行功能检测,然后他们检查其中是否具有某些功能。这是一种明智而可靠的方法,但是我要说的是,如果我只是在自己的小块JavaScript(没有jQuery)中做类似的事情,那将太繁重。它们还具有几乎无限的质量检查资源的优势。另一方面,您经常看到人们正在做的事情是,他们检查功能X的存在,然后基于此,他们假定该功能将在所有具有此功能的浏览器中以某种方式运行。

从功能检测不是一件好事(如果正确使用)的意义上,我没有说什么,但是我想知道为什么浏览器检测通常听起来很合逻辑,但通常会立即被取消。我不知道这是否是另一种时髦的说法。


问题答案:

浏览器检测一直被广泛接受。但是,Resig的注释特定于库/框架代码,即其他[特定于域的]应用程序/站点将使用 的代码。

我认为毫无疑问,特征检测非常适合库/框架。但是,对于特定于域的应用程序,我不确定浏览器检测是否很糟糕。它适用于解决难以进行功能检测的已知浏览器特征,或者适用于在实现功能本身中存在错误的浏览器。浏览器检测适当的时间:

  • 不是跨浏览器的站点/应用程序,需要显示针对该客户端浏览器的警告/对话框/ DifferentPage。这在旧版应用程序中很常见。
  • 对支持哪些浏览器和版本具有严格策略的银行或私人站点(以避免已知的安全漏洞可能会损害用户数据)
  • 微观优化:以某种方式执行某些操作时,有时一个浏览器的速度要比其他浏览器快得多。根据您的用户群在该特定浏览器/版本上进行分支可能是有利的。
  • IE6中缺乏png透明度
  • 许多显示/渲染问题(请参阅:IEcss支持)仅在特定的浏览器版本中可见,而您实际上并不知道要测试什么功能。

也就是说,在进行浏览器检测时要避免一些主要的陷阱(可能是我们大多数人犯下的)。



 类似资料:
  • 问题内容: 如何使用JavaScript检测Safari浏览器?我在下面尝试过代码,它不仅可以检测Safari,还可以检测Chrome浏览器。 问题答案: 您可以轻松地使用Chrome的索引来过滤掉Chrome:

  • Web Storage 是一项非常重要,并且很实用的技术,因此浏览器的支持度非常高,所有的主流浏览器,包括IE8,都在一定程度上支持Web Storage。尽管如此,最好还是像往常一样,在使用前先检测浏览器是否支持Web Storage。 在Web Storage中,可以直接使用 window 对象访问特定域下存储的数据。因此,只需检测浏览器是否支持 window.localStorage 或 w

  • 问题内容: 如何使用JavaScript确定确切的浏览器和版本? 问题答案: 顾名思义,这将告诉您浏览器提供的名称和版本号。 当您在多个浏览器上测试新代码时,它对于对测试结果和错误结果进行排序非常方便。

  • 问题内容: 我正在寻找一个函数,如果用户具有移动浏览器,该函数将返回布尔值。 我知道我可以通过使用正则表达式来使用和编写该函数,但是对于不同的平台,用户代理种类繁多。我怀疑匹配所有可能的设备会很容易,并且我认为这个问题已经解决了很多次,因此应该为此类任务提供某种完整的解决方案。 我当时在看这个站点,但是可悲的是脚本太神秘了,以至于我不知道如何使用它来创建一个返回true / false的函数。 问

  • 问题内容: 如何找到浏览器的Javascript引擎版本以及对ECMAScript 6的支持? 我只是想知道浏览器的版本,而不是引擎的版本。 问题答案: 特征检测 我建议您使用 功能检测, 而不要使用启发式方法检测浏览器的引擎。为此,您可以简单地 在语句中包装一些代码,或使用一些语句。 例如: 为什么功能检测比浏览器/引擎检测更好? 在大多数情况下,有多种原因可以使特征检测成为最佳选择: 您不必依

  • 问题内容: 有什么方法可以使用React检测IE浏览器并重定向到页面或提供任何有用的信息。我在JavaScript中找到了一些东西,但不确定如何将其与React + TypeScript一起使用。 问题答案: 您走在正确的轨道上,可以使用它们有条件地渲染jsx或帮助进行路由… 我已经成功地使用了以下内容。 请注意,由于浏览器的更改,它们每个都有机会被弃用。 我在React中这样使用它们: 然后通过