資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 HTML 中 URL 的錨點部分發生更改時執行指令碼？
在這篇文章中，我們將學習如何在 HTML 中 URL 的錨點部分發生更改時執行指令碼。
HTML 中的onhashchange 屬性定義為：噹噹前 URL 的錨點部分發生更改時啟用。當前 URL 的 '#' 符號引入錨點部分。當 onhashchange 事件屬性被啟用時，此屬性的單值指令碼將執行。此屬性僅適用於 <body> 標籤。
讓我們深入研究以下示例，以瞭解有關在 HTML 中 URL 的錨點部分發生更改時執行指令碼的更多資訊。
示例
在以下示例中，我們對 <body> 元素使用 onhashchange 屬性。
<!DOCTYPE html>
<html>
<body onhashchange="mytutorial()">
<p>Click To Change The Anchor</p>
<button onclick="tutorial()">Try it</button><br><br><br>
<p id="tutorial1"></p>
<script>
function tutorial() {
location.hash = "Welcome";
var x = "The anchor part is now: " + location.hash;
document.getElementById("tutorial1").innerHTML = x;
}
function mytutorial() {
alert("Changed The Anchor Part");
}
</script>
</body>
</html>
指令碼執行後，它將生成一個輸出，在網頁上顯示文字和一個點選按鈕。
當用戶嘗試單擊按鈕時，事件將被觸發，更改錨點部分並在網頁上顯示警報。
使用 addEventListener() 方法
EventTarget 介面的addEventListener() 方法建立一個函式，該函式將在每次將提供的事件傳送到目標時呼叫。常見的目標包括 Element 或其後代、Document 和 Window，儘管任何支援事件的物件都可以作為目標（例如 XMLHttpRequest）。
示例
在下面，我們使用 onhashchange 屬性以及 addEventListener() 方法。
<!DOCTYPE html>
<html>
<body>
<p>Click Button To Change Anchor Part</p>
<button onclick="tutorial()">Click</button><br><br><br>
<p id="tutorial1"></p>
<script>
function tutorial() {
location.hash = "TUTORIALSPOINT";
var x = location.hash;
document.getElementById("tutorial1").innerHTML = "The anchor part is now: " + x;
}
window.addEventListener("hashchange", mytutorial);
function mytutorial() {
alert("Anchor Part Has Changed!");
}
</script>
</body>
</html>
執行上述指令碼後，輸出視窗彈出並在網頁上顯示文字和按鈕。
如果使用者嘗試單擊按鈕，事件將被觸發，更改錨點部分並在網頁上顯示警報。
更新於：2022-12-16
333 次瀏覽
廣告