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

项目背景：

最近有一个项目，跳转页面的时候，不能让用户点击跳转，只能是页面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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14

第二步：跳转：

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

第三步：页面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)

1
2
3
4
5
6
7
8
9
10

实现结果：

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

先运行 页面 A ：index.html

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

实现总结：

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

值得推荐一下！！