如何在 URL 中出现 # 时调用 javascript 函数

Question

我试图在 URL 中出现 # 时调用 JavaScript 函数。我知道正常行为是导航/滚动到特定标签。但是找不到如何调用 JavaScript 函数。

下面的例子很接近，但没有解决我的问题。

What is the meaning of # in URL and how can I use that?

Answer 1

var hash = window.location.hash;
if(hash){
// do something
}

Answer 2

<script>
  if (window.location.href.includes('#')) {
    // run your code here
  }
</script>

Answer 3

使用 location.hash 函数将解决您的问题

var hash = window.location.hash.replace(/#/g, '');
if(hash){
// found a hash
console.log("heyy I found a hash")'
}
else{
// did not find a hash
console.log("Uh oh")
/*
  try using :
  window.location = window.location + '#' + "some random variable"
  to create a new URL and every time the page loads find the hash and 
  display the wanted data.
*/
}

PS：这仅在您的 URL 类似于 example.com/#xyz 时有效然后它会给你 xyz 作为控制台输出。这听起来可能含糊不清，但如果你这样做，你可能会有一个想法

Answer 4

您可以利用 hashchange 事件来触发函数，假设您不想继续轮询位置以查看它是否发生变化。

文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/hashchange_event

此代码片段会将侦听器添加到当前页面，然后操作哈希并触发函数，显示新的哈希值。您可以在这里调用任何函数。

window.addEventListener('hashchange', function() {
    alert(location.hash);
});

window.location += "#test";

如何在 URL 中出现 # 时调用 javascript 函数

How to invoke javascript function when # is present in URL

html

javascript

anchor