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月前
|
Web App开发 API
通过html页面方式访问www.iximo.com的方式(原创)
通过html页面方式访问www.iximo.com的方式(原创)
30 2
|
1月前
404错误页面源码,简单实用的html错误页面模板
小编精心准备一款404错误页面源码,简单实用的html错误页面模板,简单大气的页面布局,可以使用到不同的网站中,相信大家一定会喜欢的
19 2
404错误页面源码,简单实用的html错误页面模板
|
9天前
|
编解码
WordPress页面文件添加html后缀名
wordpress 页面默认不能实现伪静态链接,手动在链接中添加 “.html” ,会自动转码为 “-html” ,但万能的 WordPress,你能想到的功能都会有相应的插件帮你实现。
8 0
文本,Vitepress的优势之处,配合Typora进行页面撰写可以同步设计相同的HTML页面
文本,Vitepress的优势之处,配合Typora进行页面撰写可以同步设计相同的HTML页面
|
13天前
|
JavaScript 前端开发 UED
【源码分享】简单的404 HTML页面示例,该页面在加载时会等待2秒钟,然后自动重定向到首页
【源码分享】简单的404 HTML页面示例,该页面在加载时会等待2秒钟,然后自动重定向到首页
22 0
|
16天前
|
UED
HTML页面定时刷新指南
HTML页面定时刷新指南
18 0
|
17天前
|
前端开发 JavaScript API
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
【前端】三种方法实现HTML页面局部打印(ctrl+p效果)效果
16 0
|
1月前
|
Web App开发 监控 JavaScript
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容 当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。 分为以下几点: 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择 input、textarea 标签内容时 选择类似 &nbsp; 字符时 键盘全选时 鼠标右键选择 以上各模块结合时 当包含标签的时候,返回 html 结构,只有文本时返回文本内容
23 1
|
24天前
|
JavaScript 前端开发 算法
[练习]用Js获取html页面中表单提交的数据并且返回到控制台
[练习]用Js获取html页面中表单提交的数据并且返回到控制台
15 0
|
25天前
|
Java
杨校老师课堂之Html页面快速转为jsp页面之工具类【简直太简单好用】
杨校老师课堂之Html页面快速转为jsp页面之工具类【简直太简单好用】
15 0