JSブラウザBOMのよくある操作例の詳細

10006 ワード

本論文の実例はJSブラウザBOMのよくある動作を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
windowサイズ
ブラウザウィンドウのサイズを決定できる3つの方法があります。
Internet Explorer、Chrome、Firefox、Opera及びSafariについて:

 window.innerHeight -           
 
 window.innerWidth -           
 
Internet Explorer 8、7、6、5について:

 document.documentElement.clientHeight
 
 document.documentElement.clientWidth
 
または

 document.documentElement.clientHeight
 
 document.documentElement.clientWidth
 
実用的なJavaScript方案(すべてのブラウザをカバーする):

 <script>
 var w=window.innerWidth
 || document.documentElement.clientWidth
 || document.body.clientWidth;
 var h=window.innerHeight
 || document.documentElement.clientHeight
 || document.body.clientHeight;
 x=document.getElementById("demo");
 x.innerHTML="   window  : " + w + ",   : " + h + "。"
 </script>
 
 その他のWindow方法

 window.open() -      
 
 window.close() -       
 
 window.moveTo() -       
 
 window.resizeTo() -          
 
Window Screen
window.screenオブジェクトは、作成時にwindowというプレフィックスを使わなくてもいいです。

 screen.availWidth -        
 
 screen.availHeight -        
 
 Window Screen利用可能幅
