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,也不需要用户去点击或者操作按钮去跳转,更不需要等待一秒定时自动跳转之类的。对用户非常友好!

值得推荐一下!!

相关文章
|
2小时前
使用HTML编写注册页面
使用HTML编写注册页面
13 1
|
3小时前
|
移动开发 HTML5
html5初音未来减压页面源码
A Mainland China friendly and independent version extracted from https://aidn.jp/mikutap
87 2
|
2小时前
|
数据采集 前端开发 JavaScript
html 页面里 noscript 标签的作用介绍
html 页面里 noscript 标签的作用介绍
33 0
|
2小时前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
|
3小时前
|
应用服务中间件
Tomcat8.5访问HTML页面出现乱码
Tomcat8.5访问HTML页面出现乱码
51 0
Tomcat8.5访问HTML页面出现乱码
|
2小时前
|
Web App开发 API
通过html页面方式访问www.iximo.com的方式(原创)
通过html页面方式访问www.iximo.com的方式(原创)
15 2
|
2小时前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
2小时前
|
前端开发 测试技术 UED
【专栏:HTML 与 CSS 实战项目篇】实现一个在线产品展示页面
【4月更文挑战第30天】本文介绍了使用HTML和CSS创建吸引人的在线产品展示页面的实战步骤,包括页面设计规划、HTML结构搭建、CSS样式设计、具体页面实现、交互效果添加、优化与提升。通过简洁布局、产品列表和详情页设计,实现易用且具吸引力的展示效果。优化图片和代码,提升性能,以助企业在数字时代脱颖而出。
|
2小时前
|
机器人
机器人飞船404页面模板HTML源码
机器人飞船404页面模板HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
26 5
机器人飞船404页面模板HTML源码
|
2小时前
页面渲染效果图(樱花飘落).html(网上收集 4)
页面渲染效果图(樱花飘落).html(网上收集 4)
页面渲染效果图(樱花飘落).html(网上收集 4)