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

javascript代码实现一个伪重定向

1.前言

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

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

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

那不直接开整！

2.代码

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

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

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

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

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

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

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

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

<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的判断

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