好久没写文章了,看着首页的热力图,有点自愧。

从知乎跳转外链时,都会提示跳转链接地址,以前觉得这样的功能很鸡肋。 但出于对用户的告知,对网站的安全责任的提示,这个功能却又是有必要的。

于是,小搞了一下。

效果图: jump

单个 HTML 代码(index.html): header的css

.box { height: 100vh; background-color: #f4f5f5; }

    .box .tip-box {
      position: absolute;
      left: 50%;
      top: 30%;
      max-width: 624px;
      width: 86%;
      background-color: #fff;
      transform: translateX(-50%);
      padding: 30px 40px 0;
      box-sizing: border-box;
      border: 1px solid #e5e6eb;
      border-radius: 2px;
    }

    .box .tip-box .logo-box .text{
        display: block;
        position: absolute;
        top: -38px;
        left: 36px;
        font-size: 24px;
        font-weight: bold;
    }

    .box .tip-box .logo-box .logo {
      display: block;
      width: 35px;
      height: 35px;
      position: absolute;
      top: -40px;
      left: 0;
    }

    .box .tip-box .content .title {
      font-size: 18px;
      line-height: 24px;
    }

    .box .tip-box .content .link {
      padding: 16px 0 24px;
      border-bottom: 1px solid #e5e6eb;
      position: relative;
      color: gray;
      font-size: 14px;
    }

    .box .tip-box .content .btn {
      display: block;
      margin: 20px 0 24px auto;
      color: #fff;
      border-radius: 3px;
      border: none;
      background: #eea2a4;
      height: 32px;
      font-size: 14px;
      padding: 0 14px;
      cursor: pointer;
      outline: 0;
    }
header的js
  // 获取 url
        var url = "";
        function getTargetURL() {
            console.log(window.location.href)
              var query = window.location.href.split("?")[1] || "";
              var target = query.split("target=")[1] || "";
               url = window.decodeURIComponent(target);
              document.getElementById('target-link').innerHTML = url;
              console.log(url)
        }
        // 跳转页面
        function navigateToTarget() {
              if (!url) {
                return;
              }
              window.location.href = url;
        }
        window.onload = function(){
            getTargetURL(); // 获取 url
        }

    <div class="box">
        <div class="tip-box">
            <div class="logo-box">
                <img                 class="logo"                 src="https://blog.xlap.top/logo.png"               />
              <span class="text">`LapTop
            </div>

    <div class="content">
            <div class="title">
              即将离开 Cheman 的博客,请注意账号财产安全
            </div>
            <div class="link" id="target-link"></div>
            <button class="btn" onclick="navigateToTarget()">`继续访问 `</button>
          </div>
        </div>
      </div>

然后在需要跳转的地方直接拼接地址即可,如:

<a target="_blank" href="https://[GITHUB_PAGE_URL]/index.html?target=xxx"></a>

题外话:

文章技术含量较低,纯属提升活跃度,可略!嘻嘻~