【js】用html+javascript静态页面实现伪重定向
javascript代码实现一个伪重定向
1.前言
本站的域名之前有修改过,但一些朋友的友链,和开往里面的链接尚未更新。旧的域名又米有备案,不能解析到国内服务器上用nginx进行30x转发。
这时候我就想到了一招,用js的代码来实现一个url的切换,相当于一个伪重定向。因为是静态文件,能直接部署到netlify等平台上。
百度了一下js是否支持这种语法,嘿,支持!
那不直接开整!
2.代码
关于http的30x状态码,其代表站点域名或路径更改
- 301重定向:永久
- 302重定向:临时
html代码部分很简单,设置body和站点标题都为301重定向,告诉访问者,站点已经换了新的域名
1 |
|
script
部分,通过window
获取当前的域名,判断域名是否为目标域名(下文代码中的旧域名
)
如果不是,则什么都不做。如果是,则覆盖url到新域名。
1 | <!--放在head后,body前--> |
这里我还用sleep函数休眠了500ms,否则切换很快,访客不注意的话,还不一定能发现301重定向。
如果你不需要sleep,那代码更少
1 | <script> |
3.netlify部署
将刚刚写好的代码写入一个index.html
文件,再放入一个文件夹(netlify的上传只能上传文件夹)
如果你想,还可以在文件夹里面放一个favicon.ico
作为临时的站点logo
打开netlify,找到Add new site,选择手动部署
在这里上传文件夹
部署好了之后,可以在domain settings里面配置域名为你的旧域名
4.测试
先访问旧域名,显示301重定向的信息
休眠的时间到了之后,就会被重定向到当前的站点
目的达成!
5.添加上尾随参数
如果你的站点有部署umami或者百度统计等访问统计服务,则可以在源码中跳转的链接里面加上来源
1 | window.location.replace("https://blog.musnow.top/?utm_source=旧域名"); |
这样,在访问统计中,就能得知有多少用户用了旧域名访问了你的站点
- 本文标题:【js】用html+javascript静态页面实现伪重定向
- 创建时间:2023-03-10 19:50:31
- 本文链接:posts/1472038549/
- 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!