• 作者:SuperPaxxs扶摇直上九万里,绝云气,负青天,不知图哪了,正在努力搜索中...
    • 请使用 Chrome、Firefox 等现代浏览器浏览本站。有事 点击这里 联系博主
    • 想在魔帆博客投稿? 点击这里 联系博主
    • [ 既然来了就多看两篇文章嘛,你好意思走么? ]
    • 如果您觉得本站非常有看点,那么赶紧使用 Ctrl + D 收藏魔帆博客吧

JavaScript 实现静态 HTML go 页面跳转

技术教程 chenjunyu19 14060次浏览 已收录 4个评论

JavaScript 实现静态 HTML go 页面跳转

前言

由于某种原因,我们需要对文章中一些站外链接用站内的 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>


转自: chenjunyu19 的小站


魔帆博客 , 版权所有丨如未注明 , 均为原创丨本网站均采用BY-NC-SA协议进行授权 , 转载请注明JavaScript 实现静态 HTML go 页面跳转
喜欢 (6)
[]
分享 (0)
关于作者:
一只爱好计算机爱玩 Minecraft 的高中狗。兼本站运维?
发表我的评论
取消评论

表情 加粗 删除线 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 有插件吗,感觉不会改
    精斑试纸2018-03-29 15:36 回复
  2. 原来是这样做的啊 :oops:
    风儿2016-01-30 01:22 回复
  3. 这么6
    VectorST2016-01-29 11:47 回复
  4. :shock: 沙发已抢
    Super Paxxs2016-01-28 23:21 回复