概述
使用 JavaScript 檢查統(tǒng)一資源定位器 (U.R.L.) 是否包含哈希值 (#text)，因?yàn)?JavaScript 包含一些預(yù)構(gòu)建方法，這使得獲得特定目標(biāo)成為一項(xiàng)簡(jiǎn)單的任務(wù)。這可以通過使用 JavaScript 中的 hash 屬性來完成，該屬性可以通過初始化 window.location 對(duì)象來訪問。它簡(jiǎn)化了用戶界面并提供了最重要的網(wǎng)頁(yè)導(dǎo)航。
要構(gòu)建此解決方案，我們需要以下主題的先驗(yàn)知識(shí) –
HTML- 構(gòu)建頁(yè)面的骨架。其中我們將使用內(nèi)部 標(biāo)記。
HTML 事件（onclick()、onchange() 等）
JavaScript 窗口對(duì)象、位置對(duì)象、哈希屬性。
語(yǔ)法
該程序使用的基本語(yǔ)法是 –
window.location.hash
登錄后復(fù)制
Window – 這是指定 Web 瀏覽器框架的 JavaScript 對(duì)象。它可以處理與您的瀏覽器相關(guān)的方法。 windows的屬性可以通過
來訪問
語(yǔ)法：
(window.property/methodName)
登錄后復(fù)制
Location – 它是窗口對(duì)象的一個(gè)??屬性，包含有關(guān)當(dāng)前網(wǎng)頁(yè) URL 的信息。
語(yǔ)法：
window.location.propertyName
登錄后復(fù)制
Hash – 它是包含 # 之后文本的位置對(duì)象的屬性。如果 URL 包含“/tutorialspoint/#java”。然后location.hash將返回值“java”。
算法
第 1 步– 使用 <button> 標(biāo)記
創(chuàng)建 HTML 按鈕
第 2 步– 在按鈕標(biāo)簽 <button onclick=“”> 中插入 onclick 事件，并在其中插入函數(shù)，如<button onclick=“checkHash()”>。函數(shù)名稱是用戶定義的，因此您可以根據(jù)自己的方便進(jìn)行更改。
第 3 步– 創(chuàng)建 JavaScript 箭頭函數(shù) checkHash()。
第 4 步– 使用window對(duì)象方法location和位置方法hash。將 window.location.hash 的結(jié)果存儲(chǔ)在變量中。
第 5 步– 在 if-else 中傳遞變量作為條件。
第 6 步– 如果 if-else 中傳遞的變量為 true，則返回“Hash found”，否則如果傳遞的變量為 false，則返回“Hash not”發(fā)現(xiàn)”。
示例
在給定的代碼中，它包含一個(gè) HTML 按鈕，其中包含“onclick()”事件處理程序，其中給出了 JavaScript 用戶定義函數(shù)“checkHash()”。當(dāng)點(diǎn)擊<button>時(shí)，會(huì)觸發(fā)checkHash()函數(shù)。
<!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>
登錄后復(fù)制
點(diǎn)擊錨文本后 –
在這種狀態(tài)下，網(wǎng)頁(yè)的URL（http://127.0.0.1:3000/index.html）不包含任何#text，如下圖地址欄所示，因此window.location .hash 不會(huì)在引用的變量中存儲(chǔ)任何內(nèi)容，因此它返回 false 并輸出“未找到哈希值。”
點(diǎn)擊錨文本后，HTML屬性href=“#java”的值與當(dāng)前URL連接，因此window.location.hash包含連接后的哈希文本“#java”，因此返回true哈希的名稱存儲(chǔ)在變量“h”中，并且“h”變量將在 if-else 條件下進(jìn)行檢查，其輸出將顯示在“outputVal”id 容器內(nèi)。
結(jié)論
當(dāng)點(diǎn)擊錨鏈接時(shí)，它會(huì)將我們重定向到哈希值內(nèi)容。
這為用戶提供了一個(gè)交互式界面，其中包含指向散列鏈接內(nèi)容的方向。位置對(duì)象還具有許多有利的屬性，例如 href、origin、路徑名等等。 Window 對(duì)象還提供了各種操作瀏覽器的方法，例如位置、歷史記錄、open()、close() 等等。
以上就是如何使用 JavaScript 檢查 URL 是否包含哈希值？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
