我有一些jQuery/JavaScript代码,我想只在URL中有一个散列(#)锚链接时运行。如何使用JavaScript检查这个字符?我需要一个简单的全方位测试,可以检测到如下url:
example.com/page.html #锚 example.com/page.html # anotheranchor
基本上是这样的:
if (thereIsAHashInTheUrl) {
do this;
} else {
do this;
}
我有一些jQuery/JavaScript代码,我想只在URL中有一个散列(#)锚链接时运行。如何使用JavaScript检查这个字符?我需要一个简单的全方位测试,可以检测到如下url:
example.com/page.html #锚 example.com/page.html # anotheranchor
基本上是这样的:
if (thereIsAHashInTheUrl) {
do this;
} else {
do this;
}
当前回答
这是一个简单的方法来测试当前页面的URL:
function checkHash(){
return (location.hash ? true : false);
}
其他回答
你可以使用现代JS解析url:
var my_url = new URL('http://www.google.sk/foo?boo=123#baz');
my_url.hash; // outputs "#baz"
my_url.pathname; // outputs "/moo"
my_url.protocol; // "http:"
my_url.search; // outputs "?doo=123"
没有哈希的url将返回空字符串。
大多数人都知道document.location中的URL属性。如果您只对当前页面感兴趣,那就太好了。但问题在于能否解析页面上的锚,而不是页面本身。
大多数人似乎忽略了这些URL属性也可以用于锚定元素:
// To process anchors on click
jQuery('a').click(function () {
if (this.hash) {
// Clicked anchor has a hash
} else {
// Clicked anchor does not have a hash
}
});
// To process anchors without waiting for an event
jQuery('a').each(function () {
if (this.hash) {
// Current anchor has a hash
} else {
// Current anchor does not have a hash
}
});
我注意到所有这些答案都主要检查window.location.hash,这使得编写测试变得困难。
const hasHash = string => string.includes('#')
你也可以像这样从url中删除散列:
const removeHash = string => {
const [url] = string.split('#')
return url
}
最后你可以把逻辑组合在一起:
if(hasHash(url)) {
url = removeHash(url)
}
位置哈希的简单使用:
if(window.location.hash) {
// Fragment exists
} else {
// Fragment doesn't exist
}
写上以下内容:
<script type="text/javascript">
if (location.href.indexOf("#") != -1) {
// Your code in here accessing the string like this
// location.href.substr(location.href.indexOf("#"))
}
</script>