生活服务网站开发,蚌埠网站建设中心,公众号文章排版编辑器,wordpress 地区联动概述
如Gitee等网站#xff0c;在有外部链接的时候如果不是同域则会出现一个确认页面。本文就带你看看这个功能应该如何实现。
效果 实现
1. 实现思路
将打开链接作为参数传递给一个中间页面#xff0c;在页面加载的时候判断链接的域名和当前网站是否同域#xff0c;同域…概述
如Gitee等网站在有外部链接的时候如果不是同域则会出现一个确认页面。本文就带你看看这个功能应该如何实现。
效果 实现
1. 实现思路
将打开链接作为参数传递给一个中间页面在页面加载的时候判断链接的域名和当前网站是否同域同域则直接跳转如果不同域则展示确认页面进行在此确认。如下为跳转页面。
http://localhost:3001/#/link?targethttps://www.baidu.com2. 实现代码
templatediv classlayout-maindiv classlayout-boxp即将跳转到外部网站/pp您将要访问的链接不属于{{ local }}请关注您的账号安全。/pp{{ target }}/ppel-button typewarning clickgoto继续前往/el-button/p/div/div/templatescriptexport 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}}}/scriptstyle langscss 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
