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