【おやじのweb技】 html/javascript/css等
新たに開いたウィンドウに文字やタグを書き込み新らしいhtmlファイルを作る◇document.write()
サンプル |
上記のリンク文字をクリックするとサンプルウィンドウが開きます。
◆手順1【スクリプト】
※<head>〜</head>間に記述します
-----次の行から(copy)-----
<script type="text/javascript">
<!--
function OpenSample() {
var subWin;
subWin=window.open("","SUB_WIN2","width=800,height=500"); //ウィンドウを開く
subWin.document.open(); //ドキュメントストリームを開く
subWin.document.write("<html><head>"); //以下にドキュメントを書き出す
subWin.document.write("<title>サンプル</title>");
subWin.document.write("<style type='text/css'>");
subWin.document.write("<!-- body {background-image:url('../gif/fuji-1.jpg'); background-position:center; background-repeat:no-repeat;} //-->");
subWin.document.write("</style></head>");
subWin.document.write("<body><center>");
subWin.document.write("<table width='780' height='480' border='0'><tr><td
align='center' valign='middle'><font color='blue' size='+1'>");
subWin.document.write("霊峰冨士はやはり真っ白でなくちゃあねぁ...<br>暑中お見舞い申し上げます<br>八王子盛夏<br><br>");
subWin.document.write("【技g002】背景画像を1枚だけ表示する、で実際に動作しているスクリプトを簡略化したものです。");
subWin.document.write("</font></td></tr></table></center>");
subWin.document.write("<div style='top:20px; left:20px; position:absolute;'>
" +
"<a href='JavaScript:window.close()' title='Windowを閉じる'>Windowを閉じる</a></div>");
subWin.document.write("</body></html>");
subWin.document.close(); //ドキュメントストリームを閉じる
}
//-->
</script>
-----上の行まで(copy)-----
◆手順2【スクリプト実行】
※<body>〜</body>間に記述します
※実際に【技002】で動作しているスクリプトを簡略化したものです
※背景画像を1枚だけ表示した後、文字を真ん中に表示するためにテーブルを作成しています。文字を<div>設定しても可。
-----次の行から(copy)-----
<a href="#" onclick="OpenSample()">サンプル</a><br>
-----上の行まで(copy)-----
◆何も書かれていないhtmlファイルを開き、そこに文章やhtmlタグを書き込んで、新たにhtmlファイルを作ってしまう技です。
◆半角250文字以上になるとブラウザによってはトラブルらしいので、250文字以上になる場合は
document.write("〜〜" +"〜〜"); によって文字を接続します。
◆類似のhtmlを複数用いるような場合、このようにして毎回必要なファイルを作成するようにすると、メモリ容量が節約できる他、スクリプトの修正が楽です。実行時間は少々劣るでしょうか。
【実際例】
◆[技g002]背景画像を1枚だけ表示する、でサンプルウィンドウを作るときのスクリプトのうち、背景画像を中央に配置したものです。
◆実際例では、スクリプト実行時に引数 OpenSample(i) を渡して、条件によって書き込むタグを変えています。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----