お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

この窓、広げてもよくって?

window系のオブジェクトです。
全ての基本であったりしますが、特に良く使うものを抜粋しておきます。

window.open

別窓を開きます。

window.open 第一引数

urlを指定します。
何を開くのか?をここで教えてあげるのです。

window.open 第二引数

ウインドウ名を指定します。
特になければ、null として指定しない方法でもOKです。
名前を指定すると、既に開いている場合はそれがリロードされる形となり
null指定の場合は新規ウィンドウとしてどんどん開かれていきます。

window.open 第三引数

カンマ区切りで複数の指定をすることができます。
パラメータは以下の通りです。

パラメーター 意味 指定ない場合のデフォルト
width 数値 ウィンドウ幅 操作したwindowの横幅
height 数値 ウィンドウ高さ 操作したwindowの縦幅
left 数値 ウィンドウ位置左 操作したwindowの近く
top 数値 ウィンドウ位置上 操作したwindowの近く
menubar yes/no メニューバー有無 メニューバー無し
toolbar yes/no ツールバー有無 no
location yes/no アドレスバー有無 no
status yes/no ステータスバー有無 no
resizable yes/no リサイズの可否 no
scrollbars yes/no スクロールバー有無 no

window.open 設定例

例としては以下の通りです。

window.open('http://google.com',null,'width=500,height=500,left=20,top=10,menubar=yes,toolbar=yes,location=yes,status=yes,resizable=yes,scrollbars=yes')

window.open 注意点

aタグやボタンをクリックしたときに発動させるようにしなければいけません
リロード時等関係ない所で発動すると、ポップアップブロックに引っかかります。

window.opener

window.openで開いた窓(子窓)から元窓(親窓)を操作するメソッドです。
何らかのシステムで、小窓立ち上げてそこで選択させる的な。(昔の住所選択系とかね)

if(!window.opener || window.opener.closed){
 //親ウィンドウが存在しない
 window.close();
 } else{
  //window.openerで親ウィンドウのオブジェクトを操作
  window.opener.document.getElementById('title01').innerHTML = val;
  window.opener.document.form01.text01.value = val;
  window.close();
}

window.innerHeight

ブラウザの内側の高さ
いわゆる、表示領域ってヤツです。
スクロールバーも含まれます。

window.innerWidth

ブラウザの内側の幅
スクロールバーも含まれます。

window.outerHeight

ブラウザの外側の高さ
兎に角、ウインドウ全体の高さとなります。

window.outerWidth

ブラウザの外側の幅
outerHeightと同じく、ウインドウ全体の横幅となります。

練習問題的な

  • 1:サイズ取得
    現在のウインドウサイズを取得し、画面に表示させてください。
  • 2:ポップアップブロック
    ポップアップブロックを一度出してみてください。
  • 3:新しい窓
    幅、高さ、リンク先を引数にして
    その情報を使って新規ウィンドウを立ち上げる関数を作成してください。

    条件1:ポップアップブロックがかからないもの 条件2:実行する度に新規ウィンドウが開く 条件3:ツールバー等の表示非表示は問いません。