JavaScriptでウィンドウサイズを固定する方法を現役エンジニアが解説【初心者向け】

JavaScriptでウィンドウサイズを固定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• ウィンドウサイズとは
• ウィンドウサイズを固定する方法
• 実際に書いてみよう
• まとめ

 

ウィンドウサイズとは

ブラウザに表示されてあるWebページの幅や高さではありません。ウィンドウサイズは、ブラウザの画面の幅と高さです。これらは、window.innerWidthプロパティと、window.innerHeightプロパティに格納されています。

ブラウザに表示されてあるWebサイトの幅と高さは、document.documentElement.clientWidthプロパティと、document.documentElement.clientHeightプロパティに格納されてあります。

[PR] フロントエンドで副業する学習方法を動画で公開中

ウィンドウサイズを固定する方法

かつては、特には制約はありませんでした。ゆえに、ブラウザのウィンドウサイズを固定することが可能でしたが、セキュリティホール（脆弱性）を攻撃されて、悪戯や不正行為に利用されやすくなっていました。

したがって、近年のブラウザでは、ユーザーが、自発的に起動した初回のブラウザの画面については、ウィンドウサイズの固定はできなくなっています。その代わりに、ブラウザが読み込んだWebページなどのJavaScriptから受動的に起動されたカスタムのウィンドウは、クライアントサイドからの制御が可能になっています。

なお、新しいウィンドウをミリセカンドまで、制御することも可能です。

実際に書いてみよう

以下に、サンプルコードも掲載しています。新規に起動されたウィンドウが、画面の幅や高さに変動が加わった際に、幅300px、高さ300pxに戻す処理にかけられます。

JavaScript

window.open("javascript:window.addEventListener('resize', function (e) {window.resizeTo(300, 300); }, false);", "Good Luck.", "top=368, left=624, width=300, height=300");

 

動作結果

※CodePenに掲載している該当のコードは、コメントアウトにしています。
※ポップアップブロックが表示されたら、許可を選択する必要があります。
※セキュリティ対策や技術の都合にて、廃止される可能性があります。

確認方法

1. Firefoxにて、CodePenを開きます

2. CodePenのコード作成の「JS」のタブに先程のJavaScriptコードを貼り付けます。

3. 新しいタブが開かれたら、試してみましょう。

まとめ

「javascript:」は、セキュリティ対策や技術の都合に巻き込まれやすくなります。

また、ユーザーの画面全体を制御の対象とする処理は、広域かつ多大なる影響を及ぼす可能性が高いです。

筆者プロフィール

井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。