בדיקת התמיכה של דפדפן בתג canvas

התג <canvas> הוא תג חדש שהוצג לראשונה ב - HTML5. לכן, לפני שנעבוד עמו חובה עלינו לבדוק האם הדפדפן של המשתמש תומך בתג זה. ישנן מספר דרכים לבצע בדיקה זו. במדריך זה אציג שתיים מהן.

בדיקת תמיכה בתג canvas בעזרת הספריה modernizr

הדרך המועדפת על רבים לבדיקה האם דפדפן תומך בתג canvas היא שימוש בספרית ה - Javascript החופשית modernizr שכל מטרתה היא לאפשר למתכנתים לבדוק בקלות האם התגים והתכונות החדשים ב - HTML5 נתמכים על ידי דפדפנים. כדי להשתמש בספריה modernizr עליכם להורידה תחילה מכאן ולאחר מכן להוסיף אותה לפרוייקט שלכם באופן הבא:

<head>
    <script src="modernizr-2.6.2.min.js"></script>
</head>

הערה:  באתר הבית של modernizr תוכלו למצוא הוראות ומדריכים רבים לעבודה עם ספריה זו.

לאחר שתצרפו את modernizr לפרויקט שלכם תוכלו לבצע את בדיקת התמיכה בתג canvas באמצעות הקוד הבא:

function SupportCanvas () {
   return Modernizr.canvas;
}

זהו, קוד פשוט ויעיל העושה שימוש בכוחה של ספריה המתפתחת ומתעדכנת כל העת.

בדיקת תמיכה בתג canvas בעזרת פונקציה עצמאית

במידה והבדיקה היחידה שאתם מבצעים היא לגבי התג canvas אזי צירוף הספריה modernizr לפרויקט שלכם עלול להיות מעט "יקר" מבחינת זמן הטעינה של הדף שלכם (זאת, למרות שהספריה היא קטנה ויעילה). כדי להימנע מצירוף הספריה כולה לפרוייקט שלכם תוכלו לבצע בדיקה עצמית בעזרת הפונקציה הבאה:

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

הקוד שלמעלה יוצר בתוך המסמך שלנו את התג canvas ולאחר מכן מנסה לקבל מתג זה תכונה כלשהי (בעזרת getContext). במידה והמחרוזת המצופה לא מוחזרת אזי הפונקציה מחזירה אינדיקציה שהתג canvas אינו נתמך.


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | מדיניות שימוש