メインコンテンツへ移動
黯羽軽揚毎日少しずつ

JS 学習ノート 4_BOM

無料2015-04-08#JS#bom

本稿では各種組み込みの BOM オブジェクトおよびクライアント検出関連の常識を紹介する

##1.frame 関連オブジェクト##

  • top：最外層のフレームを指します。top を使用すると、あるフレームから別のフレームにアクセスできます。例えば top.frames[index/name]

  • parent：現��のフレームの直接上位フレームを指します

  • window：コードが存在するフレームの特定インスタンスです。そのため window オブジェクトは一意ではなく、各フレームはそれぞれの window オブジェクトを持ちます

  • self：window を指します。両者は相互に交換可能です

##2.ウィンドウ、ページ関連##

###1.ウィンドウの画面左境界および上境界からの位置の取得###

var x = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;//FF は後者のみをサポート
var y = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
alert(x + ', ' + y);///

ブラウザによるウィンドウ位置の理解は異なり、ブラウザウィンドウを最大化した時の上記コードの出力結果は：

  • Chrome：(0, 0)

  • IE8：(0, 0)

  • FF：(-4, -4)

Safari と Opera は不明。ブラウザベンチャーの相違点は、ウィンドウ位置がブラウザウィンドウの位置なのか、ページコンテナ（viewport）の位置なのかという点です

###2.ページビューポート（viewport）サイズの取得###

var pageWidth = window.innerWidth;
var 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;
  }
}
alert(pageWidth + ', ' + pageHeight);///

ビューポート（viewport）とはページの可視領域を指し、つまりブラウザがページに提供するコンテナです。ブラウザウィンドウを最大化した時の上記コードの出力結果は：（解像度 1366*768）

  • Chrome：(1366, 653)

  • IE8：(1362, 644)

  • FF：(1366, 667)

PC 端ブラウザはこの点で合意していますが、モバイルブラウザには差異があります。モバイル端ブラウザをサポートする必要がある場合、各ブラウザのサポート状況を詳しく研究する必要があります。ここでは詳しく説明しません

###3.新しいウィンドウを開く方法###

//window.open(url, target, strOptions, replaceOrNot);//<a href="http://ayqy.net/" target="_self"></a>と等価。target 値は frameName にもでき、指定された frame でページを開くことを示す
//window.open('http://ayqy.net/', '_self');//現在のページで開く。戻るボタンが無効になる
//var win = window.open('http://ayqy.net/', '_blank', 'width=200, height=200');//200*200 のウィンドウをポップアップ
//setTimeout(win.close(), 3000);//3 秒後に自動閉じる
//window.open('http://ayqy.net/', '_self', '', true);//現在の履歴を置換。痕跡なしでジャンプ

P.S.ウィンドウ方式でコンテンツを表示することはSEO に不利です。最も一般的なポップアップウィンドウは広告か第三者アカウントログインであり、これらは SEO が不要な場所です

##3.タイムアウト呼び出し##

setTimeout(strCode/funcName, timeout);は timeout ミリ秒後に code が必ずしも実行されるとは限らないことを示します。なぜなら、この関数の正確な意味は：timeout ミリ秒後に指定されたタスクをタスクキューに追加するからです

未実行の遅延タスクをキャンセル：

var timeoutId = setTimeout(strCode/fun, timeout);
clearTimeout(timeoutId);

P.S.setTimeout の第 1 パラメータは文字列にできますが、関数名を使用することを推奨します。文字列は js コードに解析されてから実行される必要があるため、パフォーマンスの損失が存在します

##4.間隔呼び出し##

setInterval(strCode/fun, timeout);は指定された時間間隔でタスクをタスクキューに挿入することを示します

注意：新しいタスクを挿入する準備ができた時に、前回の挿入タスクがまだ完了していない場合、今回の挿入は自動的にキャンセルされます。つまり、タスクキュー内に同じタスクがない場合は挿入し、そうでなければ次回を待ちます

未実行の間隔タスクをキャンセル：タイムアウト呼び出しと同じく、clearInterval(intervalId);

注意：間隔呼び出しの使用は推奨されません。後続の間隔呼び出しが前回の終了前に起動する可能性があるためです。一般的に再帰的タイムアウト呼び出しでシミュレート します。例えば：

