LoginSignup
10
1
N/S高等学校Advent Calendar 2023Day 18
@AXT_AyaKoto(こと 綾坂)

What does "window" have? - windowの中身を覗いてみる -

Posted at

この記事は、『Qiita "N/S高等学校" Advent Calendar 2023』18日目の記事です。

S高1期生、通学コース週5生の綾坂ことです。
今年もN/S高アドカレがあるとのことで、せっかくなので書こうかと。

私には、常日頃「JavaScriptであそぼ」をやっていて思うことがあります。
それは、知らない機能が多すぎるということ。

MDN Web Docsを眺めてると、「なにそのAPI、知らなかった」となることがよくあります。
知らなかったから使えなかったは勿体ない、やはり存在だけでも知っておくべきかなと。

JavaScriptでそういう機能が全部一覧になってそうなところといえば、やはりwindow。
そんなわけで、windowの中身を片っ端から調べていきます。

12月18日 追記
思った100倍地獄でしたたたたたｔ

ログの生成

windowじゃなくてglobalThisでやりましたが、window === globalThisはtrueだったのでたぶん問題ないと思います。

Object.keys(globalThis).sort()だとなんか足りてない気がしたので、ChromeのコンソールでglobalThisって打ったときに出てくる詳細ログを頑張って整形してきました。
かなりの量(1000行以上)あるのでScrapBoxに投げました、見たければ見てください

解説

  • ログの上の方から順番に書いていきます
    • ただし、関連性のあるプロパティ同士をまとめて書くために順番を変えることはあります
  • ログには組み込みのクラスとかも出ていますが省略します
    • まじでキリが無くなるので
    • 余裕あったら追記します
  • 一部分からなかったやつもあります、許してください……

数字・記号

  • window[0]
  • window.JSCompiler_renameProperty()
    • なんか上にでてきたので一応ここに書いておきます
    • これはなんですか？

a

b

  • window.blur()
    • ウィンドウからフォーカスを外す
  • window.btoa()
    • 「文字列 → Bse64文字列」の変換を行うメソッド

c

d

e

  • window.encodeURI()
    • URIエンコード
    • URLとして安全な文字列になるようにエンコードしてくれる
  • window.encodeURIComponent()
    • URIエンコード
    • &もエンコードするため、ユーザー入力値のPOST時のエンコードなどで使える
  • window.escape()
    • 非推奨。エスケープシーケンスで置き換え
  • window.eval()
    • セキュリティ的に使うな。文字列なJavaScriptコードを評価
  • window.event()
    • 現在サイトのコードが処理しているEventを返す
    • あんま使わないほうが良さそう
  • window.external
    • 非推奨。中身はすべてダミー関数

f

  • window.fetch()
    • Fetch APIによるネットワークリソースの取得
  • window.find()
    • 非標準。Window内の文字列を検索するらしい
  • window.focus()
    • このウィンドウを最前面に持ってくるように要求する
  • window.frameElement
    • iframeなどの場合、このWindowが埋め込まれているElementを返す
    • トップレベルのWindowの場合はnullになる
  • window.frames
    • Windowのサブフレームを配列風オブジェクトとして返す
    • window === window.framesは真(？！？！)
      • 実はwindowは配列風オブジェクトだった

g

h

  • window.history
    • History API、セッションのページ遷移履歴を持つHistoryを返す

i

  • window.indexedDB
    • IndexedDB API、indexedDBへの非同期アクセス
  • window.innerHeight
    • ウィンドウの内部の高さをピクセル単位で返す。水平方向のスクロールバーの高さを含む
  • window.innerWidth
    • ウィンドウの内部の幅をピクセル単位で返す。垂直方向のスクロールバーの幅を含む
  • window.isFinite()
    • 引数が有限数か判定する
    • 暗黙の型変換あり(※Number.isFinite()は型変換なし)
  • window.isNaN()
    • 引数がNaNか判定する
    • 暗黙の型変換あり(※Number.isNaN()は型変換なし)
  • window.isSecureContext
    • このWindowが安全なコンテキスト上にあるかをBooleanで返す

