国产视频app 最近一直在寫單頁模版,需要使用 js 來監聽瀏覽器地址欄中 url 地址的變化,并做出相應的改變。而這篇文章就來說一說,使用用 JS 代碼來監聽瀏覽器地址欄URL地址的變化的方法。

js onhashchange 事件

當前的url地址發生改時(錨點部或參數部分),可以觸發 js 中的 onhashchange 事件。

以調用都可以觸發 js 的 onhashchange 事件

国产视频app 1、使用不同書簽導航到當前頁面(使用"后退" 或"前進"按鈕)

2、點擊鏈接跳轉到書簽錨

3、通過設置Location 對象 的 location.hash 或 location.href 屬性修改錨部分。

js 監聽url址改變的方法教程

例1:直接輸寫方法

js代碼:

<script>
window.onhashchange = function () {
    console.log('URL發生變化了');
};
</script>

例2:在html標簽中調用

html代碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onhashchange="myFunction()">
<script>
function myFunction(){
    console.log('url地址被改變了');
}
</script>    
</body>
</html>

補充說明:

国产视频app 下面是兩個網上流行的示例,大家參考一下吧!

1、使用 addEventListener 事件

js代碼:

<script>
window.addEventListener("hashchange", myFunction);
function myFunction() {
    //要實現的邏輯
}
</script>

2、帶有瀏覽器是否支持 onhashchange 事件的例子

js代碼:

<script>
function hashChangeFire() {
    //url改變,調用邏輯
}
// 判斷瀏覽器是否支持onhashchange事件
if (('onhashchange' in window) && ((typeof document.documentMode === 'undefined') || document.documentMode == 8)) {
    window.onhashchange = hashChangeFire;  
} else {
    // 如瀏覽器不支持onhashchange事件,則用定時器檢測的辦法
    setInterval(function () {
        // isHashChanged() 為要檢測url是否被改變的函數
        var ischanged = isHashChanged();
        if (ischanged) {
            hashChangeFire(); //如被改變,設用函數
        }
    }, 150);
}
</script>