html位置发生变化监听,用JS实现监听URL地址变化的教程

最近一直在写单页模版，需要使用 js 来监听浏览器地址栏中 url 地址的变化，并做出相应的改变。而这篇文章就来说一说，使用用 JS 代码来监听浏览器地址栏URL地址的变化的方法。

js onhashchange 事件

当前的url地址发生改时(锚点部或参数部分)，可以触发 js 中的 onhashchange 事件。

以调用都可以触发 js 的 onhashchange 事件

1、使用不同书签导航到当前页面(使用"后退" 或"前进"按钮)

2、点击链接跳转到书签锚

3、通过设置Location 对象 的 location.hash 或 location.href 属性修改锚部分。

js 监听url址改变的方法教程

例1：直接输写方法

js代码：

window.onhashchange = function () {

console.log('URL发生变化了');

};

例2：在html标签中调用

html代码：html>

Document

function myFunction(){

console.log('url地址被改变了');

}

补充说明：

下面是两个网上流行的示例，大家参考一下吧！

1、使用 addEventListener 事件

js代码：

window.addEventListener("hashchange", myFunction);

function myFunction() {

//要实现的逻辑

}

2、带有浏览器是否支持 onhashchange 事件的例子

js代码：

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);

}