8 BOM

本章の内容

理解windowオブジェクト-BOMのコア

コントロールウィンドウ、フレームワーク、ポップアップウィンドウ

は、locationオブジェクトにおけるページ情報

を利用する.

は、navigatorオブジェクトを使用してブラウザ

を理解する.
8.1 windowオブジェクトBOMのコアオブジェクトは、ブラウザの一例を示すwindowである.ブラウザでは、windowオブジェクトには二重の役割があり、JavaScriptを介してブラウザウィンドウにアクセスするインターフェースであり、ECMAScriptで規定されているGlobalオブジェクトでもある.これは、ウェブページで定義されたいずれかのオブジェクト、変数および関数が、windowを対象としていることを意味し、Globalなどの方法にアクセスする権利がある.
8.1.1グローバルスコープ
グローバルスコープ内で宣言されたすべての変数は、関数がparseInt()オブジェクトの属性および方法になる.大域変数がwindowオブジェクトの属性になるかどうかはともかく、大域変数とwindowオブジェクト上で属性を直接定義するかどうかは少し違っています.大域変数はwindowオペレータによって削除できず、deleteオブジェクト上で直接定義された属性でも大丈夫です.また、宣言されていない変数にアクセスしようとするとエラーが発生しますが、windowオブジェクトを照会することにより、宣言されていない可能性のある変数が存在するかどうかを知ることができます.

//       ，  `oldValue`   
var newValue = oldValue;
//        ，          
//newValue     undefined
var newValue = window.oldValue;

8.1.2ウィンドウ関係とフレームワーク
ページにフレームが含まれている場合は、各フレームはwindowオブジェクトを有し、windowセットに保存される.framesのセットでは、対応するframesオブジェクトには、数値インデックスまたはフレーム名を介してアクセスすることができる.各windowオブジェクトは、フレーム名を含むwindow属性を有する.nameオブジェクトは常に最高(最外)層のフレームを指す.つまりブラウザウィンドウです.フレーム内で他のフレームに正しくアクセスできるようにします.一つのフレームで作成された任意のコードについては、topオブジェクトは、トップフレームではなく、そのフレームの特定のインスタンスを指すからである.
8.1.3ウィンドウの位置

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

8.1.4ウィンドウサイズwindowおよびouterWidthは、ブラウザウィンドウ自体のサイズに戻る.一方、outerHeightおよびinnerWidthは、コンテナ内のページビュー領域のサイズ(枠幅を減算)を表している.innerHeightおよびdocument.documentElement.clientWidth.document.documentElement.clientHeightおよびdocument.body.clientWidth.
8.1.5ナビゲーションとウィンドウを開くdocument.body.clientHeight方法を使用すると、特定のURLにナビゲーションすることもできるし、新しいブラウザウィンドウを開くこともできる.この方法は、4つのパラメータを受信することができます.ローディングするURL、ウィンドウターゲット、特性文字列、およびブラウザ履歴において現在ローディングされているページのブール値を新しいページに置き換えますか?通常は最初のパラメータを渡すだけで、最後のパラメータは新しいウィンドウを開けない場合にのみ使用されます.第二のパラメータが渡され、かつ、パラメータが既存のウィンドウまたはフレームの名前である場合、その名前を持つウィンドウまたはフレームには、最初のパラメータで指定されたURLがロードされます.

//   
window.open("http://www.wrox.com/", "topFrame");

「topFrame」というウィンドウまたはフレームがあれば、このURLはこのウィンドウまたはフレームにロードされます.そうしないと新しいウィンドウが作成され、「topFrame」と名づけられます.また、2番目のパラメータは、以下のいずれかの特殊なウィンドウ名であってもよい.self、_parent、_topまたは_blank

ポップアップウィンドウが、第二のパラメータがすでに存在しているウィンドウまたはフレームでない場合、この方法は、第三のパラメータ位置に入ってきた文字列に基づいて新しいウィンドウまたは新しいタブページを作成する.3番目のパラメータが入力されていない場合は、すべてのデフォルト設定のブラウザウィンドウを開きます.新しいウィンドウを開けないと、3番目のパラメータは無視されます.3番目のパラメータはカンマ区切りの設定文字列で、新しいウィンドウにそれらの特性が表示されることを示します.

