桥山之巅,姬水之畔

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

2019.10.18

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