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ソース：
<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>
(追記160210: 修正。)関連記事
この記事に言及しているこのブログ内の記事