《跨终端Web》（四）——定位

一、定位

1）hash

/**
     * 监听Hash变化，支持IE6+和其他现代浏览器
     */
    function onHashChanged(callback) {
        // IE 8+ 支持 window.hashchange 事件
        // 这里的判断是简化形式，可改进
        var supportHashChangeEvent = !!window.addEventListener;

        if (supportHashChangeEvent) {
            window.addEventListener('hashchange', function() {
                callback(location.hash);
            });
        }
        else {
            var oldHash = location.hash;
            setInterval(function() {
                var hash = location.hash;
                if (hash !== oldHash) {
                    oldHash = hash;
                    callback(hash);
                }
            }, 100);
        }
    }

    // 监听    
    onHashChanged(function(hash) {
        alert(hash);
    });

 

2）History API

var supportHistoryAPI = !!history.pushState;
    if (supportHistoryAPI) {
        var anchors = document.getElementsByTagName('a');
        for (var i = 0; i < anchors.length; ++i) {
            anchors[i].addEventListener('click', function(event) {
                event.preventDefault();
                var title = this.innerHTML;
                var url = this.href;
                console.log(title, url);
                history.pushState({url: url, title: title}, title, url);
            });
        }

        /**
         * 页面首次加载、回退或前进时触发
         */
        window.onpopstate = function(event) {
            var data = event.state;
            console.log('popstate', data, event);
        };
    }

 

二、数据

 

 

 

pdf文件下载：

http://download.csdn.net/detail/loneleaf1/8425145