jsでよく目にするwindowオブジェクトとは??
windowオブジェクト、
最近まで window.onloadしか使ったことなかったのですが
思ったより面白かったのでまとめました！
windowとは
windowオブジェクトは画面上に表示されている全てのオブジェクトの親となるオブジェクトです。
下位のオブジェクトとして
|
1 2 3 4 |
・location ・history ・document ・Frame |
オブジェクトがあります。
window.historyオブジェクト
ブラウザの履歴を操作したり画面に出ているページを移動したりするためのオブジェクトです。
・historyオブジェクトのプロパティー
|
1 2 |
length // ブラウザが持っているURIの履歴の数を参照 |
[f:id:okinawanpizza:20200809163352p:plain]
このブラウザでは「urlを検索」し「出てきたリンクを開いた」ので二つのURIを保持しています。
なので window.length を実行すると2が帰ってきます。
・historyオブジェクトのメゾット達
|
1 2 3 4 5 6 |
back // 前のページに戻る forward // 次のページに進む go //指定した数のページに移動する |
lengthオブジェクト、、聞いたことなかったけど
意外と見覚えのある挙動でした。
windowオブジェクトのプロパティー・メソッド
一部を紹介していきます。
|
1 2 3 4 |
open //新規ウィンドウを開く white //ウィンドウに何かを挿入する |
See the Pen
window!!! by たまき こう (@ulqvhvox)
on CodePen.
ちなみに
|
1 |
window.open("https://www.mercari.com/jp/mypage/sales/") |
こちらを実行するとopenの中に書いてあるリンクを開いてくれます。
会社のコーポレートサイトで、以前aタグのhrefの内容を書き換えても
指定したリンクに飛ばない問題がありましたが
調べてみるとjsでopen()を使って上書きされていました。。
windowオブジェクトのメソッドを使うときは 'window.'を省略できる！
そう、実は
|
1 2 3 |
alert setTimeout scrollTo |
などのメソッドはそれぞれwindow.alert widnow.setTimeout window.scrollToでも実行できます。
windowオブジェクトのメソッドはwindowオブジェクトを省略して実行することが可能です。
こういう風にwindowオブジェクトを使うと
新しいウィンドウを表示したり、ページ遷移させたりすることができるのでした。