在原始 Javascript 中,如何检查 url 中是否存在特定的哈希标记,然后获取该值?
示例:http ://www.example.com/index.html#hashtag1=value1&#hashtag2=value2
我希望能够获取hashtag1或hashtag2的值。
在原始 Javascript 中,如何检查 url 中是否存在特定的哈希标记,然后获取该值?
示例:http ://www.example.com/index.html#hashtag1=value1&#hashtag2=value2
我希望能够获取hashtag1或hashtag2的值。
var HashSearch = new function () {
var params;
this.set = function (key, value) {
params[key] = value;
this.push();
};
this.remove = function (key, value) {
delete params[key];
this.push();
};
this.get = function (key, value) {
return params[key];
};
this.keyExists = function (key) {
return params.hasOwnProperty(key);
};
this.push= function () {
var hashBuilder = [], key, value;
for(key in params) if (params.hasOwnProperty(key)) {
key = escape(key), value = escape(params[key]); // escape(undefined) == "undefined"
hashBuilder.push(key + ( (value !== "undefined") ? '=' + value : "" ));
}
window.location.hash = hashBuilder.join("&");
};
(this.load = function () {
params = {}
var hashStr = window.location.hash, hashArray, keyVal
hashStr = hashStr.substring(1, hashStr.length);
hashArray = hashStr.split('&');
for(var i = 0; i < hashArray.length; i++) {
keyVal = hashArray[i].split('=');
params[unescape(keyVal[0])] = (typeof keyVal[1] != "undefined") ? unescape(keyVal[1]) : keyVal[1];
}
})();
}
使用它:
检查是否存在“哈希键”:
HashSearch.keyExists("thekey");
获取哈希键的值:
HashSearch.get('thekey');
设置哈希键的值,并更新 URL 哈希:
HashSearch.set('thekey', 'hey');
从 URL 中删除哈希键:
HashSearch.remove('thekey');
将哈希重新加载到本地对象中:
HashSearch.load();
将当前键值集推送到 URL 哈希:
HashSearch.push();
请注意,当密钥不存在并且您尝试使用get
它时,它将返回undefined
. 但是,一个键可能没有值存在——例如#key=val&novalue
,novalue 是一个没有值的键。如果你这样做HashSearch.get("novalue")
,它也会返回undefined
。在这种情况下,您应该使用HashSearch.keyExists("novalue")
它来验证它确实是一个密钥。
我用这个,它对我来说很好用。这有点调整我在某处捡到的一条线,我相信 SO。
getURLHashParameter : function(name) {
return decodeURI(
(RegExp('[#|&]' + name + '=' + '(.+?)(&|$)').exec(location.hash)||[,null])[1]
);
},
window.location.hash
应该给你你想要的。
jQuery BBQ(后退按钮和查询)利用 HTML5 hashchange 事件来允许简单但功能强大的可书签 #hash 历史记录。此外,jQuery BBQ 提供了完整的 .deparam() 方法,以及散列状态管理,以及片段/查询字符串解析和合并实用程序方法。
简而言之:该库允许您动态更改页面中的哈希“查询字符串”并匹配 URL。它还允许您动态提取值并规范使用“查询字符串”。最后,它将查询字符串添加到历史记录中,这允许后退按钮用作先前查询哈希值之间的导航。
用户体验的一个好举措是查看像 jQuery BBQ 这样的库:)