前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >模仿Gitee实现站外链接跳转时进行确认

模仿Gitee实现站外链接跳转时进行确认

作者头像
lzugis
发布2024-05-24 13:17:52
480
发布2024-05-24 13:17:52
举报

概述

如Gitee等网站,在有外部链接的时候如果不是同域则会出现一个确认页面。本文就带你看看这个功能应该如何实现。

效果

实现

1. 实现思路

将打开链接作为参数传递给一个中间页面,在页面加载的时候判断链接的域名和当前网站是否同域,同域则直接跳转,如果不同域,则展示确认页面进行在此确认。如下为跳转页面。

代码语言:javascript
复制
http://localhost:3001/#/link?target=https://www.baidu.com

2. 实现代码

代码语言:javascript
复制
<template>
    <div class="layout-main">
      <div class="layout-box">
        <p>即将跳转到外部网站</p>
        <p>您将要访问的链接不属于{{ local }},请关注您的账号安全。</p>
        <p>{{ target }}</p>
        <p>
          <el-button type="warning" @click="goto">继续前往</el-button>
        </p>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    computed: {
      isSameDomain() {
        const host = this.local
        const targetHost = new URL(this.target).host
        return host === targetHost
      },
      target() {
        return this.$route.query.target
      },
      local() {
        return window.location.host
      }
    },
    created() {
      if(this.isSameDomain) window.location.href = this.target
    },
    methods: {
      goto() {
        window.location.href = this.target
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  $size: 38rem;
  
  .layout-main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    font-size: 1.2rem;
    background: #efefef;
    padding: 0 calc(50% - $size / 2);
    h3 {
      width: $size;
      text-align: center;
      font-size: 1.8rem;
      margin: 0.5rem 0;
    }
    .layout-box {
      background-color: #ffffff;
      width: $size;
      border-radius: 0.4rem;
      box-shadow: 0.1rem 0.1rem 0.4rem #ccc;
      padding: 1.5rem;
      p {
        margin: 0;
        line-height:2;
        &:first-child {
          font-size: 1.5rem;
          margin-bottom: 1rem;
          line-height: 1;
        }
        &:last-child {
          text-align: right;
        }
      }
    }
  }
  </style>
``
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-03-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • 效果
  • 实现
    • 1. 实现思路
      • 2. 实现代码
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档