JavaScript と CSS を使った「このページを印刷」リンク

クリックするとブラウザの印刷ダイアログが立ち上がる、いわゆる「このページを印刷」リンク。マークアップはだいたいこんな感じになると思う:

<p class="print">
  <a href="#" onclick="window.print(); return false;">このページを印刷</a>
</p>

でもこれ、JavaScript が無効の場合はどうなるだろう? そう、何も起こらない無意味なリンクになっちゃうよね。そこで、JavaScript と CSS を使ってひと工夫してみよう。

まずは JavaScript。例によって jQuery を読み込んだ上で、こんな風なスクリプトを記述:

$(function(){
  $('body').addClass('js-enabled');
});

もちろんクラス名はなんでもよくて、body 要素になんらかの class 属性を付与できれば OK。つまり、JavaScript が有効であることの証しとして「しるし」をつけておくわけ。

そして最後に CSS:

p.print {
  display: none;
}
.js-enabled p.print {
  display: block;
}

すごく簡単なトリックなんだけど、要素をいったんまるごと消しといて、js-enabled クラスがある場合—つまり JavaScript が有効の場合のみ表示させるってわけ。この CSS を書き換えれば、たとえば今回のシチュエイションとは逆に、JavaScript が無効の場合にだけメッセージを見せる、なんてのも簡単。完成版デモ を用意したのでチェックしてみて。

それに、このシンプルな JavaScript の有効判定はいろいろと応用ができそうだよね。だからもし「このページを印刷」リンクがなかったとしても、スクリプトを書くときはとりあえず body 要素に「しるし」をつけておく、ってのは悪いアイディアじゃないんじゃないかな。