ブラウザオブジェクトモデルBOM

10970 ワード

  •    ブラウザにアクセスするための機能.BOMは规格に欠けています.各ブラウザのプロバイダーは自分の考え方でそれを広げます.ブラウザの共有対象は事実の基准になります.
  •    BOMの核心の対象はwindowで、それはブラウザーの一例を表します.windowオブジェクトはJavaScript構造の最上階にあり、開いているウィンドウごとに、システムは自動的にwindowオブジェクトを定義します.

  • windowオブジェクトのプロパティ
    クローズド
    ウィンドウが閉じられている時は本当です. 
    default Status
    ウィンドウの下のステータスバーに表示されるデフォルトのステータスメッセージ 
    document
    ウィンドウに現在表示されているドキュメントオブジェクト
    frames
    ウィンドウ内のフレームオブジェクト配列 
    history
    ウィンドウに一番近いURLが保存されています.
    length
    ウィンドウのフレーム数 
    location
    現在のウィンドウのURL 
    name
    ウィンドウ名 
    offscreenBuffering
    新しいウィンドウの内容を描画し、完了後に既存のコンテンツをコピーするために、画面の更新を制御します.
    opener
    現在のウィンドウを開く
    parent
    別のウィンドウを含むウィンドウを指します.(枠で使用します.) 
    screen
    画面に関する情報を表示します.高さ、幅(ピクセル単位)
    self
    現在のウィンドウを示します
    status
    ユーザ相互作用によるステータスバーの一時メッセージを記述する.
    トップ
    特定のウィンドウを含む最上位のウィンドウ(フレームで使用)
    window
    現在のウィンドウを示します.selfと等価です.
    windowオブジェクトの方法
    alert(text)
    警告ダイアログを作成して、メッセージを表示します.
    blur()
    フォーカスをウィンドウから削除します.
    clear Interval(interval)
    前に設定したタイマーの間隔をクリアします.
    clearTimeOut(timer)
    クリア前に設定したタイムアウト
    close()
    ウィンドウを閉じる
    confirm()
    ユーザー確認が必要なダイアログを作成します.
    focus()
    ウィンドウにフォーカスを移動
    open(url,name,[options]
    新しいウィンドウを開き、新しいwindowオブジェクトに戻ります.
    prompt(text、default Input)
    ダイアログを作成して、ユーザーに情報の入力を要求します.
    scroll(x,y)
    ウィンドウをピクセルポイントの位置にスクロールします.
    set Interval(expression、miliseconds)
    指定された時間間隔で式を計算します.
    set Interval(function,milisenconds,[argments])
    指定された時間間隔を経て関数を呼び出します.
    set Timeout(expression、miliseconds)
    タイマーがオーバーした後に式を計算します.
    set Timeout(expression、miliseconds、[argments])
    タイマーがオーバーした時に関数を計算します.
    print()
    印刷ダイアログを呼び出す
    find()
    検索ダイアログを呼び出す
  • windowのプロパティと方法は、window.プロパティ、window.メソッド()または直接的な属性、方法()を使用して呼び出すことができます.例えば、window.alert()とalert()は同じ意味です.
  • システムダイアログ ブラウザは、alert()、confirm()とprompt()の方法でシステムダイアログを呼び出してユーザに情報を表示することができます.システムダイアログは、ブラウザに表示されているウェブページとは関係なく、HTMLも含まれていません.
  • //    
    alert('Lee');                                   //      
     
    //     
    confirm('       ');                      //                    
    if (confirm('       ')) {                //confirm      
           alert('     !');                   //     true
    } else {
           alert('     !');                   //     false
    }
     
    //     
    var num = prompt('       ', 0);           //    ,    ,   
    alert(num);                                      //       
     
    //          
    print();                                         //  
    find();                                          //  
     
    defaultStatus = '       ';                //             
    status='     ';                             //           
  • 新しいウィンドウを作成します. window.open()メソッドは特定のURLにナビゲーションできます.また、新しいブラウザウィンドウを開くこともできます.これは4つのパラメータを受け入れることができます.1.読み込むURL.2.ウィンドウの名前またはウィンドウのターゲット.3.特性文字列.4.現在ページを読み込んでいるブール値をブラウザの記録に置き換えますか?名前を付けないと新しいウィンドウを開くたびに、名前を付けた最初のウィンドウが開きます.その後、このウィンドウに読み込まれます.ウィンドウのターゲットは、ページの開き方を提供するか、このページを新規作成するかです.
  • ウィンドウの位置とサイズ windowオブジェクトの位置を特定したり変更するための属性と方法がたくさんあります.IE、Safari、Opera、Chromeは、画面の左側と上部に対するウィンドウの位置を表すために、screenLeftとscreenTop属性を提供する.FirefoxはscreenXとscreenY属性において同じウィンドウ位置情報を提供し、SafariとChromeも同時にこの2つの属性をサポートします.
  • //       ,IE  
    alert(screenLeft);                            //IE  
    alert(typeof screenLeft);                     //IE  number,      undefined
     
    //       ,Firefox  
    alert(screenX);                               //Firefox  
    alert(typeof screenX);                        //Firefox  number,      
    /*
    screenX  IE      ,  alert(screenX),screenX           ,     。         window                ,      :alert(window.screenX)。
    */
    //       
    var leftX = (typeof screenLeft == 'number') ?screenLeft : screenX;
    var topY = (typeof screenTop == 'number') ?screenTop : screenY;
    /*
          ,Firefox、Safari、Opera Chrome      4   :innerWidth innerHeight,            ;outerWidth outerHeight,               。
    */
    alert(innerWidth);                                             //    
    alert(innerHeight);                                            //    
    alert(outerWidth);                                             //    +  
    alert(outerHeight);                                            //    +  
    /*
    1).  Chrome ,innerWidth=outerWidth、innerHeight=outerHeight;
    2). IE                ;  ,    DOM           。
    3).  IE  Firefox、Safari、Opera Chrome ,document.documentElement.clientWidth document.documentElement.clientHeight           。
    4).  IE6 ,               ;       ,     document.body.clientWidth document.body.clientHeight       。
    */
    //   Firefox   ,    innerWidth innerHeight
    var width = window.innerWidth;                        //    window,  IE   
    var height = window.innerHeight;
     
    if (typeof width != 'number') {                       //   IE,   document           
           if(document.compatMode == 'CSS1Compat') {
                  width =document.documentElement.clientWidth;
                  height =document.documentElement.clientHeight;
           }else {
                  width = document.body.clientWidth;      //       body
                  height = document.body.clientHeight;
           }
    }
    /*
                                    。document.compatMode              ,    CSS1Compat     。
    */
    //       
    moveTo(0,0);                                        //IE  ,   0,0  
    moveBy(10,10);                                      //IE  ,        10  
     
    //       
    resizeTo(200,200);                                  //IE  ,    
    resizeBy(200,200);                                  //IE  ,      
     
    //              ,    。
  • 間欠コールとタイムアウトコール JavaScriptは単一スレッド言語であるが、コードは、時間超過値と間欠時間値を設定することによって特定の時刻に実行されるようにスケジューリングされる.前者は指定された時間後にコードを実行しますが、後者は指定された時間ごとにコードを実行します.タイムアウトコールは、windowオブジェクトのsetTimeout()方法を使用する必要があります.二つのパラメータを受け取ります.実行するコードとミリ秒数のタイムアウト時間です.
  • がsetTimeout()を呼び出した後、この方法はタイムアウトコールを表す数値IDを返します.このタイムアウトコールのIDは実行予定コードの一意識別子であり、タイムアウトコールをキャンセルすることができる.まだ実行されていないタイムアウトコールプランをキャンセルするには、clearTimeout()メソッドを呼び出し、それに対応するタイムアウトコールIDをパラメータとして渡すことができます.
  • var box = setTimeout(function () {                     //      ID   box
           alert('ok');
    }, 1000);
     
    clearTimeout(box);                                     // ID  ,      
  • は、間欠呼び出しがキャンセルされるか、またはページがアンインストールされるまで、指定された時間間隔でコードを繰り返し実行します.間欠コールを設定する方法は、setInterval()であり、そのパラメータはsetTimeout()と同じである.実行するコードと実行する前に待機するミリ秒数.
  • 間欠呼び出しをキャンセルする方法とタイムアウトコールをキャンセルするのは同様で、clear Interval()方法を使用する.ただし、間欠コールをキャンセルすることの重要性はキャンセルタイムアウトコールよりはるかに高くなります.干渉しない場合、間欠コールはページオフまで実行されます.
  • setInterval(function () {                              //      
           alert('ok');
    }, 1000);
    var box = setInterval(function () {                    //       ID
           alert('ok');
    }, 1000);
     
    clearInterval(box);                                    //      
     
    //            ,         5     ,      :
    var num = 0;                                           //     
    var max = 5;                                           //     
     
    setInterval(function () {                              //    
           num++;                                          //  num
           if(num == max) {                                //    5 
                  clearInterval(this);                 //      ,this      
                  alert('5    !');                  
           }     
    }, 1000);                                                //1 
  • /*
        ,                    。      ,           ,           ID,             ,           ,        。
    */
    var num = 0;
    var max = 5;
    function box() {
           num++;
           if(num == max) {
                  alert('5    !');
           }else {
                  setTimeout(box, 1000);
           }
    }
    setTimeout(box, 1000);                                     //     
    /*
            ,         ID,          ,             ,        。
    */
  •          Location はBOMオブジェクトの一つで、現在のウィンドウに読み込まれているドキュメントに関する情報を提供し、ナビゲーション機能も提供します.実は、locationオブジェクトはwindowオブジェクトの属性であり、documentオブジェクトの属性でもあります.だからwindow.locationとdocument.locationは等価です.

  • Locationオブジェクトの属性
    sh
    この部分があると、アンカー部分を表します.
    ホスト
    ホスト名:ポート番号
    hostname
    ホスト名
    href
    URL全体
    pathname
    パス名
    ポーター
    ポート番号
    protocol
    協議の部分
    search
    クエリー文字列
    Locationオブジェクトの属性
    assign()
    指定ページにジャンプすると、hrefと同等です.
    reload()
    現在のURLをリロードします
    レパルス()
    現在のページを新しいURLで置換します.
  • location.hash = '#1';                                //  #     ,   
    alert(location.hash);                                //  #     
     
    location.port = 8888;                                //     ,   
    alert(location.port);                                //       ,
     
    location.hostname = 'Lee';                            //     ,   
    alert(location.hostname);                             //       ,
     
    location.pathname = 'Lee';                            //      ,   
    alert(location.pathname);                             //      ,
     
    location.protocal = 'ftp:';                           //    ,    
    alert(location.protocol);                             //      
     
    location.search = '?id=5';                            //  ?     ,   
    alert(location.search);                               //  ?     
     
    location.href = 'http://www.baidu.com';               //     URL,   
    alert(location.href);                                 //     URL
    /*
     Web   ,          ?id=5&search=ok     URL    ,    location,         ,     。
    */
    function getArgs() {
    
           varargs = [];                       //            
    //  ?                      
           varqs = location.search.length > 0 ? location.search.substring(1) : '';
    
           varitems = qs.split('&');                // &       
           varitem = null, name = null, value = null;
    
           for(var i = 0; i < items.length; i++) {   
                  item = items[i].split('=');
                  name = item[0];
                  value = item[1];                 //           
                  args[name] = value;
           }
           returnargs;
    }
     
    var args = getArgs();
    alert(args['id']);
    alert(args['search']);
     
    location.assign('http://www.baidu.com');        //      URL
     
    location.reload();                              //        ,        
    location.reload(true);                          //    ,          
     
    location.replace('http://www.baidu.com');       //              
  • historyオブジェクト historyオブジェクトはwindowオブジェクトの属性で、ユーザーがインターネットを利用した記録を保存しています.窓が開けられた時点から計算します.
  • function back() {                                       //      URL
           history.back(); 
    }
     
    function forward() {                                    //      URL
           history.forward();
    }
     
    function go(num) {                                      //         URL
           history.go(num);
    }
     
    //      history.length== 0,         。