JS监听浏览器地址栏URL变化

最新推荐文章于 2024-06-13 17:11:27 发布

原创最新推荐文章于 2024-06-13 17:11:27 发布 · 1.4w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#JS监听URL变化

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

JavaScript

2 篇文章

订阅专栏

本文介绍了一种在网页中根据URL变化控制视频或图片显示的方法，通过监听hashchange事件，检查URL是否为首页，从而决定视频或图片的可见性。

假设业务场景：视屏or图片只在首页展示。
URL格式：http://localhost:4000/page/2/

HTML中实现

<body onhashchange="myFunction()">
</body>
<script>
function myFunction() {
	var href = window.location.href;
	var idx = href.indexOf('page/');
	if(href.substring(idx+5,idx+6)>1){
		//设置视频or图片不可见
	}
}
</script>

JS实现

方式一

if( ('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
	var href = window.location.href;
	var idx = href.indexOf('page/');
	if(href.substring(idx+5,idx+6)>1){
		//设置视频or图片不可见
	}
}

方式二

<script>
document.getElementsById("bd").onhashchange = function() {
	myFunction()
};
function myFunction() {
	var href = window.location.href;
	var idx = href.indexOf('page/');
	if(href.substring(idx+5,idx+6)>1){
		//设置视频or图片不可见
	}
}
</script>

方式三

<script>
window.addEventListener("hashchange", myFunction);
function myFunction() {
    var href = window.location.href;
	var idx = href.indexOf('page/');
	if(href.substring(idx+5,idx+6)>1){
		//设置视频or图片不可见
	}
}
</script>