スタートページ＞ Javascript＞

window.open: 別ウインドウの作成

window.open

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

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

基本形

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

• ＵＲＬ：別ウインドウに表示する読込ファイルのＵＲＬです。ＨＴＭＬ、画像、テキストなどが使えます。
  外部ファイルからではなく、ここで作成したＨＴＭＬ文を表示するには "" とします。
• 別ウインドウ名：<a href="～" target="〇〇"> の〇〇に相当するものです。
  通常は "_blank" とします。

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

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

１　外部ＨＴＭＬファイルの表示（リンク）

例１・１：単純な例

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

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

例１・２：オプションの付加

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

１・３　複数ＵＲＬの表示

ウインドウ名は任意です。下の「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");

２　ＨＴＭＬ以外のファイル

例２・１：画像ファイルの表示

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

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

例２・２：テキストファイルの表示

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

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

３　新規ＨＴＭＬの作成

既存のファイルを表示するのではなく、元のＷｅｂページ内でＨＴＭＬファイルを作成して、それを別ウインドウに表示したいことがよくあります。この場合、ＵＲＬ="" になります。

ＨＴＭＬのＨＥＡＤ部などの記述を省略して、直接 <p> や <img> などを記述するだけでも表示できます。

例３・１：簡単な例

var ウインドウ = window.open("", "_blank",
　　　　"width=500, height=300, top=0, left=200, resizable=yes, scrollbars=yes");
　　ウインドウ.document.write("<h4>document.writeの例です。</h4>");
　　ウインドウ.document.write("<p>あいうえお<br>");
　　ウインドウ.document.write("かきくけこ</p>");
　　ウインドウ.document.close();

例３・２：文字列で受け渡す

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

var 出力 = "<h3>作成されたＨＴＭＬです</h3>";
　　出力 += "<p>あいうえお<br>";
　　出力 += "かきくけこ</p>";
var ウインドウ = window.open("", "_blank",
　　　　"width=500, height=300, top=0, left=200, resizable=yes, scrollbars=yes");
ウインドウ.document.write(出力);
ウインドウ.document.close();

例３・３：範囲を指定する

指定した id の範囲を getElementById で取り出して表示します。
<div id="指定範囲">

var 出力 = document.getElementById("指定範囲").innerHTML;
var ウインドウ = window.open("", "_blank",
　　　　"width=500, height=300, top=0, left=200, resizable=yes, scrollbars=yes");
ウインドウ.document.write(出力);
ウインドウ.document.close();

例３・４：ソースコードを指定する

< と > の機能を外したいときの操作です。上の指定範囲でのタグを文字列として表示します。

var 出力 = document.getElementById("指定範囲").innerHTML;
出力 = 出力.replace(/</gm, "&lt;");
出力 = 出力.replace(/</gm, "&gt;");
出力 = "<pre>" + 出力 + "</pre>";
var ウインドウ = window.open("", "_blank","width=600,height=300,resizable=yes,scrollbars=yes");
ウインドウ.document.open();
ウインドウ.document.write(出力);
ウインドウ.document.close();
実行