前言
由于某种原因，我们需要对文章中一些站外链接用站内的 go 页面进行跳转出站，一般用 PHP 都很容易实现，可是由于 GitHub Pages 的局限性，我们只能使用静态 HTML 来实现
废话不说，先贴上 JS 部分的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| function geturl() {
var param = "url"
var query = window.location.search;
var iLen = param.length;
var iStart = query.indexOf(param);
if (iStart == -1) return "";
iStart += iLen + 1;
return query.substring(iStart)
}
function init() {
var url = geturl();
if (url == "") window.location.href = '/';
else window.location.href = url
}
|
接着，我们来详解这段 JS
geturl() 部分
首先，我们得确定一个参数，我们定为url
接着，我们要取出地址中?后面的字符，我们可以直接用window.location.search取出(没想到 JavaScript 中居然有如此狗血的设定)
然后，我们要取出参数的长度，待会会用到
取出后，我们在问号后面那一段文本中寻找参数的起始点
如果找不到参数的起始点，则返回空白
如果找到，则再加上参数的长度和1(等号)，以此定位起始点到等号后面
最后，返回起始点到最后的字符
init() 部分
首先，我们要调用 geturl() 取出 url
接着，我们判断 url 是否为空，如果为空，转跳到主页
如果不为空，则转跳到取出的 url
整个 html
其它地方我就不解释了，css 是扒网上然后修改的
访问go.html?url=网址就可以了
全部代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正在跳转....</title>
<script language="javascript">
function geturl() {
var param = "url"
var query = window.location.search;
var iLen = param.length;
var iStart = query.indexOf(param);
if (iStart == -1) return "";
iStart += iLen + 1;
return query.substring(iStart)
}
function init() {
var url = geturl();
if (url == "") window.location.href = '/';
else window.location.href = url
}
</script>
<style>
body{background:#000}.loading{-webkit-animation:fadein 2s;-moz-animation:fadein 2s;-o-animation:fadein 2s;animation:fadein 2s}@-moz-keyframes fadein{from{opacity:0}to{opacity:1}}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@-o-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}.spinner-wrapper{position:absolute;top:0;left:0;z-index:300;height:100%;min-width:100%;min-height:100%;background:rgba(255,255,255,0.93)}.spinner-text{position:absolute;top:41.5%;left:47%;margin:16px 0 0 35px;color:#BBB;font-family:Microsoft YaHei}.spinner{position:absolute;top:40%;left:45%;display:block;margin:0;width:1px;height:1px;border:25px solid rgba(100,100,100,0.2);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border-left-color:transparent;border-right-color:transparent;-webkit-animation:spin 1.5s infinite;-moz-animation:spin 1.5s infinite;animation:spin 1.5s infinite}@-webkit-keyframes spin{0%,100%{-webkit-transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(720deg) scale(0.6)}}@-moz-keyframes spin{0%,100%{-moz-transform:rotate(0deg) scale(1)}50%{-moz-transform:rotate(720deg) scale(0.6)}}@-o-keyframes spin{0%,100%{-o-transform:rotate(0deg) scale(1)}50%{-o-transform:rotate(720deg) scale(0.6)}}@keyframes spin{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(720deg) scale(0.6)}}
</style>
</head>
<body onload="init()">
<div class="loading">
<div class="spinner-wrapper">
<span class="spinner-text">正在跳转...</span>
<span class="spinner"></span>
</div>
</div>
</body>
</html>
|