まず、表と裏にあたるPDF（サンプルでは、「k-a.pdf'」と「k-b.pdf'」）をそれぞれ用意する。
次に、メインとなるhtml「main.html」を準備し、「frameset」で２つのフレームを用意する。
「frameset」は、「body」よりも前であることに注意。
最初のフレームでは、PDFの読み込み、次のフレームでは、表裏を制御するボタンのついたhtml「bottom.html」を読み込む。
「main.html」
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<meta http-equiv="Expires" content=0>
<title></title>
<style>
BODY
{
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
background-color:#FFFFFF;
color:#000000;
font-family:"ＭＳ Ｐゴシック";
font-size:9pt;
}
</style>
</head>
<frameset rows="*,75" cols="*" frameBorder="no" framespacing="0" border="0" bordercolor="#FFFFFF">
<frame name="_top" scrolling="no" border="0" src="../../pdf/k-a.pdf"><!-- PDF領域 -->
<frame src="bottom.html" name="bottom" scrolling="no" border="0"><!-- 表裏ボタン」 -->
</frameset>
<noframes>
<body>
<p>エラー</p>
</body>
</noframes>
</html>
「bottom.html」
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style type="text/css">
<!--
.TEXT_1 { FONT-SIZE: 12PX; LINE-HEIGHT: 130%
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<table border="0" align="center" cellpadding="0" cellspacing="3">
<tr>
<td><div align="center">
<table border="0" cellspacing="1" cellpadding="3">
<tr align=CENTER>
<td width="92"><div align="center">
<input type="BUTTON" value=" おもて面 " onClick="window.parent._top.location.href='../../pdf/k-a.pdf'">
</div></td>
<td width="92"><div align="center">
<input type="BUTTON" value=" うら面 " onClick="window.parent._top.location.href='../../pdf/k-b.pdf'">
</div></td>
<td width="92"><div align="center">
<input type="BUTTON" value="ページを閉じる" onClick="window.parent.close()">
</div></td>
</tr>
</table>
</body>
</html>
コメントする