【js】用html+javascript静态页面实现伪重定向
慕雪年华

javascript代码实现一个伪重定向

1.前言

本站的域名之前有修改过,但一些朋友的友链,和开往里面的链接尚未更新。旧的域名又米有备案,不能解析到国内服务器上用nginx进行30x转发。

这时候我就想到了一招,用js的代码来实现一个url的切换,相当于一个伪重定向。因为是静态文件,能直接部署到netlify等平台上。

百度了一下js是否支持这种语法,嘿,支持!

那不直接开整!

2.代码

关于http的30x状态码,其代表站点域名或路径更改

  • 301重定向:永久
  • 302重定向:临时

html代码部分很简单,设置body和站点标题都为301重定向,告诉访问者,站点已经换了新的域名

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head><title>301 Moved Permanently</title></head>

<body>
<center><h1>301 Moved Permanently</h1></center>
</body>
</html>

script部分,通过window获取当前的域名,判断域名是否为目标域名(下文代码中的旧域名

如果不是,则什么都不做。如果是,则覆盖url到新域名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--放在head后,body前-->
<script>
var path = window.location.href;
console.log("current path:",path)//打印到控制台
// 睡眠函数
function sleep (time) {
return new Promise((resolve) => setTimeout(resolve, time));
}

// 睡500ms,之后执行下面的内容
sleep(500).then(() => {
// 如果url不是预先设定好的这个,则啥都不做
if (path!="旧域名1" && path!="旧域名2") {
console.log("url not match, do nothing")
}
else{// 否则重定向
window.location.replace("https://blog.musnow.top/");
}

})

</script>

这里我还用sleep函数休眠了500ms,否则切换很快,访客不注意的话,还不一定能发现301重定向。


如果你不需要sleep,那代码更少

1
2
3
4
5
6
7
8
9
10
11
<script>
var path = window.location.href;
console.log("current path:",path)
// 如果url不是预先设定好的这两个,则啥都不做
if (path!="旧域名") {
console.log("url not match, do nothing")
}
else{// 否则重定向
window.location.replace("https://blog.musnow.top/");
}
</script>

3.netlify部署

将刚刚写好的代码写入一个index.html文件,再放入一个文件夹(netlify的上传只能上传文件夹)

如果你想,还可以在文件夹里面放一个favicon.ico作为临时的站点logo

打开netlify,找到Add new site,选择手动部署

image

在这里上传文件夹

image

部署好了之后,可以在domain settings里面配置域名为你的旧域名

image

4.测试

先访问旧域名,显示301重定向的信息

image

休眠的时间到了之后,就会被重定向到当前的站点

image

目的达成!

5.添加上尾随参数

如果你的站点有部署umami或者百度统计等访问统计服务,则可以在源码中跳转的链接里面加上来源

1
window.location.replace("https://blog.musnow.top/?utm_source=旧域名");

这样,在访问统计中,就能得知有多少用户用了旧域名访问了你的站点

image