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

news/2024/5/26 21:16:00/文章来源:https://blog.csdn.net/GISShiXiSheng/article/details/136519308

概述

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

效果

image.png

实现

1. 实现思路

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

http://localhost:3001/#/link?target=https://www.baidu.com

2. 实现代码

<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.localconst targetHost = new URL(this.target).hostreturn 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>
``

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1005935.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity3d C#实现文件(json、txt、xml等)加密、解密和加载(信息脱敏)功能实现(含源码工程)

前言 在Unity3d工程中经常有需要将一些文件放到本地项目中&#xff0c;诸如json、txt、csv和xml等文件需要放到StreamingAssets和Resources文件夹目录下&#xff0c;在程序发布后这些文件基本是对用户可见的状态&#xff0c;造成信息泄露&#xff0c;甚至有不法分子会利用这些…

oracle linux7.9(centos7.9)安装nvidia GPU显卡驱动

一.业务场景 公司服务器配置了nvidia GPU显卡&#xff0c;安装的是oracle linux7.9操作系统&#xff0c;以下是安装GPU显卡驱动的操作。 二.GPU显卡驱动的前安装步骤 1.安装前的依赖软件的安装 yum -y install epel-release kernel-devel dkms gcc备注&#xff1a;利用unam…

MySQL通过SQL语句进行递归查询

这里主要是针对于MySQL8.0以下版本&#xff0c;因为MySQL8.0版本出来了一个WITH RECURSIVE函数专门用来进行递归查询的 先看下表格数据&#xff0c;就是很普通的树结构数据&#xff0c;通过parentId关联上下级关系 下面我们先根据上级节点id递归获取所有的下级节点数据&#x…

day02vue学习

day02 一、今日学习目标 1.指令补充 指令修饰符v-bind对样式增强的操作v-model应用于其他表单元素 2.computed计算属性 基础语法计算属性vs方法计算属性的完整写法成绩案例 3.watch侦听器 基础写法完整写法 4.综合案例 &#xff08;演示&#xff09; 渲染 / 删除 / 修…

【性能测试】移动测试md知识总结第1篇:移动端测试课程介绍【附代码文档】

移动测试完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;移动端测试课程介绍&#xff0c;移动端测试知识概览&#xff0c;移动端测试环境搭建&#xff0c;ADB常用命令学习主要内容,学习目标,学习目标,1. window安装andorid模拟器,学习目标。主流移动端自动…

springboot的maven多模块如何混淆jar包

springboot的maven多模块如何混淆jar包 一.简介二. 示例2.1 基本配置2.2 结果 三. 错误3.1 错误13.2 错误2 四. 参考文章 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 一.简介 …

【C语言】字符串函数上

&#x1f451;个人主页&#xff1a;啊Q闻 &#x1f387;收录专栏&#xff1a;《C语言》 &#x1f389;道阻且长&#xff0c;行则将至 前言 这篇博客是字符串函数上篇&#xff0c;主要是关于长度不受限制的字符串函数&#xff08;strlen,strcpy,strcat,strcm…

比特币创造历史新纪录

综合来源&#xff1a;coindesk and cointelegraph 编译&#xff1a;秦晋 3月11日&#xff0c;比特币在亚洲交易时段首次突破71,000美元&#xff0c;这个是比特币创造的价格新纪录。自1月11日比特币现货ETF在美国获批以来&#xff0c;比特币一直在稳步上涨。以太币突破4000美元。…

计算机基础:一些你必须知道的名词详解,必须要会的理论知识

软件测试 计算机基本特点 计算机硬件组成 内存储器和外存储器特点 计算机软件系统组成 常见的操作系统软件 编码 计算机数据计量单位 浏览器 图片类型 网页打开过程 客户端、服务器、请求和响应 dos 命令 软件测试 在规定的条件下对程序进行操作&#xff0c;以发现…

反无人机电子护栏:原理、算法及简单实现

