【31】ブラウザオブジェクト

5199 ワード
JavaScriptは、ブラウザから提供される多くのオブジェクトを取得し、操作することができます.
window
windowオブジェクトはグローバルスコープとしてだけでなく、ブラウザウィンドウを表します.windowオブジェクトはinner Widthとinner Heightのプロパティがあり、ブラウザウィンドウの内部幅と高さを取得することができます.内部の幅の高さとは、メニューバー、ツールバー、枠などのビット要素を超えた後、ページの幅の高さを表示することです.互換性:IE<=8はサポートしていません.
'use strict' ;
//              ：
alert('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight);
これに対応して、もう一つのouterWidthとouterHeight属性があり、ブラウザウィンドウ全体の幅の高さを取得することができます.
navigator
navigatorオブジェクトはブラウザの情報を表しています.最も一般的な属性は以下の通りです.
  • ナビゲート.appName:ブラウザ名;
  • ナビゲート.appVersion:ブラウザバージョン;
  • navigator.langage:ブラウザで設定された言語;
  • ナビゲート.plotform:オペレーティングシステムタイプ.
  • ナビゲート.userAgent:ブラウザで設定されたUser-Agent文字列.
    • 'use strict';
alert('appName = ' + navigator.appName + '
    ' +
        'appVersion = ' navigator.appVersion + '
    ' +
        'language = ' + navigator.language + '
    ' +
        'platform = ' + navigator.platform + '
    ' +
        'userAgent = ' + navigator.userAgent);
    navigatorの情報はユーザーによって容易に変更されますので、JavaScriptの読み取り値は必ずしも正しいとは限りません.多くの初心者は異なるブラウザに対して異なるコードを書くために、ifでブラウザバージョンを判断することが好きです.
    var width;
if (getIEVersion(navigator.userAgent) < 9) {
    width = document.body.clientWidth;
} else {
    width = window.innerWidth;
}
    しかし、これは正確ではないと判断するかもしれないし、コードの維持も難しいです.正しい方法は、JavaScriptを利用して属性が存在しない場合にundefinedに戻る特性であり、直接に短絡演算子124で計算することである.
    var width = window.innerWidth || document.body.clientWidth;
    screen
    screenオブジェクトは画面の情報を表し、一般的な属性は以下の通りである.
  • screen.width:画面幅はピクセル単位である.
  • screen.height:画面の高さはピクセル単位である;
  • scrren.co lorDepth:8、16、24のような色のビット数を返します.
    • 'use strict';
alert('Screen size = ' + screen.width + ' x ' + screen.height);
    location
    locationオブジェクトは、現在のページのURL情報を表します.例えば、完全なURL:
    http://www.example.com:8080/path/index.html?a=1&b=2#TOP
    location.hrefで取得できます.URLの各部分の値を取得するには、このように書くことができます.
    location.protocol:  // 'http'
location.host;  // 'www.example.com'
location.port;  // '8080'
location.pathname;  // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
    新しいページを読み込むには、location.assign()を呼び出すことができます.現在のページを再読み込みするには、locations.reload()を呼び出す方法が非常に便利です.
    'use strict';
if (confirm('       ' + location.href + '?')) {
    location.reload();
} else {
    location.assign('/discuss');  //       URL  
}
    document
    documentオブジェクトは現在のページを表します.HTMLはブラウザでDOM形式でツリー構造として表示されているため、DOMツリー全体のルートノードが対象となります.documentのtitle属性はHTMLドキュメントのxxxから読み取りましたが、動的に変更できます.
    'use strict';
document.title = '    JavaScript!';
//      title   “    JavaScript！”
    ブラウザのウィンドウタイトルの変化を見てください.DOMツリーのあるノードを検索するには、documentオブジェクトから検索を開始する必要があります.最も一般的な検索はIDとTagNameによるものです.まずHTMLデータを用意します.
    documentオブジェクトで提供されるgetElementById()とgetElementsByTagName()は、IDでDOMノードを取得し、Tag名でDOMノードのセットを得ることができる.
    'use strict';
var menu = document.getElementById('drink-menu');
var drinks = document.getElementsByTagName('dt');
var i, s, menu, drinks;

menu = document.getElementById('drink-menu');
menu.tagName;  // 'DL'

drinks = document.getElementsByTagName('dt');
s = '      :'；
for (i=0; i
    documentオブジェクトには、現在のページのCookieを取得するクッキー属性があります.Cookieは、サーバから送信されるkey-valueの識別子です.HTTPプロトコルは無状態ですが、サーバーはどのユーザからの要求なのかを区別するために、Cookieで区別することができます.ユーザーがログインに成功すると、サーバからブラウザにCookieを送信します.例えば、user=ABC 123 XYZ(暗号化された文字列)...その後、ブラウザがこのウェブサイトにアクセスすると、要求ヘッダにこのCookieを添付します.サーバはCookieによってユーザーを分離できます.Cookieはまた、ウェブサイトのいくつかの設定、例えば、ページ表示の言語などを記憶することができる.JavaScriptは、現在のページのCookieにdocument.co okieを介して読み取り可能である.
    document.cookie;  // 'v=123; remember=true; prefer=zh'
    JavaScriptはページのCookieを読み取ることができるため、ユーザーの登録情報は通常Cookieにも存在しています.これはHTMLページに第三者のJavaScriptコードを導入することが許可されているからです.
    

    
        
    
  ...
    された のJavaScriptに のあるコードがあれば、wwww.foo.comサイトから にwww.example.comサイトのユーザ を します.この を するために、サーバはCookieを する にhttpOnlyを ってもいいです.httpOnlyを したCookieはJavaScriptに み られません.この はブラウザによって され、 ブラウザはhttpOnlyオプションをサポートし、IE 6 SP 1からサポートを する. を するために、サーバー はCookieを する に、httpOnlyをずっと するべきです.
    history
    historyオブジェクトはブラウザの を しています.JavaScriptはhistoryオブジェクトのback()またはforward()を び すことができます.ユーザがブラウザの「 」または「 」ボタンをクリックしたのに します.このオブジェクトは なレガシーですが、 のWebページでは、AJAXとページの が く、 にhistory.backを び すと、ユーザーは に りを じるかもしれません. がWebページの を した は、ログインページが した に、history.back()を び して、ログイン のページに そうとします.これは った です.どんな でも、historyという を うべきではないです.
    Vue教程08:Computed計算属性、Watch監聴属性