【20140417】【Javascript】Framesetのframe毎の印刷
お題
Framesetのframe毎の印刷ボタンを作成する
プログラム概要
各フレームの印刷ボタンを押すと、印刷ダイアログが出力される。
その時、そのフレームのみが印刷対象となるようにする。
ソース
framemain.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<title>フレーム印刷</title>
</head>
<frameset cols="30%,*">
<frame src="frame1.html" name="frame1"/>
<frame src="frame2.html" name="frame2"/>
</frameset>
</html>frame1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<title>フレーム印刷</title>
</head>
<frameset cols="30%,*">
<frame src="frame1.html" name="frame1"/>
<frame src="frame2.html" name="frame2"/>
</frameset>
</html><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript">
function framePrint() {
/* frame1にフォーカスを当てる */
parent.frame1.focus();
/* frame1を印刷 */
parent.frame1.print();
}
</script>
<style type="text/css">
body { background-color:#ffffcc; }
</style>
</head>
<body background="">
<span>frame1</span>
<input type="button" value="印刷" onclick="framePrint()">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<span>frame1 end</span>
</body>
</html>frame2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title></title>
<script type="text/javascript">
function framePrint() {
// frame2にフォーカスを当てる
parent.frame2.focus();
// frame2を印刷
parent.frame2.print();
}
</script>
<style type="text/css">
body { background-color:#ffcccc; }
</style>
</head>
<body background="">
<span>frame2</span>
<input type="button" value="印刷" onclick="framePrint()">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<span>frame2 end</span>
</body>
</html>実行結果
「選択されたフレームのみを印刷する」が選択されている。
