Лучший способ определить, что HTML5 не поддерживается

Question

Лучший способ определить, что HTML5 не поддерживается

стандартный способ борьбы с ситуациями, когда браузер не поддерживает HTML5 <canvas> тег должен встраивать некоторый резервный контент, например:

<canvas>Your browser doesn't support "canvas".</canvas>

но остальная часть страницы остается прежней, что может быть неуместным или вводящим в заблуждение. Я хотел бы каким-то образом обнаружить холст без поддержки, чтобы я мог представить остальную часть моей страницы соответственно. Что бы вы порекомендовали?

634 7

javascript html5 canvas progressive-enhancement graceful-degradation

7 ответов:

Comments

Ничего не найдено.

Paul Irish · Accepted Answer · 2011-09-27 07:02:04

это метод, используемый в Modernizr и в основном в любой другой библиотеке, которая работает с холстом:
function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}
Так как ваш вопрос был для обнаружения, когда это не поддерживается, я рекомендую использовать его так:
if (!isCanvasSupported()){ ...

Andy E · Accepted Answer · 2017-05-23 15:32:15

существует два популярных метода обнаружения поддержки canvas в браузерах:
Мэтт!--22--> проверки на наличие getContext, также используется аналогичным образом библиотекой Modernizr:
var canvasSupported = !!document.createElement("canvas").getContext;
проверка существования HTMLCanvasElement интерфейс, как определено WebIDL и HTML технические характеристики. Этот подход также был рекомендован в блог сообщение от команды IE 9.
var canvasSupported = !!window.HTMLCanvasElement;
моя рекомендация является вариацией последнего (см. Дополнительная Информация), по нескольким причинам:

каждый известный браузер, поддерживающий canvas ― включая IE 9 ― реализует этот интерфейс;

это более лаконично и мгновенно очевидно, что делает код;

The getContext подход значительно медленнее во всех браузеры, потому что он включает в себя создание HTML-элемента. Это не идеально, когда вам нужно выжать как можно больше производительности (например, в библиотеке Modernizr).

нет никаких заметных преимуществ в использовании первого метода. Оба подхода могут быть сфальсифицированы, но это вряд ли произойдет случайно.

Дополнительная Информация

все еще может быть необходимо проверить, что 2D-контекст может быть получен. Как сообщается, некоторые мобильные браузеры могут возвращать true для обеих вышеуказанных проверок, но возвращать null на .getContext('2d'). Вот почему Modernizr также проверяет результат .getContext('2d'). Однако WebIDL & HTML-опять же-дает нам еще лучше,быстрее:
var canvas2DSupported = !!window.CanvasRenderingContext2D;
обратите внимание, что мы можем полностью пропустить проверку элемента canvas и перейти прямо к проверке поддержки 2D-рендеринга. Элемент CanvasRenderingContext2D интерфейс также является частью спецификации HTML.

вы должны использовать getContext подход для обнаружения WebGL поддержка, потому что даже если браузер может поддерживать WebGLRenderingContext,getContext() может возвратить null если браузер не может взаимодействовать с графическим процессором из-за проблем с драйверами и нет реализации программного обеспечения. В этом случае проверка интерфейса сначала позволяет пропустить проверку на getContext:
var cvsEl, ctx;
if (!window.WebGLRenderingContext)
    window.location = "http://get.webgl.org";
else {
    cvsEl = document.createElement("canvas");
    ctx = cvsEl.getContext("webgl") || cvsEl.getContext("experimental-webgl");

    if (!ctx) {
        // Browser supports WebGL, but cannot create the context
    }
}
Сравнение Производительности

производительность getContext подход на 85-90% медленнее в Firefox 11 и Opera 11 и около 55% медленнее в Chromium 18.

Matt · Accepted Answer · 2010-04-30 18:01:59

Я обычно запускаю проверку для getContext когда я создаю свой объект Canvas.
(function () {
    var canvas = document.createElement('canvas'), context;
    if (!canvas.getContext) {
        // not supported
        return;
    }

    canvas.width = 800;
    canvas.height = 600;
    context = canvas.getContext('2d');
    document.body.appendChild(canvas);
}());
если он поддерживается, то вы можете продолжить настройку холста и добавить его в DOM. Это простой пример Постепенное Повышение, который я (лично) предпочитаю изящной деградации.

Frozenskys · Accepted Answer · 2010-04-30 18:10:36

Почему бы не попробовать modernizr ? Это библиотека JS, которая обеспечивает возможность обнаружения.

цитата:

вы когда-нибудь хотели сделать if-операторы в вашем CSS для наличие интересных функций, таких как радиус границы? Ну, с Modernizr вы можете сделать именно это!

Sheikh Ali · Accepted Answer · 2011-12-18 14:23:55

try {
    document.createElement("canvas").getContext("2d");
    alert("HTML5 Canvas is supported in your browser.");
} catch (e) {
    alert("HTML5 Canvas is not supported in your browser.");
}

kennebec · Accepted Answer · 2014-03-24 06:14:23

здесь может быть gotcha-некоторые клиенты не поддерживают все методы холсте.
var hascanvas= (function(){
    var dc= document.createElement('canvas');
    if(!dc.getContext) return 0;
    var c= dc.getContext('2d');
    return typeof c.fillText== 'function'? 2: 1;
})();

alert(hascanvas)

beka · Accepted Answer · 2016-06-16 09:13:59

можно использовать canisuse.js скрипт для определения, поддерживает ли ваш браузер canvas или нет
caniuse.canvas()