标签：onhashchange URL js url html JS 监听
html位置发生变化监听,用JS实现监听URL地址变化的教程
房东黑黑
于 2021-06-08 11:15:44 发布
1873
收藏 1
文章标签： html位置发生变化监听
最近一直在写单页模版，需要使用 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>
Documentfunction 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);
}
相关资源：js实现无刷新监听URL的变化示例代码详解_js监听地址栏变化,js监听...标签：onhashchange,URL,js,url,html,JS,监听 来源： https://www.cnblogs.com/sexintercourse/p/16318414.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。