ユーティリティ：ブラウザと特徴検出｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room

jQuery APIリファレンスユーティリティ：ブラウザと特徴検出


  1. jQuery.suppoert　※v1.3～〔ブラウザごとの特徴やバグを表すプロパティのコレクションを取得〕
  2. jQuery.browser〔navigator.userAgentから読まれるユーザーエージェントに関するフラグを含む配列を取得〕
  3. jQuery.browser.version〔ユーザーのブラウザに関するレンダリングエンジンのバージョン番号を取得〕
  4. jQuery.boxModel〔現在のページでブラウザがW3C標準のCSS Box Modelを使用しているか判定〕

jQuery.suppoert　※v1.3～
ブラウザごとの特徴やバグを表すプロパティのコレクションを取得

2009/2/27

$.support()　戻り値：オブジェクト

ブラウザごとのの特徴やバグを表すプロパティのコレクションを取得します。

jQueryが返すプロパティの大半は、レベルが低いため、一般的な日々の開発には役立ちそうにないものです。

jQuery.supportの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>ユーティリティ：ブラウザと特徴検出：jQuery.supportの使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                var s="";
                s+="このフレームはW3Cのボックスモデルを使用している：<strong>" +jQuery.support.boxModel + "</strong><br>";
                s+="現在のCSSフロートの値にアクセスするためにstyle.cssFloatを使用できる：<strong>" +jQuery.support.cssFloat + "</strong><br>";
                s+="ブラウザはgetAttribute('href')の結果をそのまま返す：<strong>" +jQuery.support.hrefNormalized + "</strong><br>";
                s+="innerHTMLが使用されているとき、ブラウザはlink要素をシリアライズする：<strong>" +jQuery.support.htmlSerialize + "</strong><br>";
                s+="innerHTMLが使用されているとき、ホワイトスペースを保持する：<strong>" +jQuery.support.leadingWhitespace + "</strong><br>";
                s+="要素がコピーされているとき、ブラウザはその要素が持つイベントハンドラも一緒にコピーしない：<strong>" +jQuery.support.noCloneEvent + "</strong><br>";
                s+="オブジェクト要素にgetElementByTagName('*')を使用するとすべての子孫要素を返す：<strong>" +jQuery.support.objectAll + "</strong><br>";
                s+="ブラウザはopacityプロパティを適切に解釈できる：<strong>" +jQuery.support.opacity + "</strong><br>";
                s+="インラインのスクリプトを挿入するのにappendChild/createTextNodeを使用してそれらを実行できる<strong>" +jQuery.support.scriptEval + "</strong><br>";
                s+="getAttribute('style')は、要素によって指定されたインラインスタイルを返すことができる：<strong>" +jQuery.support.style + "</strong><br>";
                s+="ブラウザはtbody要素のないテーブル要素を許可する：<strong>" +jQuery.support.tbody + "</strong><br>";
                $("#res").html(s);
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>ユーティリティ：ブラウザと特徴検出：jQuery.supportの使用例 | jQuery</h1>
            <p>▼インラインフレームに対するボックスモデルを返します。</p>
<!-- CODE -->
            <p id="res"></p>
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery.browser
navigator.userAgentから読まれるユーザーエージェントに関するフラグを含む配列を取得

2009/2/27

$.browser()　戻り値：Map

jQuery v1.3からは非推奨になりました（jQuery.support参照）。 navigator.userAgentから読まれる、ユーザーエージェントに対するフラグを含む配列を返します。

利用可能なフラグは、「safari」、「opera」、「msiea」、「mozilla」です。

このプロパティは、DOMが準備される前に利用可能なため、確かなブラウザだけに準備したイベントを追加するノニ使用することができます。

オブジェクトの検出が十分に信頼できないブラウザがあります。 このような場合にブラウザを検知しても意味がありません。

ブラウザおよびオブジェクト検知の組み合わせはかなり信頼できる結果をもたらします。

jQuery.browserの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>ユーティリティ：ブラウザと特徴検出：jQuery.browserの使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $.each($.browser, function(i, val){
                    $("<li>"+i+"：<span>"+val+"</span></li>").appendTo("#res ul");
                });
                $.each($.browser, function(i, val){
                    if(i=="mozilla" && $.browser.version.substr(0,3)=="1.9"){
                        $("#res2").text("このブラウザはFirefox 3です。");
                    }else{
                        $("#res2").text("このブラウザはFirefox 3ではありません。");
                    }
                });
                $.each($.browser, function(i){
                    if($.browser.msie){
                        $("#res3 li").css("display", "inline");
                        $("#res3 li").text("display='inline'");
                    }else{
                        $("#res3 li").css("display", "inline-table");
                        $("#res3 li").text("display='inline-table'");
                    }
                });
            });
        </script>
        <style type="text/css">
            #res p { color:green; font-weight:bolder; margin:3px 0 0 10px; }
            #res div { color:blue; margin-left:20px; font-size:14px; }
            #res span { color:red; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>ユーティリティ：ブラウザと特徴検出：jQuery.browserの使用例 | jQuery</h1>
<!-- CODE -->
            <p>▼ブラウザ情報を取得して表示します。</p>
            <div id="res">
                <p><strong>ブラウザ情報：</strong></p>
                <ul></ul>
            </div>
            <br>
            <p>▼Firefox 3かどうか判定します。</p>
            <p id="res2"></p>
            <br>
            <p>▼IEなら下記のli要素のdisplay属性に「inline」を設定し、それ以外のブラウザなら「inline-table」を設定します。</p>
            <div id="res3">
                <ul>
                    <li>アイテム</li>
                    <li>アイテム</li>
                    <li>アイテム</li>
                </ul>
            </div>
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery.browser.version
ユーザーのブラウザに関するレンダリングエンジンのバージョン番号を取得

2009/2/27

$.browser.version()　戻り値：文字列

jQuery v1.3からは非推奨になりました（jQuery.support参照）。 ユーザーのブラウザに関するレンダリングエンジンのバージョン番号を取得します。

これはいくつかの典型的な結果です。

  • # nternet Explorer: 6.0, 7.0
  • Mozilla/Firefox/Flock/Camino: 1.7.12, 1.8.1.3, 1.9
  • Opera: 9.20
  • Safari/Webkit: 312.8, 418.9
jQuery.browser.versionの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>ユーティリティ：ブラウザと特徴検出：jQuery.browser.versionの使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#res").html("このブラウザのバージョンは<strong>"+$.browser.version+"</strong>です。");
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>ユーティリティ：ブラウザと特徴検出：jQuery.browser.versionの使用例 | jQuery</h1>
            <p>▼ブラウザのバージョンを取得します。</p>
<!-- CODE -->
            <p id="res"></p>
<!-- / CODE -->
        </div>
    </body>
</html>

jQuery.boxModel
現在のページでブラウザがW3C標準のCSS Box Modelを使用しているか判定

2009/2/27

$.boxModel()　戻り値:真偽値

jQuery v1.3からは非推奨になりました（jQuery.support参照）。 現在のページでブラウザがW3C標準のCSS Box Modelを使用しているかを判定します。

jQuery.boxModelの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>ユーティリティ：ブラウザと特徴検出：jQuery.boxModelの使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#res").html("このインラインフレームのボックスモデル：<strong>"+$.boxModel+"</strong>");
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>ユーティリティ：ブラウザと特徴検出：jQuery.boxModelの使用例 | jQuery</h1>
            <p>▼インラインフレームのボックスモデルを返します。</p>
<!-- CODE -->
            <p id="res"></p>
<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて

©2026 PHP & JavaScript Room All Rights Reserved.