如何使用 JavaScript 检查 URL 是否包含哈希值？

概述

要使用 JavaScript 检查统一资源定位符 (URL) 是否包含哈希值 (#text)，由于 JavaScript 包含一些预构建的方法，这使得获得特定目标变得非常简单。这可以通过使用 JavaScript 中的 hash 属性来实现，该属性可以通过初始化 window.location 对象来访问。它简化了用户界面，并提供了网页中最主要的导航。

要构建此解决方案，我们需要预先了解以下主题：

  • HTML - 构建页面的骨架。我们将在其中使用内部<script/>标签。

  • HTML 事件 (onclick()、onchange() 等)

  • JavaScript 窗口对象、位置对象、hash 属性。

语法

此程序中使用的基本语法为：

window.location.hash

  • Window - 这是指定 Web 浏览器框架的 JavaScript 对象。它可以处理与您的浏览器相关的方法。窗口的属性可以通过

语法

(window.property/methodName)

  • Location - 它是 window 对象的一个属性，包含有关当前网页 URL 的信息。

语法

window.location.propertyName

  • Hash - 它是 location 对象的一个属性，包含 # 后面的文本。如果 URL 包含“/tutorialspoint/#java”。则 location.hash 将返回“java”的值。

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

算法

  • 步骤 1 - 使用<button>标签创建一个 HTML 按钮

  • 步骤 2 - 在按钮标签<button onclick= “”>中插入onclick事件，并在其中添加函数，例如<button onclick= “checkHash()”>。函数名称是用户定义的，因此您可以根据您的需要进行更改。

  • 步骤 3 - 创建一个 JavaScript 箭头函数checkHash()。

  • 步骤 4 - 使用window对象方法location和 location 方法hash。将 window.location.hash 的结果存储在一个变量中。

  • 步骤 5 - 将变量作为条件传递给 if-else 语句。

  • 步骤 6 - 如果传递给 if-else 的变量为真，则它将返回“找到哈希值”，否则，如果传递的变量为假，则它将返回“未找到哈希值”。

示例

在给定的代码中，它包含一个 HTML 按钮，其中包含“onclick()”事件处理程序，其中给出了 JavaScript 用户定义的函数“checkHash()”。当单击<button>时，将触发 checkHash() 函数。

Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check the Hash in URL</title>
   <style>
      body{
         border: 1px solid black;
         text-align: center;
      }
   </style>
</head>
<body>
   <p>
      <strong> OUTPUT HASH- </strong>   
      <span id="outputVal" style="padding:3px;"> </span>// Output will be shown here 
   </p>
      
   <button onclick="checkHash()">Check URL Hash</button><br>
   <a href="#java">add hash(#) to url</a><br>
   
   <!-- JavaScript function starts from here -->
   
   <script>
      checkHash=()=>{
         var h = window.location.hash;
         if(window.location.hash){
            document.getElementById("outputVal").innerText="Hash found "+h;
            document.getElementById("outputVal").style.background="lightgreen";
         } else {
            document.getElementById("outputVal").innerText="No Hash Found";
            document.getElementById("outputVal").style.background="tomato";
         }
      }
   </script>
   
   <!-- JavaScript function ends here -->
</body>
</html>

单击锚文本后：

在这种状态下，网页的 URL (http://127.0.0.1:3000/index.html) 不包含任何 #text，如以下图像中地址栏所示，因此 window.location.hash 不会在引用的变量中存储任何内容，因此它返回 false，输出为“未找到哈希值”。

单击锚文本后，HTML 属性 href=“#java”的值将与当前 URL 连接，因此 window.location.hash 包含连接的哈希文本“#java”，因此它返回 true，其中包含存储在变量“h”中的哈希名称，并且“h”变量将在 if-else 条件中进行检查，其输出将显示在“outputVal”id 容器内。

结论

单击锚链接时，它会将我们重定向到哈希值内容。

这为用户提供了一个交互式界面，并指引他们前往哈希链接的内容。location 对象还具有许多有益的属性，例如 href、origin、pathname 等。window 对象还提供各种可操纵浏览器的方法，例如 location、history、open()、close() 等。

更新于：2023年2月27日

729 次浏览

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告