如何使用 URI 中的 Hash(#) 执行函数？ [复制]

Posted 2023-05-07

【中文标题】如何使用 URI 中的 Hash(#) 执行函数？ [复制]

【英文标题】：How to execute a function with the Hash(#) in URI? [duplicate]

【发布时间】：2018-09-17 07:50:38

【问题描述】：

例如，如果我的 html 页面中有两个名为 func1() 和 func2() 的 js 函数。我的问题是当有人访问/url/to/the/page#tag1 和/或类似地当有人访问/url/to/the/page#tag2 时我如何执行func1() 和/或类似的func2()。

【问题讨论】：

到目前为止你尝试过什么？这似乎很容易

如果有一个名为 window.location.hash 的全局变量并且它是一个函数，则执行它。

【参考方案1】：

这很简单！你可以通过谷歌搜索找到它，但基本上，你只需要使用全局窗口哈希字符串并根据它的值调用你需要的函数：

if(window.location.hash === '#tag1') 
  func1()
 else if (window.location.hash === '#tag2')
  func2()

更新版本：（危险且缓慢）

var number = window.location.hash.split('#tag').pop(); //return 1
if(window.location.hash === '#tag' + number) 
eval("func" + number + "()");

您应该避免使用 eval，因为它会打开安全漏洞，并且可能允许攻击者在用户的机器上运行恶意代码。你可以在MDN docs上阅读更多关于 eval 函数以及为什么你不应该使用它的信息

【讨论】：

如果有20个标签...？

安德烈亚斯是对的，这很糟糕

如果您有 20 个标签来运行 20 个不同的功能，那么您应该在设计上做错了。我没有看到扩展这个的意义，如果你仍然试图做这样的坏事，你最终会使用像 eval() 函数这样的不好的做法，你最终会得到一个非常糟糕的代码，至少可以这么说.

@Andreas 我编辑了 Hamed 的答案，更新了版本，有点动态，我盲目地写了它，但它可以是动态的..

@HamedBaatour 为什么你认为eval 是一种不好的做法？