JavaScriptブラウザオブジェクト操作

4917 ワード

以下の内容は:http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499832124d97d77b00706461f9daf1a390b75ade1000。部分をノートにとる
JavaScriptは、ブラウザから提供される多くのオブジェクトを取得し、操作することができます。
1.
windowwindowオブジェクトは、グローバルスコープとしてだけでなく、ブラウザウィンドウを表している。windowオブジェクトは、innerWidthおよびinnerHeight属性を有し、ブラウザウィンドウの内部幅と高さを取得することができる。内部の幅の高さとは、メニューバー、ツールバー、枠などのビット要素を除いて、ウェブページの幅の高さを表示することです。
互換性:IE<=8はサポートしていません。
対応して、もう一つのouterWidthouterHeightの属性があり、ブラウザウィンドウの全体的な幅の高さを取得することができます。
//ブラウザのウインドウサイズを調整してみてもいいです。alert(`window.inner Width)`;alert(`window size=($window.outerWidth)`);
2.
navigatornavigatorオブジェクトはブラウザの情報を表し、最も一般的な属性は以下を含む。
  • ナビゲート.appName:ブラウザ名;
  • ナビゲート.アプリVersion:ブラウザバージョン;
  • navigator.langage:ブラウザで設定された言語;
  • navigator.plotform:オペレーティングシステムタイプ;
  • ナビゲート.userAgent:ブラウザ設定のUser-Agent文字列。navigatorの情報は、ユーザによって容易に変更されることができるので、JavaScriptが読み取った値は必ずしも正しいとは限らないことに注意してください。多くの初心者は異なるブラウザに対して異なるコードを書くために、ifでブラウザバージョンを判断することが好きです。正しい方法は、JavaScriptを利用して、属性が存在しない場合にはundefinedの特性を返し、直接短絡演算子||で計算することである。
    var width;
    if (getIEVersion(navigator.userAgent) < 9) {
        width = document.body.clientWidth;
    } else {
        width = window.innerWidth;
    }
    
  • 3.
    screenscreenオブジェクトは画面の情報を表し、一般的な属性は以下の通りである。
  • screen.width:画面幅はピクセル単位である。
  • screen.height:画面の高さはピクセル単位;
  • screen.co lorDepth:8、16、24のような色のビット数を返します。
  • 4.locationオブジェクトは、現在のページのURL情報を表している。例えば、完全なURL:
    var width = window.innerWidth || document.body.clientWidth;
    location.hrefで取得できます。URLの各部分の値を取得するには、このように書くことができます。
    http://www.example.com:8080/path/index.html?a=1&b=2#TOP
    
    新しいページをロードするには、location.assign()を呼び出すことができます。現在のページを再読み込みするには、location.reload()メソッドを呼び出すことが非常に便利です。
    5.
    documentdocumentオブジェクトは現在のページを表しています。HTMLは、ブラウザでDOM形式でツリー構造として表示されるため、documentオブジェクトは、DOMツリー全体のルートノードである。documenttitle属性はHTMLドキュメントのxxxから読み取られたが、動的に変更することができる。
    使う?遣うdocumentオブジェクトが提供するgetElementById()getElementsByTagName()IDでDOMノードを取得し、Tag名でDOMノードのセットを取得することができます。
    6.documentオブジェクトにはもう一つのcookie属性があり、現在のページのCookieを取得することができる。
    Cookieは、サーバから送信されるkey-valueの識別子です。HTTPプロトコルは無状態ですが、サーバーはどのユーザからの要求なのかを区別するために、Cookieで区別することができます。ユーザーがログインに成功すると、サーバは、例えばuser=ABC123XYZ( )...をブラウザにCookieを送信し、その後、ブラウザがこのウェブサイトにアクセスすると、要求ヘッダにこのCookieを添付し、サーバはCookieによってユーザを区別することができる。
    Cookieはまた、ウェブサイトのいくつかの設定、例えば、ページ表示の言語などを記憶することができる。
    JavaScriptは、document.cookieを介して現在のページのCookieを読み取ることができる。
    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'
    
    JavaScriptはページのCookieを読み取ることができるため、ユーザーの登録情報は通常Cookieにも存在しています。これはHTMLページに第三者のJavaScriptコードを導入することが許可されているからです。
    導入された第三者のJavaScriptに悪意のあるコードがある場合、www.foo.comウェブサイトはwww.example.comウェブサイトのユーザ登録情報を直接取得する。
    この問題を解決するために、サーバはCookieを設定する際にhttpOnlyを使用することができ、httpOnlyを設定したCookieはJavaScriptによって読み取れなくなります。この挙動はブラウザによって実現され、主要ブラウザはいずれもhttpOnlyオプションをサポートし、IE 6 SP 1からサポートされる。
    セキュリティを確保するために、サーバ端はCookieを設置する際に、常にhttpOnlyを使用するべきである。