JavaScript window、locationオブジェクト基礎知識整理

10539 ワード

JavaScript

一、windowオブジェクト
windowはBOMの核心の対象で、ブラウザの一例を表しています.ブラウザでは、windowオブジェクトは二重の役割を持ち、JSを通じてブラウザウィンドウにアクセスするインターフェースであり、Globalオブジェクトでもあります.グローバルスコープで宣言された変数と関数はいずれもwindowオブジェクトの属性と方法になります.
グローバル変数もwindowオブジェクトの属性ですが、直接windowで定義される属性とはちょっと違います.グローバル変数はdeleteオペレータでは削除できませんが、直接windowで定義された属性は削除できます.また、直接に未発表の変数にアクセスするとエラーが発生します.windowオブジェクトを通じてアクセスすると、undefinedに戻ります.

var p1 = 'p1';
window.p2 = 'p2';
delete window.p1; //     
delete window.p2;
console.log(window.p1); //   'p1'
console.log(window.p2); // undefined

console.log(window.p3); // undefined
console.log(p3); //

フレームがページに含まれている場合は、各フレームに自分のwindowオブジェクトがあり、フレーム番号やフレーム名で対応するwindowオブジェクトにアクセスできます.例えば、次のコードに対しては、window.frames[0]またはwindow.frames["top"という名前のフレームにアクセスすることができます.

<html>
  <head>
    <title>Framestitle>
  head>
  <frameset rows="160, *">
    <frame src="top-frame.html" name="top">frame>
    <frameset cols="50%, 50%">
      <frame src="left-frame.html" name="left">frame>
      <frame src="right-frame.html" name="right">frame>
    frameset>
  frameset>
html>

windowオブジェクトの属性によって、ウィンドウの位置を取得し、調整することができます.下のコードを使ってブラウザをまたいでウィンドウの左と上の位置を取得できます.moveToとmoveBy法を使用して、ウィンドウを移動させて位置を調整することができます.moveToが受け入れるパラメータは新しい位置の座標です.moveByが受けるパラメータは水平と垂直方向のオフセットです.(ウィンドウを移動する方法は、ブラウザによっては無効になります.この2つの方法はフレームには適用されません.)

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

window.moveTo(0, 0); //         
window.moveBy(0, 100); //     100

ウィンドウのサイズはwindowオブジェクトの属性によって取得できます.resizettとresizeBy法を使用してウィンドウサイズを調整できますが、resizettで受け付けられているパラメータはウィンドウの新しい幅と高さであり、resizeByで受け入れられているパラメータは新しい幅の高さと元の幅の高さの差です.
タイムアウトコール
windowオブジェクトのsetTimeout方法はタイムアウトコールに使用され、二つのパラメータを受け入れる.実行するコードとミリ秒単位の時間値.実行コードは文字列または関数として参照できます.この方法の動作効果は,着信パラメータの実行コードが一定時間経過した後に実行されるようにすることである.伝達文字列は性能損失を引き起こす可能性がありますので、実行すべきコードをできるだけ関数として伝えるべきです.また、JSは単一スレッドのインタプリタであり、一定時間の間にコードのみ実行できます.実行するコードを制御するためにJSタスクのキューがあります.これらのタスクはキューに追加された順に実行されます.setTimeoutの2番目のパラメータは、実際にはJSに対して後どれぐらいで現在のタスクをタスクキューに追加しますか?もしキューが空なら、追加後のタスクはすぐ実行されます.そうでないと、キューの前のコードが実行されるのを待ってから、setTimeoutの最初のパラメータのタスクを実行します.つまり、2番目のパラメータを1秒と指定しても、1秒後にタスクが必ず実行されるとは限りません.

//                ，1000     '23333'
setTimeout("console.log('23333')", 1000);
//               ，2000     'hehe~'
setTimeout(function() {
  console.log('hehe~');
}, 2000);

タイムアウトコールの他の注意点:setTimeoutを呼び出した後、数値IDを返します.このIDによって、ある対応するタイムアウトコールをキャンセルすることができます.clearTimeoutを呼び出し、IDをパラメータとして入力すると、そのIDに対応するタイムアウトコールをキャンセルすることができます.タイムアウトコールのコードはすべてグローバルスコープで実行され、thisの値は非厳格モードでwindowオブジェクトを指し、厳密モードではundefinedとなります.
間欠コール
間欠コールはタイムアウト呼び出しと同様ですが、指定された時間間隔でコードを繰り返し実行し、間欠コールがキャンセルされたことやページがアンインストールされていることを知っています.間欠コールを設定する方法はsetIntervalで、受けたパラメータはsetTimeoutと同じです.set Interval方法はIDを返し、特定の間欠呼び出しに対応する.間欠コールをキャンセルする場合は、clear Interval方法で完了します.間欠コールもグローバルスコープで実行され、thisの値はタイムアウトコールと同じです.

var num = 1;
var ID = null;
ID = setInterval(function() {
  console.log(num);
  num += 1;
  if (num == 5) {
    clearInterval(ID);
  }
}, 500);

タイムアウトコールを使用したシミュレーション間欠呼び出しは、以下のコード例のように最適なモードであると考えられている.開発環境では、後の間欠コールが前の間欠コールが終了する前に起動する可能性があるため、本当の間欠コールはあまり使われません.タイムアウトコールを使うと、この欠点を完全に避けられ、先着順を確保できます.

var num = 1;
function func() {
  console.log(num);
  num += 1;
  if (num < 5) {
    setTimeout(func, 500);
  }
}
setTimeout(func, 500);

二、locationオブジェクト
locationオブジェクトは、現在のウィンドウに読み込まれているドキュメントに関する情報を提供し、ナビゲーション機能も提供します.locationオブジェクトはwindowオブジェクトの属性であり、documentオブジェクトの属性でもあります.つまり、window.locationとdocument.locationは同じオブジェクトを参照します.locationオブジェクトは、URLを独立したセグメントとして解析し、開発者が異なる属性でこれらのセグメントにアクセスできるようにすることができる.以下の表にlocationオブジェクトの属性を一覧表示し、例を説明します.
属性名
例
説明
sh
「〹contets」
URLの中のhash(〓号の後に続く文字列、アンカー)
ホスト
「wwww.wrox.com:80」
サーバ名とポート番号
hostname
「wwww.wrox.com」
サーバ名
href
「http://www.wrox.com」
完全なURL
pathname
「/WileyCDA」
URLのパス名
ポーター
「80」
ポート番号
protocol
http
プロトコル
search
「?q=javascript」
クエリー文字列
検索文字列:search属性によって検索文字列を取得することができますが、search属性は疑問符からURLの最後までのすべての内容を返しますので、検索文字列の属性にアクセスするのにうまくいけません.search属性を使ってクエリー文字列を取得した後に、解析を行う必要があります.そして、私たちが取得したい属性と属性値を取得することができます.以下のコードを使ってクエリー文字列を解析できます.

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

位置操作:locationオブジェクトを使ってブラウザの位置を変更できます.コードの例を示します.locationのプロパティ(hash属性を除く)を変更するたびに、ページは新しいURLで再読み込みされ、ページリフレッシュ後のブラウザの履歴に新しいレコードが作成されます.ページだけジャンプしたいのですが、履歴は発生しません.最後に、locationはもう一つの位置に関する方法があります.reload、ページを再読み込みします.

location.assign("http://www.wrox.com");
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";
//   3           URL，       URL              
location.hash = "#section1";
location.search = "?q=javascript";
location.hostname = "www.yahoo.com";
location.pathname = "mydir";
location.port = 8080;
//   replace       
location.replace("http://www.wrox.com");
//       
location.reload(); //                
location.reload(true); //

自分のJavaScriptメソッドライブラリを作成します.