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

初心者向けにJavaScriptでウィンドウサイズを固定する方法について現役エンジニアが解説しています。ウィンドウサイズとは、ブラウザの画面の幅と高さです。WebページなどのJavaScriptから受動的に起動されたカスタムのウィンドウは固定することができます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

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

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでウィンドウサイズを固定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

ウィンドウサイズとは

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

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

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

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

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

したがって、近年のブラウザでは、ユーザーが、自発的に起動した初回のブラウザの画面については、ウィンドウサイズの固定はできなくなっています。その代わりに、ブラウザが読み込んだ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では、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

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