tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

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

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

windowとは

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

・location
・history
・document
・Frame

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

window.historyオブジェクト

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

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

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

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

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

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

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

windowオブジェクトのプロパティー・メソッド

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

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

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

ちなみに

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

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

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

windowオブジェクトのメソッドを使うときは 'window.'を省略できる!

そう、実は

alert 
setTimeout
scrollTo

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

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