URLのハッシュ記号以降をJavaScriptで取得してなにかをする
2016-02-04-1
[Programming][JavaScript]
URLのハッシュ記号以降(フラグメント識別子)をJavaScriptで取得してなにかする流れをメモ。
サンプルページのHTMLソース:
- フラグメント識別子とは?
- http://example.com/a.html#12345 の 12345
- 取得方法
- JavaScript で location.hash
- "#12345" が取れる
- location.hash.slice(1) で "12345"
- JavaScript で location.hash
- サンプルページ
- http://chalow.net/misc/url-hash-test-js.html
- フラグメント識別子をつけてアクセスすると、隠されていた div が見えるようになる。
- onload で div 表示関数を呼び出しているので、うまくいかないときはリロード。
サンプルページのHTMLソース:
(追記160210: 修正。)<html> <head> <title>URL HASH TEST JavaScript</title> <script> function show_hide(id) { if (!document.getElementById) return; if (!document.getElementById(id)) return; if (document.getElementById(id).style.display != "block") document.getElementById(id).style.display = "block"; else document.getElementById(id).style.display = "none"; } function open_hash() { if (location.hash) { var id = location.hash.slice(1); show_hide('area'+id); } } document.addEventListener("DOMContentLoaded",function(eve){ open_hash(); },false); </script> </head> <body> <ul> <li> <a name="1001" href="#1001" onclick="show_hide('area1001');">1001</a> <div id="area1001" style="display:none">No.1001</div> </li> <li> <a name="1002" href="#1002" onclick="show_hide('area1002');">1002</a> <div id="area1002" style="display:none">No.1002</div> </li> <li> <a name="1003" href="#1003" onclick="show_hide('area1003');">1003</a> <div id="area1003" style="display: block;">No.1003</div> </li> </ul> </body> </html>
関連記事
この記事に言及しているこのブログ内の記事