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

JavaScript 实现静态 HTML go 页面跳转

目录
[隐藏]

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,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 原来是这样做的啊 :oops:
    风儿2016-01-30 01:22 回复
  2. 这么6
    VectorST2016-01-29 11:47 回复
  3. Super Paxxs
    :shock: 沙发已抢
    Super Paxxs2016-01-28 23:21 回复
×
订阅图标按钮