前言
由于某种原因,我们需要对文章中一些站外链接用站内的 go 页面进行跳转出站,一般用 PHP 都很容易实现,可是由于 GitHub Pages 的局限性,我们只能使用静态 HTML 来实现
废话不说,先贴上 JS 部分的代码
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=网址
就可以了
全部代码:
<!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>