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

2019-10-18

248字 1分钟

假设业务场景：视屏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>