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

javascript 代码实现一个伪重定向

1. 前言

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

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

百度了一下 js 是否支持这种语法，嘿，支持！

那不直接开整！

2. 代码

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

301 重定向：永久
302 重定向：临时

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

html

<!DOCTYPE html>
<html>
<head><title>301 Moved Permanently</title></head>

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

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

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

html

<!--放在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，那代码更少

html

<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>

但是，使用过程中，我就发现访问的 path 有的时候并不是严格等于我的域名的，后面可能会新增一些尾随参数。为了避免有尾随参数而导致无法重定向的问题。我去掉了 if 的判断

html

<script>
	// 301 Moved Permanently
	var path = window.location.href;
    console.log("current path:",path)
    // 睡眠函数
    function sleep (time) {
      return new Promise((resolve) => setTimeout(resolve, time));
    }
    // 睡2000ms,之后执行下面的内容
    sleep(2000).then(() => {
      window.location.replace("https://blog.musnow.top/");
    })

</script>