window.open("http://www.wrox.com/","wroxWindow", "height=400,width=400,top=0,left=10,resizable=yes");

window.open()方法は、新しいウィンドウへの参照を返す.参照の対象は他のwindow.open()オブジェクトとほぼ同じであるが、これをより多く制御することができる.

var wroxWin = window.open("http://wrox.com/","wroxWindow");
wroxWin.resizeTo(500,500);
wroxWin.moveTo(100,100);
wroxWin.close();

セキュリティ機構

ポップアップウィンドウシールド

var wrox = window.open("http://www.wrox.com", "_blank");
if(wroxWin == null) {
  alert("The popup was blocked!");
}

ブラウザ拡張または他のプログラムによって阻止されるポップアップウィンドウである場合、windowは通常、エラーを投げかける.

var blocked = false;
try {
  var wrox = window.open("http://www.wrox.com", "_blank");
  if (wroxWin == null) {
    blocked = true;
  } 
}catch (ex) {
  blocked = true;
}
if (blocked) {
  alert("The popup was blocked!");
}

8.1.6間欠呼び出しとタイムアウト呼び出し
タイムアウトコールは、window.open()オブジェクトのwindow方法を使用する必要があります.実行するコードとミリ秒で表される時間、すなわちコードを実行する前に何ミリ秒待つべきかという二つのパラメータを受け入れることができます.ここで、最初のパラメータはJavaScriptコードを含む文字列であっても良いし、関数であっても良い.

//        
setTimeout("alert("Hello world!")", 1000);
//       
setTimeout(function(){alert("hello world!")}, 1000);

二つ目のパラメータはJavaScriptにどれぐらいの時間が過ぎたら現在のタスクを列に追加するかを教えます.列が空であれば、追加コードはすぐ実行されます.そうでなければ、前のコードの実行が完了したら実行します.setTimeout()を呼び出した後、方法はタイムアウトコールを表す数値IDを返します.このタイムアウトコールIDは実行予定コードの一意識別子であり、タイムアウトコールをキャンセルすることができる.

var timeoutId = setTimeout(function () {alert("hello world!");}, 1000);
// 
clearTimeout(timeoutId);

間欠呼び出しはタイムアウト呼び出しと同様ですが、間欠呼び出しがキャンセルされるか、またはページがアンインストールされるまで、指定された時間間隔でコードを繰り返します.

setInterval(function(){alert("hello world!");}, 1000);
var intervalId = ...
clearInterval(intervalId);

タイムアウトを使用して間欠呼び出しをシミュレートするのは最適なモードであり、後者の間欠呼び出しは前の間欠呼び出しが終了する前に起動する可能性があるためである.ですから、間欠コールは使わないほうがいいです.
8.1.7システムダイアログ
ブラウザは、setTimeout()、alert()、confirm()方法により、システムダイアログを呼び出してユーザにメッセージを表示することができる.システムダイアログは、ブラウザに表示されているウェブページとは関係なく、HTMLも含まれていません.それらの外観は、CSSによって決定されるのではなく、オペレーティングシステムおよびブラウザ設定によって決定される.さらに、これらの方法によって開かれるダイアログは、同期およびモードです.つまり、これらのダイアログが表示されるとコードは停止されますが、これらのダイアログをオフにするとコードは再開されます.ユーザがOKをクリックしたかそれともキャンセルしたかを確認するために、prompt()方法で戻ったブール値を確認することができます.

if (confirm("are you okay?")) {
  alert("haha!");
} else {
  alert("eee!");
}

confirm()方法は、テキストの入力をユーザに促す「ヒント」ボックスを生成する.この方法は、ユーザにテキストヒントとテキスト入力フィールドのデフォルト値を表示する2つのパラメータを受け入れる.ユーザーがOKボタンをクリックした場合、prompt()はテキスト入力ボックスの値を返します.そうでない場合はprompt()に戻る.
8.2 locationオブジェクトnullオブジェクトはlocationオブジェクトの属性であり、windowオブジェクトの属性でもある.言い換えれば、documentおよびwindow.locationは、同じオブジェクトを参照している.
8.2.1クエリ文字列パラメータ
クエリー文字列を解析するために次のように関数を作成し、すべてのパラメータを含むオブジェクトを返します.

