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

最新推荐文章于 2024-06-13 17:11:27 发布
最新推荐文章于 2024-06-13 17:11:27 发布
阅读量1.3w 收藏 6
点赞数 2
分类专栏： 前端 JavaScript 文章标签： JS监听URL变化
版权声明：本文 遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。【个人网站： www.andus.top 】
本文链接：https://blog.csdn.net/github_33809414/article/details/102631579
版权

假设业务场景：视屏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>
松林羊
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
监听url变化
沫沫酱
04-26 2946
js部分： <script> var lasturl=window.location.href; function isHashChanged(){ var cururl=window.location.href; if(lasturl ==cururl ){ return false; } return true; } function hashCh...
原生js监听url的变化
半兽先生的博客
03-29 2482
【代码】原生js监听url的变化。
js 监控iframe URL的变化实例代码
10-19
下面小编就为大家带来一篇js 监控iframe URL的变化实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
监听浏览器地址栏的改变
最新发布
weixin_43601701的博客
06-13 241
是否遇到业务代码改变了浏览器地址，并且页面也刷新了，需要找出改变了浏览器地址的代码，做出业务逻辑的调整，但是发现代码逻辑杂乱、罪孽深重，不知从何下手？这时候，我们可以通过监听浏览器地址栏的改变，断点查看调用栈，找到改变地址栏的代码，然后进行调整亲测好用，推荐给大家
html位置发生变化监听,用JS实现监听URL地址变化的教程
weixin_42422285的博客
06-08 7717
最近一直在写单页模版，需要使用 js 来监听浏览器地址栏中 url 地址的变化，并做出相应的改变。而这篇文章就来说一说，使用用 JS 代码来监听浏览器地址栏URL地址的变化的方法。js onhashchange 事件当前的url地址发生改时(锚点部或参数部分)，可以触发 js 中的 onhashchange 事件。以调用都可以触发 js 的 onhashchange 事件1、使用不同书签导航到当前...
js无刷新监听url的变化
weixin_43274097的博客
04-12 1521
原生js监听url变化
用JS实现监听URL地址变化
热门推荐
张二伯的博客
11-03 2万+
有些项目可能会需要监听URL的变化来做出动作，可以使用下边的代码
使用JavaScript修改浏览器URL地址栏的实现代码
10-26
JavaScript提供了一种方式，通过`History`对象的`pushState()`方法来修改浏览器的URL地址栏，而无需刷新页面。这一功能在构建单页应用程序（SPA）时特别有用，因为它可以提供更好的用户体验，同时更新浏览器的历史...
获取浏览器地址栏URL
07-02
在IT行业中，获取浏览器地址栏URL是一项常见的任务，特别是在开发浏览器扩展、自动化测试或数据分析等场景下。本文将深入探讨如何通过枚举和COM组件来实现这一目标，并介绍如何向浏览器添加插件来获取地址栏的URL。 ...
js实现无刷新监听URL的变化示例代码详解
11-20
JavaScript 实现无刷新监听 URL 变化是一种常见的前端开发技术，尤其在单页面应用程序（SPA）中广泛应用。这种技术能够实现在不重新加载整个页面的情况下更新页面内容，从而提高用户体验。本文将详细介绍两种主要...
js制作浏览器的地址栏
01-24
在这个主题中，我们将探讨如何使用JavaScript来创建一个类似于浏览器地址栏的功能，让用户可以输入网址并实现页面跳转。首先，我们需要理解HTML的基本结构，以及JavaScript与HTML之间的交互。 HTML（HyperText ...
详解JavaScript实现监听路由变化
pzpcxy520的博客
02-14 808
通过history的改变,进行js操作加载页面,然而history并不像hash那样简单,因为history的改变,除了浏览器的几个前进后退(使用 history.back(), history.forward()和 history.go() 方法来完成在用户历史记录中向后和向前的跳转。)等操作会主动触发popstate 事件,pushState,replaceState 并不会触发popstate事件。前端实现路由变化主要有两种方式,这两种方式最大特点就是实现URL切换无刷新功能。
【JS】监听URL的hash变化
Regulations的博客
05-04 1277
监听hashchange事件，当hash页面发生变化时调用handleHashChange函数。在页面加载时调用一次handleHashChange函数，以便处理当前路由部分。获取当前的路由部分，例如 'index/index' 定义一个处理函数，用于监听hash页面变化事件。定义一个update函数，用于更新页面内容。调用update函数更新页面内容。如果路由为空，则跳转到默认路由。在这里更新页面内容。更改 h1的内容。
vue监听路由地址的改变的方法
记不住代码的前端混子
03-31 726
router.go(0) 刷新时 内容不刷新的情况（自己用作笔记记录一下）同一个页面下，url携带的参数不一样 使用 this.
如何控制浏览器Url显示、监听Url变化
bug处理进行时
03-10 1644
MDN链接：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/popstate_event。MDN链接：https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState。在点击搜索时，将搜索条件添加到浏览器的URL中，并向历史记录中新增一条数据。基本是一致的，都会在当前浏览器会话中新增一条历史记录。作用：当活动的历史记录发生变化时，将会触发。涉及知识点：浏览器事件。
JavaScript实现监听路由变化
qq_42367749的博客
08-13 4990
前端实现路由变化主要有两种方式，这两种方式最大特点就是实现URL切换无刷新功能 ①通过hash改变，利用window.onhashchange 监听。 ②通过history的改变，进行js操作加载页面，然而history并不像hash那样简单，因为history的改变，除了浏览器的几个前进后退（使用 history.back(), history.forward()和 history.go() 方法来完成在用户历史记录中向后和向前的跳转。）等操作会主动触发popstate 事件，pushState，re.
原生js监听href url路径变化
hzxOnlineOk的博客
12-07 6434
移动端直接使用： function listenHrefChange() { //监听href变化 触发更新图表 window.onhashchange = function () { getMap(orgIdRef.current); }; } PC端如需兼容IE 则使用： //监听触发操作 function hrefChange(){ console.log("url路径产生了变化") } //url变化监听器 if( ('onhashcha..
怎么监听浏览器搜索栏参数变化 并提取出其中的code字段 用js实现
05-27
您好！关于您的问题，可以使用浏览器自带的URLSearchParams对象来获取URL中的参数，然后通过get方法获取需要的参数值。以下是示例代码： ```javascript // 获取URL中的参数 const params = new URLSearchParams(window.location.search); // 通过get方法获取code参数值 const code = params.get('code'); console.log(code); ``` 如果您需要监听URL参数的变化，可以使用window.addEventListener监听hashchange或popstate事件，然后在回调函数中进行相应的处理。以下是示例代码： ```javascript // 监听hashchange事件 window.addEventListener('hashchange', () => { const params = new URLSearchParams(window.location.hash.slice(1)); const code = params.get('code'); console.log(code); }); // 监听popstate事件 window.addEventListener('popstate', () => { const params = new URLSearchParams(window.location.search); const code = params.get('code'); console.log(code); }); ``` 希望能够帮助到您！如果您有其他问题，请随时问我。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值