「javascript高級プログラム設計2」学習ノート8 BOM

もっと読む
8.1 windowオブジェクト
 BOMオブジェクトの核心はwindowで、ブラウザの一例を表しています.
ブラウザーの中で、windowはjavascriptがブラウザーの1つのインターフェイスを訪問するので、またECMAScriptの規定のglobalの対象です.
 
8.1.1グローバルスコープ
 
8.1.2ウィンドウ関係とフレームワーク
 ページに枠が含まれている場合、各フレームには自分のwindowオブジェクトがあり、frame集合に保存されます.
window.frames[0]またはwindow.frames[frames Name]で参照できます.でもトップを使ったほうがいいです.
 
8.1.3ウィンドウの位置
moveTo()  新しい位置のxとy座標値を受信します.
新しい位置の水平方向および垂直方向に移動する画素値をmoveBy()が受信する.
注:ブラウザで無効になる場合があります.
フレームに合わないと、最外階のwindowオブジェクトにしか使えません.
 
8.1.4ウィンドウサイズ
 

  //           
         var pageWidth = window.innerWidth,
                pageHeight = window.innerHeight;
                
            if (typeof pageWidth != "number"){ //  pageWidth        
                if (document.compatMode == "CSS1Compat"){  //    ，  document.compatMode            
                    pageWidth = document.documentElement.clientWidth;
                    pageHeight = document.documentElement.clientHeight;
                } else {
                    pageWidth = document.body.clientWidth;
                    pageHeight = document.body.clientHeight;
                }
            }

            alert("Width: " + pageWidth);
            alert("Height: " + pageHeight);

risizett()ブラウザウィンドウの新しい幅と高さを受信する
 
新しいウィンドウと元のウィンドウの幅と高さの差を受信します.
注:ブラウザで無効になる場合があります.
フレームに合わないと、最外階のwindowオブジェクトにしか使えません.
 
8.1.5ナビゲーションとウィンドウを開く
 
window.open()close()メソッドを呼び出して、開いているウィンドウを閉じることができます.
wroxWin.close()
 
8.1.6間欠呼び出しとタイムアウト呼び出し
set Timeout()
clearTimeout()
 

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

 
 
 

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

 
 
set Interval()
clear Interval()
 
8.1.7システムダイアログ
alert()  文字列の表示を許可します.
confirm()  警告ダイアログでは、選択のキャンセル確認があります.
prompt()  ヒントボックスで、テキストの入力をユーザに促す
 
8.2 locationオブジェクト
windowオブジェクトの属性であり、documentオブジェクトの属性でもあります. window.location==document.location
 
8.2.1クエリ文字列パラメータ
location.searchは疑問符からurlの最後までの内容を返します.各クエリ文字列パラメータには個別にアクセスできません.

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

        //         ?q=javascript&num=10
        
        var args = getQueryStringArgs();
        
        alert(args["q"]);     //"javascript"
        alert(args["num"]);   //"10"

 
 
8.2.2位置操作
一般的にはlocation.href()を使用します.
しかし、locations.hrefによってブラウザで新しいレコードが作成されますので、ユーザーが「後退」ボタンをクリックすると前のページに誘導されます.このような行為を無効にするには、locations.replace方法が使えます.
location.reload()//再読み込み(キャッシュから読み込む可能性があります.)
location.reload(true)//再読み込み(サーバから再読み込み)
reload()をコードの最後の行に置いたほうがいいです.
 
8.3ナビゲートオブジェクト
クライアントを識別するための事実基準
 
8.3.1検出プラグイン
非ie用plugis配列に含まれる属性
name:プラグイン名
description:プラグインの説明
filename:プラグインのファイル名
length:プラグインで処理されるMIMEタイプの数
 

//    ， ie   
            function hasPlugin(name){   //       
                name = name.toLowerCase();  //           ，    
                for (var i=0; i < navigator.plugins.length; i++){//  plugins  
                    if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
                        //  indexOf()    name  ,      name                 
                        return true;
                    }
                }
            
                return false;
            }
            
            //   flash
            alert(hasPlugin("Flash"));
            
            //   quicktime
            alert(hasPlugin("QuickTime"));
            
            //   Java
            alert(hasPlugin("Java"));

 
 
 

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

 プラグインごとに検出関数を作成します.
 

           //         flash
            function hasFlash(){
                var result = hasPlugin("Flash");
                if (!result){
                    result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
                }
                return result;
            }
            
            //         quicktime 
            function hasQuickTime(){
                var result = hasPlugin("QuickTime");
                if (!result){
                    result = hasIEPlugin("QuickTime.QuickTime");
                }
                return result;
            }
            
            //   flash
            alert(hasFlash());
            
            //   quicktime
            alert(hasQuickTime());

 
8.3.2登録処理プログラム
FireFox 2.0はnavigatorのためにregister ContentHandlerとregister Protocol Handlerの方法を追加します.(この2つの方法はhttml 5で定義されています).特定のタイプの情報を処理することができることを、サイトに指定させることができる.
register ContentHandlerは、3つのパラメータを受け取ります.処理するMIMEタイプと、このMIMEタイプのページのURLとアプリケーションの名前を処理できます.
 
8.4 screenオブジェクト
用途はそんなに大きくないです.主にブラウザウィンドウの外部のディスプレイの情報を記憶します.ピクセル幅や高さなどです.各ブラウザのscreenオブジェクトにはそれぞれ異なる属性が含まれています.
 

//         
window.resizeTo(screen.availWidth, screen.availHeight);

 
8.5 history対象
用途はそんなに大きくないです.主にブラウザウィンドウの外部のディスプレイの情報を記憶します.ピクセル幅や高さなどです.各ブラウザのscreenオブジェクトにはそれぞれ異なる属性が含まれています.

history.go(-1) | history.back(); //    

history.go(1) | history.forward();//    

history.go(n);//  n 

history.go(‘baidu.com’);//      baidu            back() foward()  

historyにはもう一つのlength属性があり、歴史記録の数が保存されています.もしhistory.lenghtが0に等しいなら、ユーザーがウィンドウを開けた後の最初のページであるべきです.