用history.js重定向hashbang到url

redirect hashbang to url with history.js

本文关键字：url hashbang 重定向 history js      更新时间：2023-09-26

我注意到history.js会自动更改

http://www.site.com/some/path#/other/path


http://www.site.com/other/path

在支持html5的浏览器中。这很好，但它实际上并没有将浏览器重定向到/other/path，它只是改变了地址栏中的url。我也需要它重定向。我试着用:

<script>
    $(function() {
        $(window).on('statechange', function() {
            var State = History.getState();
            console.log('state', State.url);
        });
    });
</script>

但是statechange事件从未发生…那么我怎么做重定向呢?

你需要依赖url来实现这一点，我们有很好的框架，比如backbone.js路由，甚至像history.js这样的插件

但是如果没有这个插件，你可以从url中获得哈希邦，并应用与它对应的列表的活动样式。

要做到这一点，HTML必须是这样的，

<ul id="ulid" class="">
        <li class="">
            <a href="#tab=one" id="one" class="active">text1</a>
        </li>
        <li>
            <a href="#tab=two" id="two" class="">text2</a>
        </li>
        <li>
            <a href="#tab=three" id="three" class="">text3</a>
        </li>
        <li>
            <a href="#tab=four" id="four" class="">text4</a>
        </li>
        <li>
            <a href="#tab=five" id="five" class="">text5</a>
        </li>
        <li>
            <a href="#tab=six" id="six"  class="">text6</a>
        </li>
    </ul>

活动类css可以是:.active{background-color: red;}

获取hash bang的一个简短的附加代码是:

function parseHashBangArgs(aURL) {
aURL = aURL || window.location.href;
var vars = {};
var hashes = aURL.slice(aURL.indexOf('#') + 1).split('&');
for(var i = 0; i < hashes.length; i++) {
   var hash = hashes[i].split('=');
   if(hash.length > 1) {
       vars[hash[0]] = hash[1];
   } else {
      vars[hash[0]] = null;
   }      
}
return vars;
}

然后你可以在页面加载

时运行这段代码
$('ul#ulid li a').click(function(){
    $('li a').removeClass('active');
    $(this).addClass('active');
});
var selectedTab = parseHashBangArgs(window.location.href).tab;
if(selectedTab){
    $('li a').removeClass('active');
    $('#'+selectedTab).addClass('active');
}

完成了!

相关文章：