【JavaScript】ウィンドウの開閉・サイズ・スクロールについて

はじめに

JavaScriptには、ブラウザのウィンドウを操作するための関数が用意されています。今回はウィンドウの開閉・サイズ・スクロールについて、HTMLとJavaScriptで記載していきます。

　

ウィンドウを開く

window.open(url, name, options))を使用することで、新しいウィンドウを開くことができます。

　

html

<button id="openWindow">新しいウィンドウを開く</button>

　

JavaScript

document.getElementById("openWindow").addEventListener("click", () => {
  newWindow = window.open("https://selifemorizo.com/", null, "width=400,height=300");
});

　

optionsについて

optionsのパラメータは、新しく開くウィンドウ（またはタブ）の表示方法を制御する機能を指定します。

options	詳細
width	ウィンドウの幅
height	ウィンドウの高さ
left	画面左からの距離
top	画面上からの距離
scrollbars	スクロールバーの表示（yes/no）
menubar	メニューバーの表示（yes/no）
toolbar	ツールバーの表示（yes/no）
location	アドレスバーの表示（yes/no）

　

ウィンドウ閉じる

window.close()で開いたウィンドウを閉時ることができます。

　

html

<button id="closeWindow">ウィンドウを閉じる</button>

　

JavaScript

document.getElementById("closeWindow").addEventListener("click", () => {
  if (newWindow && !newWindow.closed) {
    newWindow.close();
  }
});

　

ウィンドウのサイズ変更

window.resizeTo()を使用することで、ウィンドウのサイズ変更を行うことができます。

　

html

<button id="resizeWindow">サイズ変更</button>

　

JavaScript

document.getElementById("resizeWindow").addEventListener("click", () => {
  newWindow.resizeTo(800, 600); // 幅800px × 高さ600pxに変更
});

　

スクロール操作

scrollTo(x, y)を使用することで引数で指定した位置へスクロールすることができます。

　

html

<button id="scrollDown">下にスクロール</button>

　

JavaScript

document.getElementById("scrollDown").addEventListener("click", () => {
  window.scrollBy(0, 200); // 現在位置から縦に200pxスクロール
});

　

スクロール位置の確認

window.scrollXとwindow.scrollYは現在のスクロール位置を取得できます。

JavaScript

console.log(window.scrollX, window.scrollY)

　

最後に

JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript

以上、ログになります。
これからも継続していきましょう！！