2012年6月13日 星期三

使用Modernizr判斷是否支援HTML 5功能

 

如過要在JavaScript程式中判斷瀏覽器是否有支援HTML 5的某些功能,可以利用Open Source的Modernizr,先下載 modernizr-2.0.6.js,然後在網頁中引用,例如以下透過Modernizr判斷是否有支援HTML 5的canvas功能:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>  
    <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="scripts/modernizr-2.0.6.js"></script>
    <script type="text/javascript">
        $(function () {
            if (Modernizr.canvas)
                $("#result").text("你的瀏覽器支援canvas");
            else
                $("#result").text("你的瀏覽器不支援canvas");           
        });
    </script>
  
</head>
<body >
   <div id="result"></div>
</body>
</html>

 

如果不想下載Modernizr,也可以將source指向 Microsoft Ajax Content Delivery Network,例如;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>  
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
    <script type="text/javascript">
        $(function () {
            if (Modernizr.canvas)
                $("#result").text("你的瀏覽器支援canvas");
            else
                $("#result").text("你的瀏覽器不支援canvas");           
        });
    </script>
  
</head>
<body >
   <div id="result"></div>
</body>
</html>

沒有留言:

總網頁瀏覽量