BOMの話をします.

4182 ワード
javascript
BOM
BOMのフルネームはBrowser Object Modelであり、ブラウザオブジェクトモデルBOMとしてHTMLページの内容から独立して提供されているが、ブラウザに関する一連のオブジェクトは、ブラウザウィンドウの管理やブラウザウィンドウとの間の通信などの機能BOMが主に一連のオブジェクトから構成されており、これらのオブジェクトは、各ブラウザが提供するものと簡単に理解できる.
Windowオブジェクト
BOMの中で最も核心となるオブジェクトはWindowオブジェクトであり、このオブジェクトはHTMLページを実行するブラウザウィンドウがブラウザ環境にあり、WindowオブジェクトはJavaScript論理がブラウザウィンドウにアクセスできるオブジェクトであり、ECMAScript仕様のGlobalグローバルオブジェクトがブラウザ環境においてJavaScriptロジックを実行する場合である.グローバルスコープで定義されたオブジェクト、変数、関数はWindowオブジェクトの属性と方法であり、Windowオブジェクトを介してGlobalグローバルオブジェクトの属性と方法にアクセスすることもできます.
グローバルスコープ
ブラウザ環境では、ECMAScript仕様では、WindowオブジェクトはGlobalグローバルオブジェクトを表していますので、グローバルスコープに定義されている変数と関数は、Windowオブジェクトの属性と方法でアクセスできます.
var name='  ';
function fun(){
    console.log('this is function');
}
//window            
console.log(window.name);
window.fun();
Windowオブジェクトのプロパティ
Windowオブジェクトの属性数が多く、ブラウザウィンドウの基本情報や複雑な情報も含まれています.Windowオブジェクトを以下の3つに分類することができます.1.BOMの他のオブジェクト、例えばNavigatorオブジェクトなど2.ブラウザウィンドウに関する基本情報などがあります.これらの属性はDOM 0レベルが多く、W 3 C標準仕様ではありません.3.HTML 5バージョンの追加に関する機能などが多く含まれています.
ブラウザウィンドウの幅と高さ
Windowオブジェクトが提供する属性で、現在のブラウザウィンドウの幅と高さを取得できます.
  • inner WidthとinnerHeight属性:読み取り専用属性は、現在のブラウザウィンドウの可視幅と高さを返します.スクロールバーがあれば、スクロールバー
    • も含みます.
  • outter WidthとoutterHeight属性:
    • Windowオブジェクトとself属性
    Windowオブジェクトのself属性は現在のブラウザウィンドウの読み取り専用属性に戻り、self属性はWindowオブジェクトの参照を返します.
    console.log(window==window.self);
    Windowオブジェクトの方法
    Windowオブジェクトの方法
  • システムプロンプトボックス:alert()方法、confirm()方法、およびprompt()方法
  • オープンとクローズウィンドウ:open()とクローズド()方法、show ModalDialog()
  • DOM標準規格0レベルのいくつかの方法
  • タイマー:set Timeout()とclearTimeout()、set Interval()とclearInterval()
    • Navigatorオブジェクト
    Navigatorオブジェクトにはブラウザの状態に関する情報が含まれています.window.navigator属性を通じてNavigatorの対象となるNavigatorオブジェクトには一連の常用属性が提供され、現在のブラウザの情報を得ることができます.
  • appCodeName:ブラウザのコード名
  • appName:ブラウザの名前
  • appVersion:ブラウザのプラットフォームとバージョン情報
  • plotform:ブラウザを実行するオペレーティングシステムプラットフォーム
    • userAgent属性
    NavigatorオブジェクトのuserAgent属性は、クライアントがサーバを送信するuser-agentヘッダの値に戻り、userAgent属性は読み取り専用の文字列であり、HTTP要求に対するブラウザのユーザエージェントヘッダの値は、userAgent属性を介してユーザが現在使用しているブラウザ製品を取得すると宣言した.ブラウザ対応ソリューションを提供します.ユーザが現在使用しているオペレーティングシステムの情報をuserAgent属性で取得します.
    オブジェクト
    Historyオブジェクトには、ブラウザでユーザがアクセスしたURL(URL)が含まれています.
  • length属性:Higtoryオブジェクトのlength属性は、ユーザがブラウザでウェブサイトにアクセスする数
    • を取得することができる.
    console.log('          ：'+history.length);
  • Higstoryオブジェクトはまた、ブラウザの前進と後退を実現するための方法
    • を提供する.
    forward():次のページにジャンプすることを実現して、ブラウザの前進ボタンと同じback():前のページにジャンプすることを実現して、機能はブラウザのキャンセルボタンと同じgo():指定されたページにジャンプすることを実現して、マイナスの場合は後退して、プラスの場合は前進を表します.
    Locationオブジェクト
    Locationオブジェクトは、Windowオブジェクトの属性であり、Dcumentオブジェクトの属性でもあるため、主にアドレスLocationオブジェクトを取得し、設定するためのブラウザのアドレスバーの情報を含んでいる.
    console.log(window.location==document.location);//true
    Locationオブジェクトの属性
    Locationオブジェクトは、アドレスバーの情報だけでなく、解析機能も提供しており、異なるLocationオブジェクトの属性によって異なるアドレスバーの情報にアクセスすることができます.
  • host:サーバ名とポート番号
    • を返します.
  • hostname:サーバ名
    • に戻る
  • href:現在のローディングページの完全なURL
    • を返します.
  • pathname:現在のURLのディレクトリとファイル名
    • を返します.
  • port:現在のURLのポート番号
    • を返します.
  • protocol:ページで使用するネットワークプロトコル
    • を返す.
    Locationオブジェクトの方法
  • assign():新しい文書を読み込むとLocationを直接修正するのと同じ効果があります.
  • reload():現在の文書を再読み込みし、機能はリフレッシュボタンと同じで、パラメータがtrueの場合は、強制的に空キャッシュをクリアしてページを更新します.
  • replace():現在のドキュメントを新しいドキュメントで置換する(履歴は生成されず、リターン・ボタンでは返品できない)
    • タイマー
    タイマーの具体的な方法はWindowオブジェクトから提供されます.
  • 遅延実行とは、指定されたプログラムコードが指定された時間後に実行されることであり、直ちに実行されることではない.
    セットTimeout()メソッドは、タイマーが満了した後に関数または指定されたコードの一部を実行するタイマーを設定します.
    var timeoutID=scope.setTimeout(function,delay);
function:             
delay:      (    1000  )，              。       ，delay    0
    この方法の戻り値timeoutIDは、タイマーの番号を表す正の整数です.この値はclearTimeout()に渡されてこのタイミングをキャンセルすることができる.
  • サイクル実行とは、指定されたプログラムコードが指定された時間間隔で実行される
    • のことです.
    set Interval()メソッドは、関数を呼び出したり、コードセグメントを実行したりして、呼び出しごとに一定の時間遅延を持つ.
    var timeoutID=scope.setInterval(function,delay);
    Function:呼び出す関数または実行するコードdelay:遅延のミリ秒数(一秒は1000ミリ秒)は、関数の呼び出しが遅延の後に発生します.このパラメータを省略すると、delayがデフォルト値0を取る方法の戻り値timeoutIDは正の整数であり、タイマーの番号を表します.この値はclearIntervalに伝えられます.
    nodejsフレーム及びオープンソース項目