windowインターフェースに関連するメソッドやプロパティ

今回はWindowインターフェースに関連するプロパティやメソッドについて見ていきます。

代表的なもののみのご紹介となりますが、よく使われるものはカバー出来ていると思います

prompt

「window.prompt()」ですが、「window」は省略可能です。

prompt('名前を入力してください', '太郎');

コンソールで実行すると、以下の内容が返されます。

• 名前を入力：入力した名前
• 入力せずにOKを押した場合：「”」空文字
• キャンセルを押した場合：「null」

confirm

「window.confirm()」ですが、「window」は省略可能です。

confirm('他のサイトへ移動します。');

コンソールで実行すると、以下の内容が返されます。

• OKをクリック：true
• キャンセルをクリック:false

open

「window.open()」ですが、「window」は省略可能です。

open('https://hitoridemanabou.net/');

コンソールに入力すると、指定したURLが新しいページで開きます。

URLは相対パスを入力することも出来ます。

引数を使用して、ウィンドウのサイズやツールバー、ステータスバーの有無などの設定をすることが出来ます。

詳しくは以下のMDNのサイトをご参照ください。

MDN : Window.open()

close

「window.close()」ですが、「window」は省略可能です。

open()で開いたページを閉じることが出来ます。

    <p>新しいページを開く</p>

    <input id="open" type="submit" value="OPEN" />
    <input id="close" type="submit" value="CLOSE" />

let newPage;

let openPage = document.getElementById('open');
openPage.addEventListener('click', function () {
  newPage = open('https://hitoridemanabou.net/');
});

let closePage = document.getElementById('close');
closePage.addEventListener('click', () => {
  newPage.close();
});

新しいページを開く

OPENをクリックすると新しいページが開きます。

このページのCLOSEをクリックすると、開いたページを閉じることが出来ます。

setTimeout

「window.setTimeout()」ですが、「window」は省略可能です。

timeはミリ秒です。

指定した秒数、遅れて関数が実行されます。

    <input id="timeout" type="submit" value="TimeOut" />

let timeOut = document.getElementById('timeout');
timeOut.addEventListener('click', () => {
  setTimeout(() => {
    alert('遅れて実行されました');
  }, 3000);
});

アラートが3秒遅れて実行されます。

setInterval & clearInterval

「window.setInterval()」ですが、「window」は省略可能です。

timeはミリ秒です。

指定した秒数ごとに関数を実行します。

setIntervalを止めるには、clearIntervalにidを指定します。

    <input id="start" type="submit" value="START" />
    <input id="stop" type="submit" value="STOP" />

let startBtn = document.getElementById('start');
startBtn.addEventListener('click', () => {
  time = setInterval(() => {
    alert('アラートを止めるにはSTOPをクリックしてください。');
  }, 5000);
});

let stopBtn = document.getElementById('stop');
stopBtn.addEventListener('click', () => {
  clearInterval(time);
  alert('STOPしました。');
});

「START」をクリックするとアラートが5秒おきに表示されます。

「STOP」をクリックすると、アラートの表示は終了します。

「setInterval」を使う時は、「clearInterval」を使うか、回数を指定しないと、無限ループに陥る場合がありますので注意してください。

ブラウザの高さと幅を取得

それぞれ「window」が前に付きますが、省略することが出来ます。

「inner」はスクロールバーも含んだサイズを返します。

    <input id="size" type="submit" value="ブラウザのサイズを取得" />

let sizeBrowser = document.getElementById('size');
sizeBrowser.addEventListener('click', () => {
  console.log('ブラウザの幅：' + outerWidth);
  console.log('ブラウザの高さ：' + outerHeight);
  console.log('ブラウザの内側の幅：' + innerWidth);
  console.log('ブラウザの内側の高さ：' + innerHeight);
});

ブラウザの内側のスクロールを含まないサイズを取得する場合は「clientWidth」、「clientHeight」を使用します。

    <input id="sizeclient" type="submit" value="ブラウザの内側のサイズを取得" />

