資料結構
網路
關係型資料庫管理系統
作業系統
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 次檢視
廣告