问题标签 [browser-feature-detection]

在过去的几个小时里，我尝试让 YepNope 和一些 Modernizr 测试正常工作，但没有任何运气。

Modernizr 加载在头部、jQueryplugins.js和script.js页面底部（按此顺序）。没什么花哨的，但很方便，因为调用的每个资源在scripts.js执行时都已经可用。所有脚本都正确加载，测试是唯一正在进行的脚本。

我想测试是否需要加载 polyfill 进行表单验证，所以这是测试：Modernizr.formvalidationapi. 当然，我确保我的构建中包含Modernizr.addTest了forms-validation非核心检测，以及 HTML5 输入类型和属性以及Modernizr.load，这基本上是yepnope.js

所以在我的script.js，有以下内容：

我添加警报只是为了调试。
我在 Safari 6.0.2 和 Firefox 18.0.2 中对此进行了测试，两次都提示“是”，然后是“否”，所以我认为某处有错误。
我还尝试将代码包装在一个文档就绪包装器中，这没有任何改变。

由于 jQuery 在 Wordpress 中以无冲突模式运行，我相信（不能使用“$”，而必须使用“jQuery”），我将其包括在内以将美元符号重新映射到 jQuery：

它也什么也没做。

目前我认为这与 Wordpress 自己的wp_register_script和有关wp_enqueue_script，但我不确定，因为我认为可以在 Wordpress 站点中使用 Modernizr 测试。

我哪里错了？

PS：我知道还有http://wordpress.stackexchange.com，但我在这里发布了我的问题，因为我相信问题出在我的脚本中，而不是 Wordpress。如果您愿意，我当然可以在那里发布问题。

我发现与 Firefox 和 IE 相比，Chrome 和 Safari 对历史浏览的处理方式有所不同。当我尝试访问受 Access Manager 保护的页面时，它会被重定向到 Access Manager 进行身份验证。如果我在 Chrome 和 Safari 中单击后退按钮，我会转到上一页，但如果我尝试在 Firefox 和 IE 上执行相同操作，似乎他们会尝试转到原始页面，然后再次重定向到 Access经理页面。换句话说，我无法回头。

由于我的网页中有一个按钮可以复制后退按钮的功能，因此我实现了以下 javascript 代码以使其工作：

它工作得很好，但我已经读到，识别不同浏览器的广泛接受的方法是检测它的功能。

有没有我可以检测到的功能？

我有一些 javascript 依赖于 window.open 和窗口间通信的使用（新的“子”窗口将成功/失败传达给“父”窗口）。

这种（窗口间通信）在大多数情况下都可以正常工作，但不适用于某些不支持窗口间通信的浏览器。示例包括Windows Phone和iPhone 的 UIWebView。

我目前进行客户端（基于 JavaScript）用户代理嗅探以检测这些场景 - 并回退到不同的代码路径以解决该问题。

我可以使用用户代理嗅探的替代方法吗？

需要明确的是，window.open 有效（其中有效的意思是“它打开请求的 url”）。不可靠的是使用 window.opener 和 postMessage 进行从“孩子”到“父母”的窗口间通信。

我在需要在多个浏览器中工作的 HTML 5 页面上有一个搜索输入：

我通过查看浏览器是否将其呈现为search输入或常规来检测浏览器是否支持搜索text：

这很好用——Chrome 和 Safari 使用了该onsearch事件（当它们点击清除X图标时也会触发），而 IE 使用了该keyup事件（此处未显示一些额外的检查）。

然而，这似乎在 IE10 中被破坏了，它显示 asearch与 an 完全相同<input type="text" />（如 IE9 及更低版本）并search作为类型返回（如 Chrome/Webkit），但不会触发onsearch事件。

有没有更好的方法来检测搜索输入支持？

嗅探此功能支持的最佳方法是什么？

仅当 CSS 连字符不可用时，我才想使用连字符 polyfill（例如hypher.js或hyphenator.js ），即：

但是 Modernizr 中没有这样的检测。支持测试hyphens: auto并不可靠：Chrome 和 Mobile Safari 都支持它（带前缀），但只有后者支持连字符。

这是一个无法检测的功能吗？

在 iOS 6.0 Safari 上，无法使用 JavaScript 将（硬件、屏幕上的）键盘焦点分配给输入元素，除非当前脚本正在运行以响应用户操作。

如何检测是否可以通过 JavaScript 设置键盘焦点？通过检查用户代理？

特征检测可能是不可能的：element.focus()奇怪的是设置document.activeElement为element. 但是，它不会导致屏幕键盘弹出，或者 - 如果已连接 - 硬件键盘获得焦点。

SVG Tiny 1.2定义了一个名为vector-effect.

使用上面的路径，即使元素被缩放（例如，由于transform父g元素上的 a ），笔触宽度将始终为 2 像素。

此属性似乎适用于大多数支持 SVG 的浏览器，但不适用于 IE9 和 IE10。

有没有办法对这个属性进行特征检测？

随着jQuery 2.0 的发布，关于如何识别用户是否使用支持它的 IE 版本（jQuery 2.0 仅支持 IE9 及更高版本）的讨论很多。

我的问题是为什么这样的解决方案：

优于查看navigator对象：

来源

我想知道是否有人可以提供帮助。我在一个包含表单的网站上工作。提交表单时，我们会显示一个包含动画 gif 的叠加层 - 一个“请稍候”类型的东西。

当我们第一次开发代码时，我们遇到了动画 gif 的严重问题，因为它会在提交表单时挂在第一帧上。我们发现体面的浏览器 :) 都是一致的，因为我们必须显示覆盖，然后在提交表单之前等待一小段时间。我们还发现 IE 要求相反 - 我们必须提交表单，然后显示覆盖。除此之外，我们发现不同版本的 IE 在这方面表现不同（这并不奇怪！）

我们最终想出了以下几点：

和

这自实施以来一直运作良好。然而，它依赖于我们在标记中使用条件注释……而且老旧的 IE10 已经放弃了对条件注释的支持！

当 IE10 运行此代码时，它会落入 else 块，就好像它是一个“不错的”浏览器一样。虽然站点和页面功能仍然有效 - 显示覆盖并提交表单 - 动画 gif 不动画！而我们的营销部门对此非常不满！！:(

我没有测试过，但我怀疑要让 IE10 正常工作，它需要运行第一个 if 分支；IE6、8 和 9 需要运行的相同代码。

我已经简要地研究过尝试将 ie10 类应用于 html 元素，但是我读过的所有内容（以及我们在原始代码中留下的评论'也许将来更优雅的解决方案可能是使用类似 Modernizr 的东西') 表明这不是这样做的方法。

因此，假设我们使用了诸如 Modernizr 之类的特征检测库，我们将更改我们的 javascript 如下：

所以，我的问题是，有人知道我应该在上面的代码中检测到哪些特性吗？

Modernizr 检测 CSS3 字体支持。

http://modernizr.com/download/

我如何只获得font-facemodernizr之外的测试来源？

回购中有一个与此测试相关的文件，但我不确定如何使用它 https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/fontface.js