社内SEの徒然なる日記

HTMLのリンク(Aタグ)で別画面を表示する方法

■ ダウンロード

基幹システムに新しい機能を追加したので、マニュアル(PDFファイル)をダウンロード出来るようしようとしたのですが、PDFファイルは表示されるのですが、元の画面が食われてしまいます。

難しいことはやっていなくて、Aタグで使ってフォルダ内にあるファイルをリンク先に設定しているだけです。

...PDFってWEBブラウザでそのまま表示できるので、単純にリンク先に指定するだけじゃだめなようですね。

■ 環境

まず、テスト用にHTMLファイル(Linkで別ウィンドウ.html)を作成します。

同じフォルダに、リンク先のテストで使用するためのPDFファイルとExcelファイルを作成します。
HTMLのリンクで別画面を表示 (0)

「Linkで別ウィンドウ.html」 の中身はこんな感じにしときます。

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body bgcolor="#FFFF99" style="font-size:16px;">
<br>
<A style="font-size:14px;" href="./PDFファイル.pdf">PDFファイル</A>
<br>
<br>
<A style="font-size:14px;" href="./Excelファイル.xlsx">Excelファイル</A>
</body>
</html>


■ 実験

「Linkで別ウィンドウ.html」をブラウザで表示して、リンクをクリックしてみます。
HTMLのリンクで別画面を表示 (1)

といった感じで、PDFの方は画面そのものが食われてしまいます。
一方、Excelの方はダウンロード画面が表示されました。

■ 正解

まぁ、原因ははっきりしていてAタグのtarget属性を指定していない事が原因なんですけどね。

target属性を指定することで、リンク先を表示するフレームを指定することが出来ます。指定しないと、自分自身になっちゃうわけです。

色々と指定できるのですが、今回のように別ウィンドウに表示したい場合は、target="_blank" と設定します。

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body bgcolor="#FFFF99" style="font-size:16px;"><br>
<A style="font-size:14px;" href="./PDFファイル.pdf" target="_blank">PDFファイル</A>
<br>
<br>
<A style="font-size:14px;" href="./Excelファイル.xlsx" target="_blank">Excelファイル</A>
</body>
</html>


■ 正解の実験

修正結果で、もう一度実験します。

まず、PDFファイルをクリックします。
HTMLのリンクで別画面を表示 (2)

という感じで、別の画面にPDFファイルが表示されました。これでOKですね。

今度は、Excelファイルをクリックします。
HTMLのリンクで別画面を表示 (3)


何か変ですね。真っ白な別の画面が表示された上で、さらにダウンロード画面が表示されています。

ダウンロードをすると、この画面は自動的に消えたのですが、今一つ美しくないです。

■ 結果

実験の結果、ダウンロード用として使用するのであれば、PDFファイルの場合だけ target="_blank" を設定。それ以外のファイル(Excelなど)については、target属性は設定しないようにすれば良さそうです。

実の所、単純にAタグを使っちゃ上手く行かないのは分っていたのですが、どうすれば良いのか忘れてたんですよ。

HTMLは(正確にはJSPになるのだが)、結構な頻度で作成・修正はしているのですが、基本的にはコピペで事足りるので、こういった基本的な事で「あれ?」ってなる事が多いです。

...技術者としては恥ずかしい限りですが、広く浅くという能力を求められる社内SEには、この程度でも良いかなぁとか思ったりします。


投稿記事の一覧:http://harikofu.web.fc2.com/

--- blog end --- スポンサードリンク

PageTop

コメント


管理者にだけ表示を許可する