shebang urlを使ってみた

programming js

ajaxなアプリケーションを、表示しているコンテンツによってurlを切り替えつつ（もちろん画面遷移無しで）googleに正しくクロールしてもらえるようにしたかったので、うわさの（？）shebangつきurlの動作を確かめました。

What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?
Making AJAX Applications Crawlable
さらなる「#!」URL批判

リンクをフォローするとurlのハッシュが変わり、それによってコンテンツを変化させる事ができるのがわかって満足。

<!DOCTYPE HTML>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
   <title></title>
   <script type="text/javascript">
$(function(){
   $('a').click(function(){
       var loc = new String(window.location).match(/#!(.+)/g)
       if (loc == null)
           return
       loc = loc[0].substring(2)
       console.log(loc)
   })
})
   </script>
</head>
<body>
   <h1>shebang url test</h1>
   <ul>
       <li>
           <a href="#!/nav1">1</a>
       </li>
       <li>
           <a href="#!/nav2">2</a>
       </li>
       <li>
           <a href="#!/fav3">3</a>
       </li>
   </ul>
</body>
</html>