色々なWindow Object 〜モダンなJavaScript

高さと幅の取得

知っておくと便利に使えるWindow Objectのまとめです。

ブラウザウィンドウの外側の高さと幅

「window.outerHeight」 はブラウザウィンドウの外側の高さを取得します。外側とはツールバー、ウィンドウ chrome を含む、ブラウザウィンドウ全体の高さのことです。
「window.outerWidth」はブラウザウィンドウの外側の幅を取得します。
いずれも単位はpxです。

ブラウザウィンドウの外側の高さと幅

「window.innerHeight」は水平スクロールバーを含む、ブラウザウィンドウの ビューポート の高さを返します。
「window.innerWidth」は垂直スクロールバーを含む、ブラウザウィンドウの ビューポートの幅を返します。
いずれも単位はpxです。

スクロールされた量

scrollY は、垂直スクロールされているピクセル数を返します。
最近のビューポートではスクロール量がサブピクセル精度で扱われます。そのため、整数であるとは限りません。
scrollX プロパティは、水平スクロールされているピクセル数を返します。

Location Object

Window.locationとは読み取り専用のプロパティです。documentについての情報を持つ「Locationオブジェクト」を返します。
簡単に言うとURLアドレスに関する情報がまとまっています。

• Location.href：URL全体を収めた文字列です。この値を変更すると、新しいページへ移動します。
• Location.protocol：末尾の ‘:’ を含む、URL のプロトコルスキームを収めた文字列です。
• Location.host：URLのホストを収めた文字列です。
• Location.hostname：URLのドメインを収めた文字列です。
• Location.port：URL のポート番号を収めた文字列です。
• Location.pathname：URLのパス部分を、先頭の ‘/’ を含めて収めた文字列です。
• Location.search：URLのうち、’?’ とそれに続くパラメーターや “クエリー文字列” を収めた文字列です。
• Location.hash：URLのうち、’#’ とそれに続くフラグメント識別子を収めた文字列です。
• Location.username：ドメイン名の前に指定されたユーザー名を収めた文字列です。
• Location.password：ドメイン名の前に指定されたパスワードを収めた文字列です。
• Location.origin 読取専用：特定のlocation のオリジンの標準形を収めた文字列です。<
• Location.reload() は現在表示されているページのリロード（再読み込み）を行います。

/ul>

console.log(window.location);
console.log(window.location.hostname);
console.log(window.location.port);
console.log(window.location.href);
console.log(window.location.search);
window.location.href = ‘http://google.com’;
window.location.reload();

History Object

window.history オブジェクトは、ブラウザの履歴へのアクセスを提供しています。
このオブジェクトでは、前のページに戻ったり、ユーザーの履歴を行き来するのに便利なメソッドとプロパティが提供されています。
「window.history.back()」は、ブラウザの「前のページに戻る」ボタンをクリックしたときのような挙動がなされます。
「window.history.forward()」は、ブラウザの「次のページへ進む」ボタンをクリックしたときのような挙動がなされます。
「go()」メソッドは、セッション履歴において現在のページと相対的な位置にある特定のページを読み込むことができます。
「length」プロパティの値は、履歴スタック中のページの数を知ることができます。

window.history.go(-2);
val = window.history.length;

Navigator Object

Navigator Objectはユーザーエージェントの状態や身元情報を表します。

console.log(window.navigator);
console.log(window.navigator.appName);
console.log(window.navigator.appVersion);
console.log(window.navigator.userAgent);
console.log(window.navigator.platform);
console.log(window.navigator.vendor);
console.log(window.navigator.language);