リンクをクリックさせる前にJavaScript:confirmで確認する時の注意
JavaScriptによるダイアログでユーザーの同意を得てリンク先に移動させるようなページを作成する場合にうっかり見落としがちなポイントを挙げておきたいと思います。
やりたいこと
- 「child.html」から「adult.html」にリンクで移動させたい。
- 18歳以上であるかどうかをJavaScriptのダイアログで確認する。
- 18歳以上に同意してもらえれば「adult.html」に移動させる。
危ない例
まず、危ない例を書きます。 どこがおかしいか分かりますか?
<noscript>JavaScriptをオンにしてください。 正常に動作しない場合があります。</noscript> <a href="adult.html" onclick="return confirm('あなたは18歳以上ですか?');">18歳以上の方はこちら</a>
JavaScriptがOffにしてあったらどうなるの?
この例ではJavaScriptがOffにしてある場合が想定されていません。
JavaScriptをオフにすると「onclick=…」の部分が動きませんので、単なるリンクになってしまい、リンク先に移動してしまいます。 これではまずい。
キーボードでフォーカスしてEnterしたらどうなるの?
残念ながらこの場合も動作してしまいます。 防ぐには「onkeypress」属性にも同じ処理を指定するか、onkeypress属性ではfalseを返すようにしましょう。
<a href="adult.html" onkeypress="return false;" ... >
この例は、<noscript>タグで警告はしてあるものの、しくみでは動作するようになっているので、クレームが来てしまうと対応に苦労します。 くれぐれもこういう書き方はしないようにしましょうね。
安全な例
次に安全な例を書きます。
<noscript>JavaScriptをオンにしてください。 正常に動作しない場合があります。</noscript> <a href="javascript:void(0);" onclick="var ok=confirm('あなたは18歳以上ですか?'); if (ok) location.href='adult.html'; return false;">18歳以上の方はこちら</a>
JavaScriptがオフの場合はリンクそのものが動作しない
こちらの例はリンク先にJavaScriptの「location.href」を利用しているので、JavaScriptがオフの場合は動作しません。
また、フォーカスによるEnter操作の場合も「href=”javascript:void(0);”」の箇所が動作するだけなので「adult.html」には遷移しません。
ちなみに、最後の「return false;」の部分はInternet Explorer (IE)対策で、最後にfalseを返さないとリンクが動作しない仕様になっているためです。
シンプルな処理でも落とし穴が隠されているので注意
LINC ORIGINAL MAKERS リンクオリジナルメーカーズ ヘアバーム スタイリング ヘアクリーム HAIR BALM 997 ヘアケア コスメ 化粧品 ギフト プレゼント (70g)
¥4,700 (2025-04-23 13:19 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)オリーブ油を主成分としたヘアスタイリング剤。 上質な天然オイル由来でできているので、使用後はそのままハンドクリームやネイルオイルとしてもご使用いただけます。
【正規取扱店】リンク オリジナルメーカーズ LINC ORIGINAL MAKERS ヘアバーム997 HAIR BALM
¥5,380 (2025-04-24 04:57 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)商品区分:化粧品 香り :No997 内容量 :70g 用途 :スタイリング メーカー:株式会社リンク 原産国 :日本 Scent: アンバー Hair type: 全髪質 Item form: バーム
LINK
(2025-04-23 13:19 GMT +09:00 時点 - 詳細はこちら価格および発送可能時期は表示された日付/時刻の時点のものであり、変更される場合があります。本商品の購入においては、購入の時点で当該の Amazon サイトに表示されている価格および発送可能時期の情報が適用されます。)2010-03-03