windowオブジェクト触ってみる

windowオブジェクト、
最近まで window.onloadしか使ったことなかったのですが
思ったより面白かったのでまとめました！

windowオブジェクトは画面上に表示されている全てのオブジェクトの親となるオブジェクトです。
下位のオブジェクトとして

・location
・history
・document
・Frame

オブジェクトがあります。

ブラウザの履歴を操作したり画面に出ているページを移動したりするためのオブジェクトです。

・historyオブジェクトのプロパティー

length    
//  ブラウザが持っているURIの履歴の数を参照

f:id:okinawanpizza:20200809163352p:plain
このブラウザでは「urlを検索」し「出てきたリンクを開いた」ので二つのURIを保持しています。
なので window.length を実行すると2が帰ってきます。

・historyオブジェクトのメゾット達

back
// 前のページに戻る
forward
// 次のページに進む
go 
//指定した数のページに移動する

lengthオブジェクト、、聞いたことなかったけど
意外と見覚えのある挙動でした。

一部を紹介していきます。

open
//新規ウィンドウを開く
white
//ウィンドウに何かを挿入する

See the Pen window!!! by たまきこう (@ulqvhvox) on CodePen.

ちなみに

window.open("https://www.mercari.com/jp/mypage/sales/")

こちらを実行するとopenの中に書いてあるリンクを開いてくれます。

会社のコーポレートサイトで、以前aタグのhrefの内容を書き換えても
指定したリンクに飛ばない問題がありましたが
調べてみるとjsでopen()を使って上書きされていました。。

そう、実は

alert 
setTimeout
scrollTo

などのメソッドはそれぞれwindow.alert widnow.setTimeout window.scrollToでも実行できます。
windowオブジェクトのメソッドはwindowオブジェクトを省略して実行することが可能です。

こういう風にwindowオブジェクトを使うと
新しいウィンドウを表示したり、ページ遷移させたりすることができるのでした。

tamakipedia