資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 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”的值。
演算法
步驟 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() 函式。
<!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() 等。
729 次瀏覽
