window.onhashchange事件 - Html

前言

hashchange事件会在浏览器地址的hash值改变时被触发。这是html5新增的一个事件，IE6/IE7及IE8兼容模式不支持onhashchange，但IE8标准模式支持onhashchange。这对于基于ajax开发的web应用程序是非常有用的一个事件，因为ajax请求不能触发浏览器添加新的历史条目，使得“前进”“后退”按钮在ajax开发的应用程序中不能使用。而hashchange事件+隐藏的iframe可以为我们解决这难题

浏览器对hashchange事件的支持

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari	IPHONE	Android
5+	3.6 (1.9.2)+	8.0+(标准模式)	11.60+	5.0+	5.0+	2.2

onchange事件属性

属性	类型	描述
target 只读	EventTarget	浏览器上下文 (window)
type 只读	DOMString	事件类型.
bubbles 只读	boolean	是否允许事件冒泡?（默认可以）
cancelable只读	boolean	是否可以取消事件?（默认不可以）
oldURL 只读	string	前一个URL
newURL 只读	string	新的URL

对于IE6/7不支持hashchange的情况，我们可以使用setInterval不断去读取hash值(location.hash)，判断hash是否发生变化，如果发生变化则调用回调。如下代码：

(function (window) {
        // 检测浏览器是否支持"onhashchange"事件
        // 注意document.documentMode===undefined，这里undefined不能使用字符串""undefined"
        if (!("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7)) {
            var location = window.location, oldURL = location.href, oldHash = location.hash;
            // 每100ms检测hash是否有变化
            setInterval(function () {
                var newURL = location.href, newHash = location.hash;
                // 如果hash有变化则调用onhashchange回调
                if (newHash != oldHash && typeof window.onhashchange === "function") {
                    // 调行回调函数
                    window.onhashchange({
                        type: "hashchange",
                        oldURL: oldURL,
                        newURL: newURL
                    });
                    oldURL = newURL;
                    oldHash = newHash;
                }
            }, 100);
        }
        window.onhashchange = function () {
            alert("location.hash is changed");
        };
    })(this)

location.hash使用注意：

1、IE6会忽略问号部分

如 ../index.html#a?color=#fff ->location.hash返回#a

2、Firefox会对URL进行decodeURIComponent转码

如../index.html#a?name=%22jerman%22” ->location.hash会返回 #a?name=”jerman”

3、使用location时，我们最好使用window.location或不是直接调用location，直接调用location firefox下会检测不到

我们可以使用正则表达式返回一个兼容的hash

function getHash(url){
   var url = url || window.location.href;
   return '#' + decodeURIComponent(url.replace( /^[^#]*#?(.*)$/, '$1' ));
}

参考资料：

https://developer.mozilla.org/en-US/docs/Web/API/Window.onhashchange

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/hashchange