screen.avail Width属性は、訪問者画面の幅に戻り、ピクセル計で、ウィンドウのタスクバーなどの界面特性を減算する。
Window Screen利用可能な高さ
screen.availHeight属性は、訪問者画面の高さに戻り、ピクセルで計算し、ウィンドウのタスクバーなどの界面特性を減じる。
Window Location

   location.hostname    web      
 
   location.pathname              
 
   location.port    web       (80   443)
 
   location.protocol        web   (http://   https://)
 
   location.href           URL。
 
   location.pathname      URL     。
 
   location.assign()         。
 
 
Window History

   history.back() -              
 
   history.forward() -               
 
JavaScript Navigator
window.navigatorオブジェクトには訪問者ブラウザに関する情報が含まれています。
警告
navigatorオブジェクトからの情報は、誤認性があり、ブラウザバージョンを検出するために使用されるべきではない。

  • navigatorデータはブラウザ利用者によって変更できます。

  • いくつかのブラウザはテストサイトに対してエラーを認識します。

  • ブラウザは、ブラウザよりも遅く発表された新しいオペレーティングシステムを報告できませんでした。
  • JavaScriptポップアップ
    JavaScriptでは、3つのメッセージボックスを作成することができます。警告ボックス、確認ボックス、ヒントボックス。
    警告ボックス
    警告ボックスは、ユーザーが何らかの情報を得ることができるように常に使用されます。
    警告ボックスが現れたら、ユーザーは確定ボタンをクリックして操作を続けます。
    構文
    
    window.alert("sometext");
    window.alert()方法はwindowの対象を持たないで、直接alert()の方法を使うことができます。
    確認ボックス
    確認ボックスは通常、ユーザ操作を受け付けているかどうかを確認するために使用されます。
    カードのポップアップを確認すると、ユーザは「確認」または「キャンセル」をクリックしてユーザ操作を確定することができます。
    「確認」をクリックしたら、確認ボックスがtrueに戻ります。「キャンセル」をクリックしたら、確認ボックスがfalseに戻ります。
    構文
    
    window.confirm("sometext");
    window.co nfirm()方法はwindowの対象を持たないで、直接confirm()の方法を使うことができます。
    ヒントボックス
    ヒントボックスは、ページに入る前に値を入力するようにユーザに促す場合が多いです。
    ヒントボックスが現れたら、ユーザーはある値を入力して、確認またはキャンセルボタンをクリックして操作を続けます。
    ユーザーがクリックして確認すると、入力された値に戻ります。キャンセルをクリックした場合、戻り値はnullです。
    構文
    
    window.prompt("sometext","defaultvalue");
    window.prompt()方法はwindowオブジェクトを持たずに直接prompt()方法を使うことができます。
    行をかえる
    障子は、バックスラッシュ+n()を使って改行を設定します。
    JavaScriptタイミングイベント
    JavaScriptを使用することにより、関数が呼び出された直後にコードを実行する代わりに、設定された時間間隔の後にコードを実行する能力があります。私たちは時間貸し事件と呼びます。
    JavaScritpでは、タイミングイベントを使用することが容易であり、二つの鍵となる方法は:
    
     setInterval() -                   。
     
     setTimeout() -                 
     
    Note:set Interval()とsetTimeout()はHTML DOM Windowオブジェクトの二つの方法です。
    set Interval()方法
    set Interval()間隔で指定されたミリ秒数で指定されたコードを継続的に実行します。
    構文
    
    window.setInterval("javascript function",milliseconds);
    window.set Interval()メソッドはwindowプレフィックスを使わずに直接関数set Intervalを使用することができます。
    set Interval()の最初のパラメータは関数です。2番目のパラメータ間隔のミリ秒数
    どのように実行を停止しますか
    clear Interval()方法は、set Interval()方法の実行を停止する関数コードである。
    構文
    
    window.clearInterval(intervalVariable)
    window.clear Interval()方法はwindowプレフィックスを使わずに直接関数clear Intervalを使用することができます。
    clear Interval()を使用するには、時間計測方法を作成する際にグローバル変数を使用しなければなりません。
    
    myVar=setInterval("javascript function",milliseconds);
    その後、clear Interval()方法を使用して実行を停止することができる。
    set Timeout()方法
    構文
    
     window.setTimeout("javascript   ",   );
    set Timeout()メソッドは、ある値を返します。上記のステートメントでは、値はtという変数に格納されます。このsetTimeoutをキャンセルしたい場合は、この変数を使って名来で指定できます。
    set Timeout()の最初のパラメータはJavaScript文を含む文字列である。この文は「alert('5 seconds!')」のようなものがあります。あるいは関数への呼び出し、例えばalertMsg()"。
    第二のパラメータは、現在から何ミリ秒後に第一のパラメータを実行するかを示します。
    どのように実行を停止しますか
    clearTimeout()方法は、setTimeout()方法の関数コードの実行を停止するために使用される。
    構文
    
    window.clearTimeout(timeoutVariable)
    window.clearTimeout()方法はwindowプレフィックスを使用しないことができる。
    clearTimeout()を使用するには、タイムアウトの作成方法でグローバル変数を使用しなければなりません。
    
    myVar=setTimeout("javascript function",milliseconds);
    関数がまだ実行されていない場合は、関数コードの実行を停止するためにclearTimeout()法を使用することができます。
    JavaScript Cookies
    Cookiesはウェブページのユーザ情報を格納するために使用されます。
    Cookiesとは何ですか?
    Cookiesはいくつかのデータで、あなたのパソコンのテキストファイルに保存されています。
    ウェブサーバがブラウザにウェブページを送信する場合、接続が終了した後、サービス端末はユーザの情報を記録しません。
    Cookiesの役割は「クライアントのユーザ情報をどのように記録するか」を解決することです。

  • ユーザがウェブページにアクセスすると、彼の名前はクッキーに記録され得る。

  • ユーザが次のページにアクセスすると、クッキーでユーザアクセス記録を読み取ることができます。
  • Cookiesは以下のように名前/値で保存されています。
    username=John Doe
    ブラウザがサーバからウェブページを要求すると、そのページに属するcookiesがこの要求に追加されます。サービスはこのようにしてユーザの情報を取得する。
    JavaScriptを使ってCookieを作成します。
    JavaScriptは、document.co okie属性を使用して、cookiesを作成、読み込み、削除することができます。
    JavaScriptでは、cookieを作成します。
    
    document.cookie="username=John Doe";
    cookieのために期限切れ時間(UTCまたはGMT時間)を追加することもできます。デフォルトでは、クッキーはブラウザが閉じているときに削除されます。
    
    document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
    pathパラメータを使用して、ブラウザクッキーのパスを教えることができます。デフォルトでは、クッキーは現在のページに属します。
    
    document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
    JavaScriptを使ってCookieを読みだします。
    JavaScriptでは、cookiesを読み込むために以下のコードを使用できます。
    
     var x = document.cookie;
     document.cookie               cookies,    : cookie1=value; cookie2=value; cookie3=value;
     
    JavaScriptを使ってCookieを修正します。
    JavaScriptにおいて、cookiesを修正するのはcookiesを作成するのと似ています。以下の通りです。
    
    document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
    古いクッキーが上書きされます。
    JavaScriptを使ってCookieを削除します。
    クッキーの削除はとても簡単です。expiresパラメータを以前の時間に設定してください。以下のようにThuに設定します。01 Jan 1970:00 GMT:
    
    document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    なお、削除時にクッキーの値を指定する必要はありません。
    クッキー値の関数を設定します。
    まず、訪問者の名前を保存するための関数を作成します。
    
     //cookie      cname,cookie     cvalue,     cookie       expires。
     function setCookie(cname,cvalue,exdays)
     {
     var d = new Date();
     d.setTime(d.getTime()+(exdays*24*60*60*1000));
     var expires = "expires="+d.toGMTString();
     document.cookie = cname + "=" + cvalue + "; " + expires;
     }
     
    クッキー値を取得する関数
    次に、関数ユーザを作成して、指定されたクッキーの値を返します。
    
     function getCookie(cname)
     {
     var name = cname + "=";//               cookie :cname + "="。
     var ca = document.cookie.split(';');//        document.cookie    ,               ca (ca = document.cookie.split(';'))。
     //   ca    (i=0;i<ca.length;i++),           ,        (c=ca[i].trim())。
     for(var i=0; i<ca.length; i++)
      {
      var c = ca[i].trim();
      if (c.indexOf(name)==0) return c.substring(name.length,c.length);//     cookie(c.indexOf(name) == 0),   cookie    (c.substring(name.length,c.length)。
      }
     return "";//       cookie,    ""。
     }
     
    cookie値を検出する関数
    最後に、クッキーが作成されたかどうかを検出する関数を作成できます。
    クッキーを設定すると、メッセージが表示されます。
    クッキーが設定されていない場合、訪問者の名前を尋ねるための弾戸が表示され、set Cookie関数を呼び出して訪問者の名前を365日間保存します。
    
     function checkCookie()
     {
     var username=getCookie("username");
     if (username!="")
      {
      alert("Welcome again " + username);
      }
     else
      {
      username = prompt("Please enter your name:","");
      if (username!="" && username!=null)
       {
       setCookie("username",username,365);
       }
      }
     }
     
    興味のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRun上記コードの運行効果をテストします。
    もっと多くのJavaScriptに関する内容は当駅のテーマを調べられます。「JavaScript操作DOM技巧まとめ」、「JavaScriptページ要素操作技術のまとめ」、「JavaScript事件に関する操作と技巧大全書」、「JavaScript検索アルゴリズムのテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」および「JavaScriptエラーとデバッグテクニックのまとめ
    本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。