l

  • window.launchQueue
    • Launch Handler API、PWAとしての起動方法を指定する
  • window.length
    • Windowに含まれるサブフレーム(iframeなど)の個数を返す
    • window.framesも参照
  • window.localStorage
    • Web Storage API、Cookieより直感的なサイト単位のデータ保存先を提供する
  • window.location
    • 文書の現在位置(≒今開いているページ)についてのLocationを返す
  • window.locationbar
    • ロケーションバーが表示されているかに関するBarPropを返す
    • BarProp.visibleがBooleanを返す。ポップアップならfalseになる模様
    • どうやら歴史的経緯で残ってる系のものらしい……？

m

n

  • window.name
    • ウィンドウ名を取得・設定
    • 何に使うんこれ
  • window.NaN
    • 非数(Not-A-Number)を表すNumber型の値
    • モダンブラウザであれば設定&書込不可になっているはず
  • window.navigation
    • 戻る・進むなどのナビゲーション操作を制御するNavigation APIへのアクセス
  • window.navigator
    • ユーザーエージェントの状態などを表すNavigator

o

  • window.offscreenBuffering
    • オフスクリーンバッファリング機能を有効にするか(Boolean)
  • window.on-
    • イベントハンドラープロパティが大量にある
  • window.open()
    • 新しいウィンドウで指定したページ等を開く
  • window.openDatabase()
    • Web SQL Databaseへのアクセス
    • IndexedDBを使え、だそうです
  • window.opener
    • 何がこのウィンドウを開いたか(window.open()を実行したのはどのウィンドウか)

    • 言い換えれば、ウィンドウ A がウィンドウ B を開いた場合、 B.opener は A を返します。

  • window.origin
    • グローバルスコープのオリジンを文字列で返す
  • window.originAgentCluster
    • オリジンキーのエージェントクラスターに属すかどうか
    • なにこれ
  • window.outerHeight
    • ウィンドウ全体の高さ
    • ページ表示部分の高さを出したい場合はinnerHeight
  • window.outerWidth
    • ウィンドウ全体の幅
    • ページ表示部分の高さを出したい場合はinnerWidth

p

  • window.pageXOffset
  • window.pageYOffset
  • window.parent
    • 親ウィンドウへの参照
  • window.performance
    • パフォーマンス関連情報へのアクセス
  • window.parseFloat()
    • 文字列の先頭から数値リテラルと解釈できる最大の場所までを取り出して数値に変換
    • 厳密に数値リテラル→数値をやるならNumber.parseFloat
  • window.parseInt()
    • 文字列の先頭から数値リテラルと解釈できる最大の場所までを取り出し整数に変換
    • 必要に応じて何進数で見るかも指定できる
      • 動作複雑なのでリファレンスを見た方がいい
    • 厳密に数値リテラル→数値をやるならNumber.parseInt
  • window.personalbar
    • BarPropを返す
  • window.postMessage()
    • 安全なオリジン間通信を行うためのメソッド
  • window.print()
    • 現在の文書を印刷するための印刷ダイアログを開く
  • window.privateAttribution
    • 本当にこれは何
    • Chromeにしか実装されてなさそう
  • window.prompt()
    • テキスト入力欄付きダイアログを出して待機

q

  • window.queryLocalFonts()
    • ローカルで使用可能なフォントの一覧を返す(Promise)
  • window.queueMicrotask()
    • マイクロタスクキューに関数を入れる

    • 現在のタスクが完了し実行コンテキストの制御がブラウザーのイベントループへ戻る前、他に保留中のコードがなくなった時点で走る

r

s

t

  • window.toolbar
    • BarPropを返す
  • window.top
    • ウィンドウ階層の最上位ウィンドウを返す
  • window.trustedTypes
    • Trusted Types API、信頼できる型の作成方法を生成するTrustedTypePolicyFactoryへのアクセス

u

  • window.undefined
    • プリミティブ値undefinedを返す
    • モダンブラウザであれば設定&書込不可になっているはず
  • window.unescape
    • 非推奨。escape()でエンコードした文字列をデコード

v

w

  • window.webkit-
    • ベンダー接頭辞
    • 試験的または非標準なAPIに対して接頭辞を追加することがある、Chromeの場合はwebkit
  • window.window
    • 自分自身を返す

あとがき

結構知らないものも多かったなと思いました。
(window.print()とか地味に使ったことなかった。たしかに言われてみればありそうだけど)
やはり通読が最強

10
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
1