标签: browser-feature-detection

有没有人找到一种简单的方法来检测浏览器是否支持transitionilland事件,尤其是在所有主流浏览器中实际运行的方式？:(

我在这里找到了这个没有答案的帖子:测试Firefox中的transitionend事件支持,以及相当多的工作黑客.

现在我正在批量添加eventlisteners到所有供应商前缀,它有点成功(尽管我认为这是一个可怕的方法,每次看到它时都会伤害我的眼睛).但IE8和IE9根本不支持它,所以我需要检测这两个,并单独处理它们.

我更喜欢在没有浏览器嗅探的情况下执行此操作,并且绝对没有像jQuery这样的大型库/框架

我制作了一个jsfiddler片段来说明我的问题.有一个按钮可以生成一个对话框.通过单击关闭删除对话框时,它将在顶部和不透明度中转换,在结束转换后,它应该显示为= none.但是如果转换端永远不会被触发(例如在IE8和IE9中),则永远不会删除对话框,使其覆盖显示对话框按钮,从而破坏UX.如果我能检测到transitionend何时不起作用,我可以在关闭这些浏览器时设置display = none.

http://jsfiddle.net/QJwzF/22/

window.listenersSet = false;
window.dialogShouldBeVisible = false;

window.showMyDialog = function () {
    var myDialog = document.getElementById('dialog'),
        myClose = document.getElementById('close');
    if (!listenersSet) {
        if (!window.addEventListener) { // IE8 has no addEventListener
            myclose.attachEvent('onclick', function () {
                hideMyDialog();
            });
        } else {
            myClose.addEventListener('click', function () {
                hideMyDialog()
            });

            ['webkitTransitionEnd','oTransitionEnd', 'otransitionend', 'transitionend'].forEach(function (eventName) {
                myDialog.addEventListener(eventName, function (e) {
                    if (e.target === myDialog && e.propertyName === 'top') { // only do trigger if it is …

一些移动浏览器和IE8 javascript不仅有点慢,它的速度要慢10倍!有很多东西通过特征检测测试(js css操作等),但速度很慢,会降低用户体验.

Modernizr会告诉我一个功能存在,但它不会告诉我它是否低于某个性能阈值.

检测IE8适用于IE8用户,但它不适用于运行旧版FF,Safari,移动Opera等的慢速移动设备,平板电脑和计算机.

什么是有效的方法来缓和或禁用慢速功能,而不会惩罚现代浏览器用户？

比时间戳代码执行块更好的方法是什么？

有没有办法使用JavaScript来检测给定的浏览器是将焦点<select multiple>元素呈现为弹出窗口还是仅作为内联框？

在某些平台上,例如Android浏览器和iOS Safari,可以通过比较,例如,高度来检测弹出窗口的使用情况.

<select multiple>
  <option>a</option>
  <option>a</option>
  <option>a</option>
  <option>a</option>
  <option>a</option>
<select>

和

<select multiple>
  <option>a</option>
<select>

高度是相同的,因为<select>s减少到一个带有下拉按钮的盒子.但是在其他设备上,例如Playbook,这个测试会给出误报,因为Playbook浏览器渲染了扩展的选择列表,并在点击时显示弹出窗口.

任何人都可以想出一种可靠的方法来确定是否显示本机选择弹出窗口？

感谢Perfection kills,我们可以使用以下JavaScript来检测事件支持:

function hasEvent(ev) {
    var elem = document.createElement('a'),
        type = 'on' + ev,
        supported = elem[type] !== undefined;
    if (!supported) {
        elem.setAttribute(type, 'return;');
        supported = typeof elem[type] === 'function';
    }
    elem = null;
    return supported;
}

这只适用于我需要的时间:检测mouseenter支持; hasEvent('mouseenter')将在Chrome,Firefox等中返回false,应该如此.

但现在我正在尝试"修复"不支持focusin和focusout事件的浏览器.根据PPK,这基本上只是Firefox.不幸的是,Chrome和Safari被列为"不完整"支持,原因如下:

Safari和Chrome仅使用addEventListener触发这些事件; 不是传统的注册.

一般来说,这很好; addEventListener反正我只会用.但是,它确实意味着检测支持通过elem.onfocusin !== undefined将不起作用.我测试了它,这是真的:

<p>Do I support <a href="#">focusin</a>?</p>

<script>
var elem = document.getElementsByTagName('p')[0];

// hasEvent method defined here
function listener() { …

不同的Web浏览器以不同方式处理window.close()函数.IE会提示用户进行确认,而Firefox和Safari只是不尊重它,除非最初使用Javascript打开窗口并在控制台中显示一条消息.

我支持的组织内部使用的第三方Web应用程序在类似向导的系列页面的末尾显示"关闭"按钮.这适用于IE,这是我们的大多数用户使用的.但是,这显然在FF中失败了.我宁愿保留按钮并使用Javascript来优雅地降级UI,方法是不在任何不执行window.close()的浏览器中显示该按钮.

根据经验,我尝试检查浏览器功能,而不是尽可能依赖基于浏览器检测的硬编码策略.有没有办法以编程方式检查window.close()的支持,以便我可以确定是否应该首先显示该按钮？

我已经对特定功能进行了功能检测,以决定是否可以使用它或者是否必须使用解决方法.但是,不幸的是,我发现IE在该功能中存在一些错误,即使它存在,也会对我无效.因此,即使它通过了功能检测,我需要检测浏览器是IE,所以如果它是IE,我不会使用该功能.

我试图看看我是否可以对实际的错误行为进行特征检测(这将是最好的,因为如果IE将来修复行为,它会适应),但似乎没有任何方法可以做到这一点(主题一个不同的问题).这意味着我只想确定它是一个IE浏览器,所以我可以避免这个错误的功能. 我不想使用useragent字符串,因为我们都知道它很容易被欺骗,很容易出错.

所以,我想对是否是IE浏览器进行功能检测.

我到目前为止的方法是这样的:

var isIE = (document.body.attachEvent && window.ActiveXObject);

这样可以查看attachEvent()方法是否存在以及是否ActiveXObject存在支持.我不得不做的不仅仅是attachEvent支票,因为Opera支持attachEvent.

这是检测IE的可靠方法吗？还有更好的方法吗？

请不要回答我真的不应该做浏览器检测,但应该使用功能检测.我已经在进行功能检测,但这导致了一个问题,因为"支持"该功能并因此通过功能检测的浏览器结果是如此错误,以至于我无法在该浏览器中使用该功能.所以,现在我必须检测错误的浏览器.

如果您想了解更多关于这个问题的具体情况,请在另一个问题中进行介绍.

我真的很喜欢ES6发电机.有没有办法在浏览器中检测生成器支持？我知道目前生成器可能不在很多浏览器中(或者可能根本没有浏览器),但这对我来说是可以的.

我试过了:

try {
  function *(){}
} catch(err) {
  console.log("No generators");
}

但它似乎没有用.

如何在浏览器中检测对ES6生成器的支持？

目前,我正在做一个网站的一些重新设计,基本上只是它升级到更先进的最新外观和试图使其尽可能独立的分辨率,分辨率独立的名字,我想我会尝试使用设计中的SVG图像,浏览器支持<img>标签中的SVG图像.我之所以坚持只在<img>标签中使用SVG 而不是使用一些更加雄心勃勃的解决方案的原因是AFAIK Chrome,Opera和Safari都支持它,而FF4似乎最终可以得到它以及整个网站的事实构建在自定义CMS上,必须部分重写才能开始更改输出HTML(目前它支持自定义设计图像,自定义CSS和每个主题的自定义JS包含).

现在,我已经看了看四周的净有点自己试图找出这样做的最佳途径,由于某种原因,几乎每一个建议的解决方案,我发现了不良工作(一个检测FF3.x在支持SVG <img>标签等等他们没有在那里正确显示,另一个从未尝试过,有些过于复杂"用SVG替换所有图像,如果有支持它"的功能也不会很好.

我正在寻找的是一个可以像这样被调用的小片段(顺便说一下,我正在使用JQuery和这个网站的新主题):

if(SVGSupported()) {
    $('#header img#logo').attr('src','themes/newTheme/logo.svg');
    /* More specified image replacements for CSS and HTML here */
}

有没有人真的有一个工作解决方案,不会给出不准确的输出？如果是这样,我会非常感激.

是否可以在Web应用程序中检查iPad版本(1或2)？由于用户代理看起来相同(请参阅http://www.webtrends.com/Support/KnowledgeBase/SolutionDetail.aspx?Id=50140000000acbiAAA),因此浏览器的标准检查在此处不起作用.

我们可以检查JavaScript中仅在版本2中可用的功能(如陀螺仪)吗？

在等待响应式设计进入遗留网站的过程中,如果屏幕小于480px,我想将浏览器重定向到移动版本

狩猎我想出来了

var isSmall = window.matchMedia ? 
              window.matchMedia("screen and (max-width: 480px)") : 
              screen.width<=480;

题

这在2014年是否可以接受,或者是否有更好/更安全/更新的方法来做我想要的而不使用useragent嗅探？

参考

• MDN Window.matchMedia

• 使用window.matchMedia()在JavaScript中使用JavaScriptKit CSS媒体查询进行匹配

• QuirksMode screen.width没用(因此添加了matchMedia)