随着无人机技术的快速发展&#xff0c;其在航拍、农业、物流等领域的应用日益广泛。然而&#xff0c;无人机的不规范使用也带来了安全隐患&#xff0c;如侵犯隐私、干扰航空秩序等。为了有效管理无人机&#xff0c;反无人机电子护栏技术应运而生。 目录 一、反无人机电子护栏…

wayland(xdg_wm_base) + egl + opengles 渲染使用纹理贴图的旋转 3D 立方体实例(十三)

文章目录 前言一、使用 stb_image 库加载纹理图片1. 获取 stb_image.h 头文件2. 使用 stb_image.h 中的相关接口加载纹理图片3. 纹理图片——cordeBouee4.jpg二、渲染使用纹理贴图的旋转 3D 立方体1. egl_wayland_texture_cube.c2. Matrix.h 和 Matrix.c3. xdg-shell-client-pr…

学习网络编程No.13【网络层IP协议理解】

引言&#xff1a; 北京时间&#xff1a;2024/3/5/8:38&#xff0c;早六加早八又是生不如死的一天&#xff0c;不过好在喝两口热水提口气手指还能跳动。当然起关键性作用的还是思维跟上了课程脑袋较为清晰&#xff0c;假如是听学校老师在哪里磨过来磨过去&#xff0c;那我倒头就…

【Greenhills】MULTIIDE集成第三方的编辑器进行源文件编辑工作

【更多软件使用问题请点击亿道电子官方网站查询】 1、 文档目标 在使用GHS进行工作的时候&#xff0c;可以集成第三方的编辑器进行源文件编辑工作 2、 问题场景 用于解决在GHS中进行项目开发时&#xff0c;对于GHS的编辑器使用不习惯&#xff0c;想要切换到其他第三方的编辑…

sizeof容易出错的地方

今天写代码&#xff0c;遇到一个bug&#xff0c;我自己也调试了比较久 简单来说&#xff0c;就是我想封装一个比较字符串的函数 然后这个函数里面调用memcmp函数去实现 #include<stdio.h> #include <stdbool.h> #define CONSTANT_STR "root:x:0:0:root:/root…

24计算机考研调剂 | 上海海事大学

上海海事大学 考研调剂招生信息 学校:上海海事 专业:工学->环境科学与工程 年级:2024 招生人数:5 招生状态:正在招生中 联系方式:********* (为保护个人隐私,联系方式仅限APP查看) 补充内容 上海海事大学-海洋环境专业-招收环境、能源、遥感地信、计算机等相关专业调…

【DDR】DDR4学习记录

这里以美光DDR4芯片 MT40A512M16HA-075E datasheet 为例&#xff0c;说明DDR4存储器的原理及仿真。   根据开发板手册ug1302&#xff0c;在vcu128&#xff08;xcvu37p&#xff09;开发板上&#xff0c;共具有5块DDR4芯片&#xff0c;在数据信号上4块DDR4具有16位数据线&#…

【PHP+代码审计】PHP基础——流程控制

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…

爬虫入门到精通_框架篇15(Scrapy框架安装)

1 Scrapy安装 Scrapy的安装有多种方式&#xff0c;它支持Python2.7版本及以上或Python3.3版本及以上。下面说明Python3环境下的安装。 Scrapy依赖的库比较多&#xff0c;至少需要依赖库有Twisted14.0,lxml 3.4,pyOpenSSL 0.14。而在不同平台环境又各不相同&#xff0c;所以在安…

webpack5零基础入门-3使用webpack处理样式资源

1.不使用css-loader直接进行打包 1.1创建css文件 .red{color: red; } 在main.js中引入(不进行引入不会进行打包&#xff0c;因为打包的入口是main.js) import sum from "./js/sum"; import count from "./js/count"; //要想webpack打包资源&#xff0c;…

安卓项目:app注册/登录界面设计

目录 第一步&#xff1a;设计视图xml 第二步&#xff1a;编写登录和注册逻辑代码 运行效果展示&#xff1a; 总结&#xff1a; 提前展示项目结构&#xff1a; 第一步&#xff1a;设计视图xml 在layout目录下面创建activity_login.xml和activity_main.xml文件 activity_lo…