js BOM対象

6106 ワード

Windowオブジェクト
BOMの核心の対象はwindowで、それはブラウザーの一例を表します.ブラウザでは、windowオブジェクトは二重の役割を持ち、JavaScriptを通じてブラウザウィンドウにアクセスするインターフェースであり、ECMAScriptが規定するGlobalオブジェクトでもある.これは、ウェブページで定義されているいずれかのオブジェクト、変数、関数が、すべてwindowをそのGlobalオブジェクトとして使用していることを意味しているので、ParseInt()にアクセスする権利があります.
ブラウザウィンドウの位置
windowオブジェクトの位置を特定したり変更するための属性と方法がたくさんあります.IE、Safari、OperaおよびChromeは、それぞれ、画面の左側および上部に対するウィンドウの位置を示すscreenLeftおよびscreenTop属性を提供する.FirefoxはscreenXとscreenY属性において同じウィンドウ位置情報を提供し、SafariとChromeも同時にこの2つの属性をサポートします.下記のコードを使ってブラウザをまたいでウィンドウの左と上の位置を取得できます.

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

ウィンドウサイズ

    var pageWidth = window.innerWidth,
        pageHeight = window.innerHeight;

    if (typeof pageWidth != "number"){
        if (document.compatMode == "CSS1Compat"){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
        } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
        }
    }

locationオブジェクト
locationは最も有用なBOMオブジェクトの一つで、現在のウィンドウにロードされているドキュメントに関する情報を提供し、ナビゲーション機能も提供しています.実際には、locationオブジェクトは非常に特殊なオブジェクトです.これはwindowオブジェクトの属性であり、documentオブジェクトの属性です.言い換えれば、window.locationとdocument.locationは同じオブジェクトを参照します.locationオブジェクトの用途は、現在のドキュメントに保存されている情報だけでなく、URLを独立したセグメントとして解析し、開発者が異なる属性でこれらのセグメントにアクセスできるようにすることを示しています.以下の表には、locationオブジェクトのすべての属性(注:各属性の前のlocationプレフィックスを省略します)が表示されます.
属性名
例
説明
sh
「〹contets」
URLのhashを返します.URLにハッシュが含まれていない場合は、空の文字列を返します.
ホスト
「wwww.wrox.com:80」
サーバ名とポート番号を返します.
hostname
「wwww.wrox.com」
ポート番号がないサーバ名を返します.
href
http:/www.wrox.com
現在のロードページの完全なURLを返します.また、locationオブジェクトのtoString()メソッドもこの値に戻ります.
pathname
「/WileyCDA/」
URLのディレクトリとファイル名を返します.
ポーター
「8080」
URLで指定されたポート番号を返します.URLにポート番号が含まれていない場合、この属性は空の文字列に戻ります.
protocol
「http:」
ページで使用するプロトコルを返します.通常はhttp:またはhttps:
search
「?q=javascript」
URLのクエリー文字列を返します.この文字列は疑問符で始まる
クエリー文字列のパラメータ
上記の属性により、Locationオブジェクトのほとんどの情報にアクセスすることができますが、URLに含まれるクエリ文字列の属性にアクセスするのは不便です.location.searchは疑問符からURLの最後までのすべての内容を返しているが、各照会文字列パラメータにいちいちアクセスすることはできない.このためには、クエリー文字列を解析するために次のように関数を作成し、すべてのパラメータを含むオブジェクトを返します.

function getQueryStringArgs(){
    //               
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
    //       
    args = {},
    //     
    items = qs.length ? qs.split("&") : [],
    item = null,
    name = null,
    value = null,
    //  for      
    i = 0,
    len = items.length;
    //          args    
    for (i=0; i < len; i++){
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if (name.length) {
            args[name] = value;
        }
    }
    return args;
}

位置操作

location.assign("http://www.wrox.com");

