hashchange

目前除了 ie67 外都原生支持 hashchange 事件,kissy 对 ie67 也模拟兼容了该事件.

当浏览器的 hash 值发生变化时会触发此事件,常常被用来实现单页面应用( 存在广泛争议 ).

Note

当用户点击后退与前进进行浏览器导航时会引起 hash 变化.

语法

Note

此事件只能在当前 window 上注册,注册到其他类型元素上无效! hash 值推荐为 !/xx/ 形式, 前面用 !/ 后面用 / 包起来,否则 ie67 可能有诡异现象.

var $=KISSY.all;
$(window).on("hashchange",function(){
    // location.hash -> 当前 hash 值
});

示例

hash 驱动的单页面应用设计

<!DOCTYPE html>
<html>
<head>
<script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
</head>
<body>
    
    <div id='cool' style='display:none;width:200px;height:100px;line-height:100px;border:1px solid red;'>
        
        ooh,some cool features shows
        
    </div>
        
    <label>输入 hash :<input id='in' /> </label>
    
    <button id='ok'>确定</button>
    
    
    <div>try input cool ,enter then after 1 second navigate back</div>
    
    <a href="?x" target="_blank">新窗口打开</a>

<script>       
    KISSY.use("node",function(S,Node){   
        location.hash='#';
        var $=Node.all;
        
        $('#ok').on("click",function(){
            location.hash="!/"+$("#in").val()+"/";
        });
        
        $('#in').on("keydown",function(e){
            if(e.keyCode==13)
            location.hash="!/"+$("#in").val()+"/";
        });
        
        $(window).on("hashchange",function(){
            if(location.hash == "#!/cool/"){
                $("#cool").show(1);
            }else{
                $("#cool").stop(true).hide();
            }
        });
    });
</script>

</body>
</html>