サブウィンドウを開く・応用 作成編
では、さっそく作成に移ります。
スクリプト部・<head>内
今回のスクリプトは、処理内容が多いので関数を定義する必要があります。 関数では、引数として画像ファイル名、画像のサイズ(横幅、縦幅)、画像のタイトル(ウィンドウ名・alt属性に利用)の4つを設定しておきます。 はじめにウィンドウを開き、そこにページ内容を書き込むという動作を記述します。 以下を<head>内の<script>タグ内に記述します。
例：
// made by Ki_NG
function openPhoto(uri,w,h,pname){
var PW;
PW=window.open("",pname,
"toolbar=no, location=no, directories=no, status=no,
menubar=no, scrollbars=no, resizable=no, width="+w+", height="+h);
PW.focus();
PW.document.open();
PW.document.write("<html><head>");
PW.document.write("
<meta http-equiv='content-script-type' conent='text/javascript'>");
PW.document.write("
<meta http-equiv='content-style-type' conent='text/css'>");
PW.document.write("<title>"+pname+"<"+"/title><"+"/head>");
PW.document.write("<body style='margin: 0\; padding: 0\;'><p>");
PW.document.write("
<img src='"+uri+"' width='"+w+"' height='"+h+"' alt='"+pname+"'>");
PW.document.write("<br><"+"/p><"+"/body><"+"/html>");
PW.document.close();
}
(表示上、長い行を折り返していますが、;の後以外に改行は入れないで下さい。)
では、解説していきましょう。
1行目は、私の単なる自己主張です。 コピー&ペーストして使用するときは、一緒に入れてもらえるとちょっと嬉しかったりします(^-^)。 …まじめに言いますと、1行目には、スクリプト的な意味はまったくありません。 「//」が記述されている行は、それ以降の記述がJavaScriptのコメント文として無視されます。 他に「/* 〜 */」で括られた部分も、JavaScriptとしては無視されます(こちらは複数行に渡ってコメントアウトできます)。
2行目は、関数名の定義と、その関数内の引数の定義を行っています。 今回は、4つの引数を受け取ります。 第1引数のuriは表示する画像ファイルのURI、第2引数のwは画像ファイルの横幅、第3引数のhは画像ファイルの縦幅、第4引数のpnameは画像の名前として利用する予定です。
var PW;
PW=window.open("",pname,
"toolbar=no, location=no, directories=no, status=no,
menubar=no, scrollbars=no, resizable=no, width="+w+", height="+h);次のこの部分は、PWというIDを与えて新しいウィンドウを開くという指定を行っています。 これは、新しく開くウィンドウを、このスクリプト内では「PW」として取得する準備でもあります。 これ以後の記述でメソッドをすべて「PW.」からひいているのは、そのメソッドをPWというIDで開いたwindowで実行するという意味を持っています。 前ページではじめのwindowプロパティの表記(「window.」)は、そのスクリプトがおかれているページが表示されるwindow内をJavaScriptで操作する場合には、省略が可能と書いたことと照らし合わせると、幾分わかりやすくなるでしょう。
「window.open()」内では、開くファイルのURLを指定せずに空の状態でウィンドウを開き、target指定で利用されるそのウィンドウの名前を引数pnameにし、各種表示設定を行っています。 ウィンドウの名前を引数pnameにしているのは、同じ画像を複数のウィンドウで同時に開くことを防ぐためです。 各種表示設定については、バー類は一切表示させず、リサイズも禁止して、ウィンドウの表示領域を、画像サイズの引数をひいて、画像に合わせるようにしています。
PW.focus();この部分は、開いたウィンドウを前面に持ってくる指定です。 もし先にウィンドウを開いていて、後で同じ画像を表示させようとしたとき、そのウィンドウが後ろにあると、ウィンドウが隠れたままになってしまいます。 それを防ぐために、ウィンドウを強制的に前面に持っていきます。
PW.document.open();
PW.document.write("<html><head>");
PW.document.write("
<meta http-equiv='content-script-type' conent='text/javascript'>");
PW.document.write("
<meta http-equiv='content-style-type' conent='text/css'>");
PW.document.write("<title>"+pname+"<"+"/title><"+"/head>");
PW.document.write("<body style='margin: 0\; padding: 0\;'><p>");
PW.document.write("
<img src='"+uri+"' width='"+w+"' height='"+h+"' alt='"+pname+"'>");
PW.document.write("<br><"+"/p><"+"/body><"+"/html>");
PW.document.close();
(表示上、長い行を折り返していますが、;の後以外に改行を入れないで下さい。)以降は、新しいウィンドウ内に記述するHTMLをJavaScriptで書き出しています。 JavaScriptで文字を書き出すやり方については前ページに説明してある通りですし、それぞれ書き出すタグについてはHTMLの記述と同じです。 普通にHTMLの記述をする場合と異なるのは、title要素とimg要素で変数を取り込んでいる部分、各属性を囲んでいる引用符だけです。 また、終止タグの部分で「<"+"/」というように、文字列を区切って加算しているのは、「</」と記述した場合、それがスクリプト内の文字列であっても、そこでHTMLの終了タグが現れたとブラウザに誤解釈をされる可能性があるので、それを防ぐためです。 ちなみにJavaScriptでは、文字列同士は加算することができます。