スタートページJavascript

別ウインドウの作成


windoes.open

Webページから他のページを表示させていとき、単純にリンクしたのでは、新ウインドウがブラウザ画面全体に表示されてしまい、元の画面と相互参照するのに不便です。ポップアップ画面のように、小さなウインドウを開けるようにしたいのです。それには、windoes.open を用いるのが簡単です。

(注)ポップアップ画面は迷惑なだけでなく悪用される危険があるので、多くのブラウザでは初期設定で開けないようになっています。ときによっては、臨時的に解除する必要があるかもしれません。

基本形

    window.open(URL, 別ウインドウ名, オプションパラメータ);

オプションパラメータ:下表から必要なものを選び、全体を "" で囲みます。

プロパティ指定値意味
width数値別ウインドウの横幅
height数値別ウインドウの縦幅
top数値別ウインドウの上端位置
left数値別ウインドウの左端位置
resizableyes/no★リサイズの可/不可
scrollbarsyes/no★スクロールバーの表示/非表示

多くのブラウザはyesだけをサポートしています。

1 HTMLファイルの表示

例1・1:単純な例

window.open("sample/child1.html");

<a href="sample/child1.html" target="_blank">実行</a> としたのと同じです。
単に新しいタグとして表示されます。

例1・2:オプションの付加

window.open("sample/child1.html",
  "_blank",             // target="_blank" と同じ
  "width=500, height=300,      // ウインドウのサイズ
   top=0, left=200,         // 上端、左端から200pxの位置
   resizable=yes, scrollbars=yes"  // ウインドウサイズの変更可、スクロールバーを付ける
);

1・3 複数URLの表示

ウインドウ名は任意です。下の「blank」を「aaa」としても、二つのウインドウ名を別のものにしても同じ結果になります。

window.open("sample/child1.html","_blank",
  "width=500, height=300, top=0, left=200, resizable=yes, scrollbars=yes");
window.open("sample/child2.html","_blank",
  "width=300, height=200, top=0, left=200, resizable=yes, scrollbars=yes");

2 HTML以外のファイル

例2・1:画像ファイルの表示

sample/child.jpegのサイズは400x300です。別ウインドウのサイズを変更しても、画像ファイルを縮小・拡大することはできません。

window.open("sample/child.jpeg", "_blank",
  "width=500, height=400, top=0, left=0, resizable=yes, scrollbars=yes");

例2・2:テキストファイルの表示

テキストファイルはそのまま表示されます。しかし、文字コードを UTF-8 にしないと、ブラウザにより文字化けすることがあります。

window.open("sample/child.txt", "_blank",
  "width=500, height=400, top=0, left=0, resizable=yes, scrollbars=yes");


3 新規コンテンツの作成

既存のファイルを表示するのではなく、元のWebページ内でHTMLファイルを作成して、それを別ウインドウに表示したいことがよくあります。
それには、document.open/write/closeを用いるのが簡単です。これとwindows.open と組み合わせて、別ウインドウにすることができます。

(注)document.write()は、リスクが多いことが指摘され、HTML5で非推奨になっていますが、ここで扱っている程度なら危険性は小さいでしょうし、このような利用でこれよりも簡単な手段を私は知らないので、そのままにしています。

例3・1:単純な例

document.open();
document.write("document.writeの例です。");
document.write("テキストデータで改行に「br」は使っていません。");
document.write("この行の最後に「br」を入れました。<br>");
document.write("その次の行です。");
document.write("<img src='sample/child.jpeg'>");
document.close();

実行するとわかるように、<br> が有効であり、画像表示の<img ~ > も有効です。 <HTML> などの「前書き」がなくてもHTMLの記述になります。
元ウインドウが新ウインドウで置き換わっているので、「再読み込み」により元ウインドウに戻ります。

例3・2:別ウインドウへの表示

これでは不便です。windows.open と組み合わせて、別ウインドウにすることができます。
  ウインドウ = window.open("", "_blank", オプションパラメータ);
     (URLの対象がないので "" にします。)
  ウインドウ.document.open();
  ウインドウ.document.write("~");
  ウインドウ.document.write("~");
     :
  ウインドウ.document.close();

var ウインドウ = window.open("", "_blank",
    "width=500, height=300, top=0, left=200, resizable=yes, scrollbars=yes");
ウインドウ.document.write("<h4>sample/child1.html</h4>");
ウインドウ.document.write("<p>window.openで別ウインドウに表示される子HTMLです。<br>");
ウインドウ.document.write("<img src='sample/child.jpeg'></p>");
ウインドウ.document.close();

例3・3:文字列で受け渡す

document.write("~") を何度も記述するのは面倒です。その文字列を例えば、「出力」という変数に蓄積しておき、それを1回の document.write("~") で渡すほうが簡単です。

var ウインドウ = window.open("", "_blank",
    "width=500, height=300, top=0, left=200, resizable=yes, scrollbars=yes");
var 出力 = "<h4>sample/child1.html</h4>";
出力 += "<p>window.openで別ウインドウに表示される子HTMLです。<br>";
出力 += "<img src='sample/child.jpeg'></p>";
ウインドウ.document.write(出力);
ウインドウ.document.close();