function getQueryStringArgs () {
  //               
  var qs = (location.search.length > 0 ? location.search.substring(1) : "");
  //       
  var args = {};
  //     
  var items = qs.lenth ? qs.split("&") : [];
  var item = null;
  var name = null;
  var value = null;
  var i = 0;
  var len = items.length;
  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;
}

8.2.2位置操作

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

document.location方法を使用すると、ユーザは前のページに戻ることができません.

location.reload();  //    （         ）
location.reload(true);  //    （       ）

コードの最後の行にreplace()を置いたほうがいいです.
8.3ナビゲートオブジェクト
クライアントブラウザを識別するための事実上の基準となっています.
8.3.1検出プラグイン
非IEブラウザでは、reload配列を使用してこの目的を達成することができる.この配列の各項目には以下の属性が含まれています.

name:プラグインの名前.

description:プラグインの説明.

filename:プラグインのファイル名.

length:プラグインによって処理されるMIMEタイプの数.

IEのプラグインを検出するのは面倒くさいです.IEにおいてプラグインを検出する唯一の方法は、特有のpluginsタイプを使用して、特定のプラグインを作成することを試みることである.特定のプラグインをチェックするには、そのCOM識別子が必要です.

function hasIEPlugin (name) {
  try {
    new ActiveXObject(name);
    return true;
  } catch (ex) {
    return false;
  }
}
//   Flash
alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));
//   QuickTime
alert(hasIEPlugin("QuickTime.QuickTime"));

//          QuickTime
function hasQuickTime() {
  var result = hasPlugin("QuickTime");
  if(!result) {
    result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
  }
}

8.3.2登録処理プログラム
8.4 screenオブジェクト
8.5 history対象ActiveXObjectはhistoryオブジェクトの属性であり、したがって、各ブラウザウィンドウ、ラベルページ、および各フレームは、自分のwindowオブジェクトが特定のhistoryオブジェクトに関連している.window方法を使用して、ユーザの履歴に任意にジャンプでき、後ろにも前にも進むことができる.この方法は、後方または前方にジャンプするページ数の整数値を表すパラメータを受け付けます.負の値は後ろにジャンプし、正の値は反対です.

//    
history.go(-1);
//    
history.go(1);
//    
history.go(2);

go()方法に文字列パラメータを伝えることもでき、このときブラウザは履歴に文字列を含む最初の位置にジャンプします.履歴に文字列が含まれていない場合、この方法は何もしません.

//       wrox.com   
history.go("wrox.com");
//       nczonline.net   
history.go("nczonline.net");

go()の代わりにback()およびforward()が使用されてもよい.

//    
history.back();
//    
history.forward();

もう一つのgo()属性があります.履歴の数が保存されています.

if (history.length == 0) {
  //                
}

8.6まとめ
ブラウザオブジェクトモデルは、lengthオブジェクトを頼りに、ブラウザウィンドウおよびページ可視領域を表しています.一方、windowオブジェクトまたはECMAScriptのwindowオブジェクトは、すべての大域変数および関数がその属性であり、すべてのオリジナルのコンストラクタおよび他の関数もその名前空間に存在する.

は、フレームワークを使用する際に、各フレームに独自のGlobalオブジェクトと、すべてのオリジナルのコンストラクタおよび他の関数のコピーを有する.各フレームはwindowセットに保存されており、位置または名前によってアクセスできます.

には、親の枠を含む他のフレームを参照するためのウィンドウポインタがあります.

framesオブジェクトは常に最も周辺のフレーム、つまりブラウザウィンドウ全体を指す.

topオブジェクトは現在のフレームを含むフレームを表し、parentオブジェクトはselfを指す.

は、windowオブジェクトを使用して、プログラム的にブラウザのナビゲーションシステムにアクセスすることができる.対応する属性を設定すると、ブラウザのURLはセグメントごとまたは全体的に変更できます.

呼び出しlocation方法は、ブラウザ履歴に現在表示されているページをURLに置き換えながら、新しいURLにナビゲーションすることができる.

replace()オブジェクトは、ブラウザに関する情報を提供する.どのような情報を提供するかは、ユーザのブラウザによって大きく異なります.しかし、いくつかの共通の属性はすべてのブラウザに存在します.