html如何携带参数自动跳转页面

简介: 最近有一个项目,跳转页面的时候,不能让用户点击跳转,只能是页面A 自动跳转到页面B,并需要把页面A 的 用户Id :userId ,传递给页面 B。然后在页面B 内 根据传递过来的 用户Id userId 来进行操作:比如页面的刷新之类的。

项目背景:

最近有一个项目,跳转页面的时候,不能让用户点击跳转,只能是页面A 自动跳转到页面B,并需要把页面A 的 用户Id :userId ,传递给页面 B。然后在页面B 内 根据传递过来的 用户Id userId 来进行操作:比如页面的刷新之类的。

实现目的:

为了把页面和用户进行绑定,当页面刷新时,这样就可以了解到是新用户第一次加载的页面,还是老用户第一次刷新的页面。

实现方式

第一步:生成userId

首先,先在页面A :index.html 创建userId 生成代码:

function uuid() {
  var s = [];
  var hexDigits = "0123456789";
  for (var i = 0; i < 9; i++) {
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  }
  s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
  s[8] = s[13] = s[18] = s[23] = "";

  var uuid = s.join("");
  return uuid;
}
var userId = uuid();

第二步:跳转:

window.location.href="comi.html?userId="+userId;

第三步:页面B接收参数

然后在页面B :接收参数,并加个打印日志,方便等会查看参数是否传过来。

var url = decodeURI(location.search); //获取url中"?"符后的字串 ?vm_id=2
var userid;
if(url.indexOf("?") != -1) {
    str = url.substr(1);
    strs = str.split("=");
    userid = strs[1];
}

    console.log("userId==="+userid)

实现结果:

我们来看下实现的具体的效果:

先运行 页面 A :index.html

在这里插入图片描述

运行后,就出现了下面界面,自动跳转到了页面B :comi.html,并且参数也已经传过来了,这样就可以实现页面和用户的绑定。

在这里插入图片描述

实现总结:

这种的跳转方式的实现:对用户来说,是无感的,也就是说用户不知道他先跳到页面A,又跳到页面B,也不需要用户去点击或者操作按钮去跳转,更不需要等待一秒定时自动跳转之类的。对用户非常友好!

值得推荐一下!!

相关文章
|
9天前
超好看的404提示页面HTML源码
超好看的404提示页面HTML源码
119 77
|
13天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
12天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
10天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
59 34
|
5月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
3月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
102 7
|
3月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
95 11
|
3月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
73 2
|
3月前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
106 0
|
3月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
52 0