let sizeScroll = document.getElementById('sizeclient');
sizeScroll.addEventListener('click', () => {
  console.log('スクロールバーを含んだ幅：' + innerWidth);
  console.log('スクロールバーを含んだ高さ：' + innerHeight);

  let sizeClient = document.documentElement;
  console.log('スクロールバーを含まない幅：' + sizeClient.clientWidth);
  console.log('スクロールバーを含まない高さ：' + sizeClient.clientHeight);
});

print

「window.print()」ですが、「window」は省略可能です。

    <input id="print" type="submit" value="印刷" />

let printPage = document.getElementById('print');
printPage.addEventListener('click', () => {
  print();
});

クリックすると、印刷画面が立ち上がります。

location

「window.location()」ですが、「window」は省略可能です。

URLの様々な情報を取得することが出来ます。

「location.assign()」メソッドと「location.replace()」メソッドを使うと指定したURLを読み込みます。

  <input id="assign" type="submit" value="Assign" />
  <input id="replace" type="submit" value="Replace" />

let assignLoc = document.getElementById('assign');
assignLoc.addEventListener('click', () => {
  location.assign('https://www.google.com/?hl=ja');
});

let replaceLoc = document.getElementById('replace');
replaceLoc.addEventListener('click', () => {
  location.replace('https://www.google.com/?hl=ja');
});

どちらをクリックしても、「Google」のトップページが表示されます。

「Assign」をクリックした場合はブラウザに戻るボタンが表示されています。

「Replace」をクリックした場合はブラウザに戻るボタンが表示されません。

reload

「window.reload()」ですが、「window」は省略可能です。

現在のページを再読み込みします。

    <input id="reload" type="submit" value="再読み込みします。" />

let reloadPage = document.getElementById('reload');
reloadPage.addEventListener('click', () => {
  location.reload();
});

クリックすると、ページを再読み込みします。

history

「window.history()」ですが、「window」は省略可能です。

    <input id="back" type="submit" value="戻ります。" />
    <input id="forward" type="submit" value="進みます。" />

let back = document.getElementById('back');
back.addEventListener('click', () => {
  history.back();
});

let forward = document.getElementById('forward');
forward.addEventListener('click', () => {
  history.forward();
});

go()を使う場合は、一つ前に戻る場合は、「go(-1)」、一つ先に進む場合は、「go(1)」と記述します。

screen

「window.screen()」ですが、「window」は省略可能です。

ディスプレイの情報を取得します。

console.log(screen);

Screen {availWidth: 301, availHeight: 501, width: 301, height: 501, colorDepth: 24, …}
availHeight: 501
availLeft: 0
availTop: 0
availWidth: 301
colorDepth: 24
height: 501
isExtended: false
onchange: null
orientation: ScreenOrientation {angle: 0, type: 'portrait-primary', onchange: null}
pixelDepth: 24
width: 301
[[Prototype]]: Screen

• availHieght：ディスプレイの利用可能な高さ
• availWidth：ディスプレイの利用可能な幅
• colorDepth：色の深層度
• pixelDepth：ピクセルのビット深度

document

「window.document()」ですが、「window」は省略可能です。

 <input id="insert" type="submit" value="ページの情報を取得します。" />

let getPage = document.getElementById('insert');
getPage.addEventListener('click', () => {
  let info =
    'characterSet : ' +
    document.characterSet +
    '<br>' +
    'contentType : ' +
    document.contentType +
    '<br>' +
    'domain : ' +
    document.domain +
    '<br>' +
    'lastModified : ' +
    document.lastModified +
    '<br>' +
    'referrer : ' +
    document.referrer +
    '<br>' +
    'title : ' +
    document.title +
    '<br>' +
    'URL : ' +
    document.URL +
    '<br>';
  getPage.insertAdjacentHTML('afterend', '<p>' + info + '</p>');
});

クリックするとページの情報が表示されます。

あとがき

windowオブジェクトについて見てきましたが、今回ご紹介していないメソッドやプロパティは以下にてご確認ください。

MDN：Window

MDN

今回も最後までお読み頂きありがとうございました。