すぐに新しいURLを開き、ブラウザの履歴に記録を作成します.location.hrefまたはwindow.locationを一つのURL値に設定する場合、assign()方法を呼び出してもよい.
これらのブラウザの位置を変更する方法では、location.href属性を設定するのが最も一般的である.
また、locationオブジェクトの他の属性を変更しても、現在読み込まれているページを変更できます.以下の例は、hash、search、hostname、pathname、およびport属性を新たな値に設定することによってURLを変更することを示している.

    //     URL   http://www.wrox.com/WileyCDA/
    //  URL    "http://www.wrox.com/WileyCDA/#section1"
    location.hash = "#section1";
    //  URL    "http://www.wrox.com/WileyCDA/?q=javascript"
    location.search = "?q=javascript";
    //  URL    "http://www.yahoo.com/WileyCDA/"
    location.hostname = "www.yahoo.com";
    //  URL    "http://www.yahoo.com/mydir/"
    location.pathname = "mydir";
    //  URL    "http://www.yahoo.com:8080/WileyCDA/"
    location.port = 8080;

locationのプロパティを変更するたびに、ページは新しいURLで再読み込みされます.
上記のいずれかの方法でURLを修正すると、ブラウザの履歴に新しいレコードが作成されますので、ユーザは「後退」ボタンをクリックすることで前のページにナビゲーションされます.このような行為を無効にするには、replace()方法が使用されてもよい.この方法は一つのパラメータ、つまりナビゲーションするURLしか受け付けません.結果としてブラウザの位置が変更されることがありますが、履歴に新たな記録は生成されません.

location.reload();

ページを再読み込み
navigatorオブジェクト
属性または方法
説明
IE
Firefox
Safari/Chrome
Opera
appCodeName
ブラウザの名前.通常はMozillaですが、Moziaブラウザではなくても同じです.
3.0+
1.0+
1.0+
7.0+
appMinor Version
サブバージョン情報
4.0+
を選択します.
を選択します.
9.5+
appName
ブラウザの名前
3.0+
1.0+
1.0+
7.0+
アプリVersion
ブラウザのバージョン.通常は実際のブラウザバージョンに対応していません.
3.0+
1.0+
1.0+
7.0+
buildID
ブラウザの編集バージョン
を選択します.
2.0+
を選択します.
を選択します.
cookie Enbaled
クッキーが有効かどうかを示す.
4.0+
1.0+
1.0+
7.0+
cputClass
クライアントコンピュータで使用するCPUタイプ(x 86、68 K、Alpha、PPCまたはOther)
4.0+
を選択します.
を選択します.
を選択します.
java Enbaled()
現在のブラウザでJavaが有効にされているかどうかを示します.
4.0+
1.0+
1.0+
7.0+
langer.
ブラウザの主言語
を選択します.
1.0+
1.0+
7.0+
mimeTypes
ブラウザに登録されているMIMEタイプ配列
4.0+
1.0+
1.0+
7.0+
オンライン
ブラウザがインターネットに接続されているかどうかを示す.
4.0+
1.0+
－
9.5+
ops Profile
もう大丈夫みたいです.関連文書が見つかりません.
4.0+
－
－
－
oscpu
クライアントコンピュータのオペレーティングシステムまたは使用するCPU
－
1.0+
－
－
plotform
ブラウザがあるシステムプラットフォーム
4.0+
1.0+
0++
7.0+
plugins
ブラウザにインストールされているプラグイン情報の配列
4.0+
1.0+
1.0+
7.0+
preference()
ユーザの最初のオプションを設定します.
－
1.5+
－
－
プロジェクト
製品名(Geckoなど)
－
1.0+
1.0+
－
productSub
製品に関する副次的な情報(例えば、Geckoのバージョン)
－
1.0+
1.0+
－
register-Connect Handler()
特定のMIMEタイプに対して、一つの局を処理プログラムとして登録する.
－
2.0+
－
－
register-ParotocolHandler()
特定のプロトコルに対して、一つのサイトを処理プログラムとして登録します.
－
2.0
－
－

スコープとスコープチェーン