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+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
|
16天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
40 2
|
1月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
33 1
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
43 6
|
27天前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
55 0
|
1月前
|
XML Web App开发 数据格式
HTML 页面显示 XML 数据
10月更文挑战第2天
|
1月前
|
数据可视化 小程序 JavaScript
DIYGW可视化快速生成VUE3静态html页面
DIYGW可视化快速生成VUE3静态html页面
34 0
|
3月前
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)