使用JavaScript监视有没有被刷新后跳转其他页面

 更新时间:2025年01月02日 10:08:04   作者:yjxQWQ  
这篇文章主要为大家详细介绍了如何使用JavaScript监视有没有被刷新后跳转其他页面,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下

js监视有没有被刷新

window.addEventListener('beforeunload', function (event) {
  // 这里可以执行你想要的操作,例如询问用户是否确认离开页面
  window.location.href = 'https://mp.gnek257.autos/DIET/TR/US/LP2/index.html';

})

beforeunload事件处理程序中使用window.location.href重定向到另一个页面是无效的,因为在beforeunload事件中,浏览器会阻止页面的导航操作,以确保用户有机会确认是否离开页面。

beforeunload事件是在页面卸载之前触发的,它主要用于询问用户是否确认离开页面或执行一些紧急的清理操作。然而,如果在beforeunload事件中尝试进行页面重定向,浏览器会阻止这个导航操作,因为在该事件中,用户还没有决定是否要离开页面。

在用户点击刷新按钮时,JavaScript不能直接刷新完当前页面后再跳转到另一个页面,因为浏览器不会在刷新时继续执行其他JavaScript代码。刷新行为会重置页面状态,并中断当前页面上的所有JavaScript执行。

但是,您可以通过使用Session Storage或Local Storage来实现在刷新后跳转到另一个页面。这样,您可以在刷新前将信息存储在本地存储中,然后在页面加载时检查是否存在该信息,如果存在,则进行页面跳转。

highlighter- javascript

// 添加事件监听器
window.addEventListener('beforeunload', function (event) {
  console.log("在这里执行您想要的操作,例如存储信息到本地存储")
  sessionStorage.setItem('refreshed', 'true');
});

// 在页面加载时检查本地存储中的信息
window.addEventListener('load', function () {
  const refreshed = sessionStorage.getItem('refreshed');

  console.log(" 如果本地存储中的信息存在,则进行页面跳转")
  if (refreshed === 'true') {
    // 清除本地存储中的信息,以防止再次触发跳转
    sessionStorage.removeItem('refreshed');

    // 执行页面跳转到另一个页面
    window.location.href = 'https://。。index.html';
  }
});

上面的代码回产生bug 就是我刷新后跳转到index.html 然后我想从index.html点击跳回这个文件 但是这个文件已进入就刷新回去了index.html 保证功能的情况下修改bug

当使用beforeunload事件时,无论是刷新页面还是导航到其他页面,都会触发事件。这是beforeunload事件的特性,它会在用户离开页面之前触发,无论是关闭页面、刷新页面还是导航到其他页面。

go一开始是false 说明这种情况是刷新 刷新进入了另一个页面 另一个页面go是true 说明是跳转 跳转进来后就不能执行load方法了 同时吧go变回false

在index.html页面里

highlighter- ini

window.location.href = 'https://mp.gnek257.autos/DIET/TR/US/LP2/asset/generated.html?Param=' + param+"&go=false";

在刷新的页面里

highlighter- xml

<script>
window.addEventListener('load', function () {
  // 检查 URL 参数中的 go 值,如果是 true,则进行页面跳转
  const urlParams = new URLSearchParams(window.location.search);
  const go = urlParams.get('go');

  if (go === 'true') {
    // 执行页面跳转到另一个页面
    window.location.href = 'https://。。。。index.html';
  }

  // 将 go 设回 false,以便再次跳转
  const newUrlParams = new URLSearchParams(window.location.search);
  newUrlParams.set('go', 'true');
  const newUrl = window.location.pathname + '?' + newUrlParams.toString();
  window.history.replaceState({}, '', newUrl);
});


 </script>

const newUrlParams = new URLSearchParams(window.location.search);: 这一行创建了一个新的URLSearchParams对象,用于获取当前页面URL中的参数部分(即?后面的部分)。

newUrlParams.set('go', 'true');: 这一行将名为go的URL参数设置为true。这样就在URL参数中添加了一个go=true的参数。

newUrlParams.toString();: 这一行将新的URL参数对象转换为字符串,并与当前页面的路径(window.location.pathname)和?拼接,得到新的URL字符串。

window.history.replaceState({}, '', newUrl);: 这一行使用window.history.replaceState方法来替换当前页面的URL。第一个参数{}是一个状态对象,可以为空对象。第二个参数''是新的URL,即替换后的URL,此处使用前面构建好的newUrl变量。

到此这篇关于使用JavaScript监视有没有被刷新后跳转其他页面的文章就介绍到这了,更多相关JavaScript监视有没有被刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 理解js回收机制通俗易懂版

    理解js回收机制通俗易懂版

    这篇文章主要帮助大家更好的理解js回收机制,通俗易懂,便于大家理解,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JS中用try catch对代码运行的性能影响分析

    JS中用try catch对代码运行的性能影响分析

    要捕获JavaScript代码中的异常一般会采用 try catch,不过try catch的使用是否是对代码性能产生影响呢?答案是肯定有的,但是有多少不得而知。下面这篇文章就给大家详细介绍了在JS中用try catch对代码运行的性能影响,有需要的朋友们可以参考借鉴。
    2016-12-12
  • 使用百度地图api实现根据地址查询经纬度

    使用百度地图api实现根据地址查询经纬度

    这篇文章主要介绍了使用百度地图api实现根据地址查询经纬度的方法,附上实例,推荐给有需要的小伙伴们。
    2014-12-12
  • 自己写了一个展开和收起的多更能型的js效果

    自己写了一个展开和收起的多更能型的js效果

    展开和收起这样的效果想必大家早就眼熟了吧,利用闲暇时间用js写了一个具体功能:当自己处于全部显示的时候,点击自己的收起,自己收起等等感兴趣的你可以参考下哈
    2013-03-03
  • 微信小程序实现上传视频功能

    微信小程序实现上传视频功能

    这篇文章主要为大家详细介绍了微信小程序实现上传视频功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • JS实现超炫网页烟花动画效果的方法

    JS实现超炫网页烟花动画效果的方法

    这篇文章主要介绍了JS实现超炫网页烟花动画效果的方法,实例分析了javascript实现烟花动画效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • JavaScript Canvas编写炫彩的网页时钟

    JavaScript Canvas编写炫彩的网页时钟

    这篇文章主要为大家详细介绍了JavaScript Canvas编写炫彩的网页时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 如何减少浏览器的reflow和repaint

    如何减少浏览器的reflow和repaint

    本文主要是结合自己的一些项目经验,给大家提出了几点减少浏览器reflow和repaint的方法和注意事项,希望对大家能有所帮助。
    2015-02-02
  • js正则取值的结果数组调试方法

    js正则取值的结果数组调试方法

    今天小编就为大家分享一篇js正则取值的结果数组调试方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 纯JS开发baguetteBox.js响应式画廊插件

    纯JS开发baguetteBox.js响应式画廊插件

    这篇文章主要介绍了纯JS开发baguetteBox.js响应式画廊插件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06

最新评论