(function(){
  alert('x');
  setTimeout(arguments.callee, 3000);//関数名を使用しないことに注意。arguments.callee を使用する方が安全。関数名が外部から変更されることを恐れないため
})();//匿名関数を即時実行

##5.ダイアログ##

  • alert(msg)：警告ボックス。エラー情報の表示に使用。確定ボタンのみ

  • confirm(msg)：確認ボックス。削除などの重要な操作の確認に使用。確認/キャンセルボタンがあり、true/false を返す

  • prompt(msg, hint)：入力ボックス。ユーザー入力の取得に使用。確認/キャンセルボタンがあり、入力値/null を返す

  • windowprint()、window.find()：印刷/検索。用途は少ない

##6.location オブジェクト##

###1.url の取得###

  • location.href：現在のページの完全な url を取得。例えば"http://www.ayqy.net"

  • location.search：クエリ文字列を取得。例えば"?keyword=do"

  • location.hash：アンカー（#および後ろの値。UNIX では#を hash と呼ぶため hash と呼ばれる）を取得。例えば"#menu"

  • location.host：ホスト名とポート番号を取得。例えば"www.ayqy.net:80"

  • location.hostname：ホスト名を取得。例えば"www.ayqy.net"

  • location.pathname：url 中のディレクトリまたはファイル名を取得。例えば"/film/"

  • location.port：ポート番号を取得。例えば"80"

  • location.protocol：ページが使用するプロトコルを返す。例えば"https:"

###2.ジャンプ、リダイレクト###

  • location.assign(url);

  • location.href = url;//最も一般的

  • window.location = url;

  • location.replace(url);//ジャンプし、戻れない

  • location.reload(true/false);//現在のページを再読み込み。true の場合はキャッシュから取得しない

##7.navigator オブジェクト（ブラウザ関連パラメータの検出に使用）##

プラグインの検出と登録ハンドラの処理などの機能を提供します。登録ハンドラは、現在のページが何らかのオンライン機能（例えばオンラインメール、RSS リーダーなど）を提供することをブラウザに通知することに相当します。登録後、ユーザーが特定の操作（例えば RSS ソースページへのアクセス）を実行すると、自動的に登録済みページをリクエストします。デスクトップアプリケーションのデフォルト開き方式の設定に相当します

##8.screen オブジェクト##

クライアント関連情報の取得に使用します。例えば画面の幅と高さ、利用可能な幅と高さなど。用途は多くなく、ブラウザのサポート性も良くありません

##9.history オブジェクト##

  • history.go(delta);または history.go(str);前/後にジャンプ、または url に str を含む最新のページにジャンプ（前ま���は後）

  • history.back();history.forward();ブラウザの戻る/進むボタンをシミュレート

  • history.length;履歴レコードの数を取得。0 の場合は現在のページがユーザーがブラウザを開いた後にアクセスした最初のページであることを示す

注意：履歴内をジャンプできますが、履歴 URL は取得できません（セキュリティ制限）

P.S.HTML5 は history.pushState/history.replaceState 関数を提供します。pushState + Ajax を組み合わせてPJax技術と呼ぶ人がいます。ページ内更新のジャンプなし web App の実現に使用されますが、pushState には互換性の問題があり、他のサポートコンポーネントを導入する必要があります

##10.クライアント検出技術##

  1. 機能検出（特性検出）：コードを記述する前にユーザーブラウザの能力を検出し、異なる方法で目的を実現します。例えば：

     if(typeof String.startsWith === 'function'){...}

  2. 奇癖検出：特定のブラウザが特定のコードを実行する時に不合理な結果が生じます。ある奇癖がスクリプト実行を妨害する場合にのみ使用します（ここでの奇癖は実際にはブラウザ実装の js のバグを指します。例えば列挙すべきでない属性が列挙可能など。奇癖は比較的まれです）

  3. ユーザーエージェント検出：UA 文字列を検出することでユーザーブラウザの具体的な情報を識別しますが、UA には欺瞞性があります

P.S.クライアント検出技術を使用する必要がある場合、優先順位は上記の通りです。まず機能検出を行い、ダメなら奇癖検出、UA 検出は最下策 です。UA 検出は特定のモデルのブラウザを対象としており、ブラウザのパッチが既存の方案を無効にする可能性があるためです

コメント

コメントはまだありません

コメントを書く