أفضل طريقة لاكتشاف أن HTML5 غير مدعوم

Question

الطريقة القياسية للتعامل مع المواقف التي لا يدعم فيها المستعرض HTML5 <canvas> العلامة لتضمين بعض المحتوى الاحتياطي مثل:

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

لكن بقية الصفحة تظل كما هي ، والتي قد تكون غير لائقة أو مضللة. أرغب في اكتشاف ما لا يدعو إلى الدعم من القماش حتى أتمكن من تقديم بقية صفحتي وفقًا لذلك. ماذا تنصح؟

Answer 1

هذه هي التقنية المستخدمة في Modernizr وبشكل أساسي كل مكتبة أخرى تعمل:

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

منذ أن كان سؤالك للكشف عندما يكون ليس مدعوم ، أوصي باستخدامه مثل:

if (!isCanvasSupported()){ ...

Answer 2

هناك طريقتان شائعتان لاكتشاف دعم قماش في المتصفحات:

1. اقتراح مات من التحقق من وجود getContext, ، تستخدم أيضًا بطريقة مماثلة من مكتبة Modernizr:

   var canvasSupported = !!document.createElement("canvas").getContext;
   

2. التحقق من وجود HTMLCanvasElement الواجهة ، على النحو المحدد من قبل WebIDL و لغة البرمجة تحديد. وقد أوصى هذا النهج أيضا في منشور مدونة من فريق IE 9.

   var canvasSupported = !!window.HTMLCanvasElement;
   

توصيتي هي تباين في الأخير (انظر ملاحظات إضافية)، لعدة أسباب:

• كل متصفح معروف يدعم قماش - بما في ذلك IE 9 - ينفذ هذه الواجهة ؛
• إنه أكثر إيجازًا وواضحًا على الفور ما يفعله الرمز ؛
• ال getContext النهج هو أبطأ بكثير عبر جميع المتصفحات, ، لأنه ينطوي على إنشاء عنصر HTML. هذا ليس مثاليًا عندما تحتاج إلى الضغط على أكبر قدر ممكن من الأداء (في مكتبة مثل Modernizr ، على سبيل المثال).

لا توجد فوائد ملحوظة لاستخدام الطريقة الأولى. يمكن أن يكون كلا النهجين محوراً ، لكن هذا من غير المحتمل أن يحدث عن طريق الصدفة.

ملاحظات إضافية

قد لا يزال من الضروري التحقق من أنه يمكن استرداد سياق ثنائي الأبعاد. وبحسب ما ورد ، يمكن أن تعود بعض متصفحات الهاتف المحمول إلى كل من الشيكات أعلاه ، ولكن العودة null إلى عن على .getContext('2d'). لهذا السبب يتحقق Modernizr أيضًا من نتيجة .getContext('2d'). ومع ذلك ، فإن WebIDL & HTML - مرة أخرى - يعطينا آخر أفضل ، أسرع اختيار:

var canvas2DSupported = !!window.CanvasRenderingContext2D;

لاحظ أنه يمكننا تخطي التحقق من عنصر القماش بالكامل والانتقال مباشرة إلى التحقق من الدعم للتقديم ثنائي الأبعاد. ال CanvasRenderingContext2D الواجهة هي أيضا جزء من مواصفات HTML.

أنت يجب استخدم ال getContext يقترب للكشف عن webgl الدعم لأنه ، على الرغم من أن المتصفح قد يدعم WebGLRenderingContext, getContext() قد يعود لا شيء إذا كان المتصفح غير قادر على التفاعل مع وحدة معالجة الرسومات بسبب مشكلات برنامج التشغيل ولم يكن هناك تنفيذ برامج. في هذه الحالة ، يتيح لك التحقق من الواجهة أولاً تخطي التحقق 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 والأوبرا 11 وحوالي 55 ٪ أبطأ في الكروم 18.

    

Answer 3

عادة ما أقوم بتشغيل شيك getContext عندما أقوم بإنشاء كائن قماش الخاص بي.

(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);
}());

إذا كان مدعومًا ، فيمكنك متابعة إعداد Canvas وإضافته إلى DOM. هذا مثال بسيط على تحسين تدريجي, ، والتي أنا (شخصيا) أفضل على تدهور رشيق.

Answer 4

لماذا لا تحاول Modernizr ؟ إنها مكتبة JS التي توفر قدرة الكشف.

يقتبس:

هل سبق لك أن أردت أن تفعل ما إذا كانت المحددات في CSS الخاصة بك لتوافر ميزات رائعة مثل الحدود الحدودية؟ حسنًا ، مع Modernizr يمكنك إنجاز ذلك!

Answer 5

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.");
}

Answer 6

قد يكون هناك 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)

Answer 7

يمكنك استخدام canisuse.js البرنامج النصي لاكتشاف ما إذا كانت متصفحاتك تدعم القماش أم لا

caniuse.canvas()