首页 > 其他分享 >js监视有没有被刷新后跳转其他页面

js监视有没有被刷新后跳转其他页面

时间:2023-07-26 17:36:34浏览次数:34  
标签:跳转 js window location 刷新 go 页面

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来实现在刷新后跳转到另一个页面。这样,您可以在刷新前将信息存储在本地存储中,然后在页面加载时检查是否存在该信息,如果存在,则进行页面跳转。

// 添加事件监听器
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页面里

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

在刷新的页面里

 <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变量。

标签:跳转,js,window,location,刷新,go,页面
From: https://www.cnblogs.com/xxdmua/p/17583090.html

相关文章

  • js字符串数据排序
    results=[{model:'CM201-2'},{model:'CM201-3'},{model:'CM201-6'},{model:'H1Ne-02-1'},{model:'MGV200'},{model:'UNT400G1'},]results.sort((a,b)=>{returna.model.localeCompare(b.model)}); ......
  • 重定向和转发、JSON
     #重定向和转发转发:跳转页面,URL不变重定向:跳转页面,URL变化页面:{视图解析器前缀}+viewName+{视图解析器后缀} ##通过SpringMVC实现-重定向,不需要视图解析器,本质就是重新请求一个新地方-可以重定向到另外一个请求实现```java@ControllerpublicclassRes......
  • Python读写JSON文件的两种方式
    1.把文件读取为字符串,然后转换为json数据(dict格式),loadsanddumps关键点:写入json文件的时候,要指定ensure_ascii参数为False,否则中文编码虽然为utf_8,但仍然无法显示中文,而是\uxxx形式的编码。new_json_string=json.dumps(json_data,ensure_ascii=False)importjsondefr......
  • H5页面中调用微信和支付宝支付
    第一步:先判断当前环境判断用户所属环境,根据环境不同,执行不同的支付程序。if(/MicroMessenger/.test(window.navigator.userAgent)){//alert('微信');}elseif(/AlipayClient/.test(window.navigator.userAgent)){//alert('支付宝......
  • js将数字金额转换成中文金额格式
    在开发中我们经常会遇到处理数字的问题,下面介绍一种处理数字金额转换为中文金额的方式:我们通常使用三种书面数字系统:全球使用的阿拉伯数字系统和两种本地数字系统(繁体、简体)。常规时我们使用阿拉伯数字(1,2,3等),但在某些情况中,如金融中我们会使用繁体汉字来书写数字,繁体字优点是安全......
  • vue 2 接入three.js
    1、安装[email protected]、在vue中引用(可以测试一下,是否ok,下面测试)1)、新建index.jsimport*asTHREEfrom'three';//引入Three.js扩展库import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js';//创建场景varscene=n......
  • arcgis for js 4.x 加载 geoserver WMS WMTS
    arcgisforjs4.x加载geoserverwms代码如下<html><head><metacharset="utf-8"/><metaname="viewport"content="initial-scale=1,maximum-scale=1,user-scalable=no"/><ti......
  • three.js报错依赖,原因:three版本过高
    vue版本"devDependencies":{"webpack":"^3.6.0","webpack-bundle-analyzer":"^2.9.0","webpack-dev-server":"^2.9.1","webpack-merge":"^4.1.0"}&quo......
  • js值Set和Map类使用
    <script>//----------------------------------------------------Set----------------------//Set(集合)是一组唯一值的集合。每个值只能在Set中出现一次。Set可以容纳任何数据类型的值。//创建Setconstletters=newSet(["b","a","c"]);console.log(t......
  • 手机上vue页面返回时如何保持原来的位置
    1,问题的提出采用vue做手机评分页面的前端,页面显示多个评分项的分数和总分。每个评分项有个修改按钮,按下后弹出新的页面,用户填写分数后按提交按钮,则保存数据、关闭页面、回到前一页。此时,页面上显示的分数和总分会刷新,但是显示的页面位置未保留修改前的位置,而是回到了顶部显示。......