Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >借鉴QQ邮箱URL跳转页面

借鉴QQ邮箱URL跳转页面

作者头像
Dabenshi
发布于 2024-04-03 01:30:58
发布于 2024-04-03 01:30:58
38600
代码可运行
举报
文章被收录于专栏:DabenshiDabenshi
运行总次数:0
代码可运行

近期无意间看到林羽凡大佬的一篇博文《跳转页面》感觉挺有意思,联想到“QQ邮件里面的链接,打开会有安全提醒”灵光一闪,果断操作起来。可以先看看QQ邮箱页面跳转源代码(这里就不贴了,其实看不看都行!可以直接看正文源代码

借鉴后的成品(虽然达到需求了,但细节上完全可以深度优化一下,去掉一些没用的,我比较懒 哈哈)其实很简单,照猫画虎即可。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?php
global $link_head;
global $link_time;
$ref = $_SERVER["HTTP_REFERER"];
?>
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
	<title>即将跳转</title>
	<style>
		/* common */
		td,
		input,
		button,
		select,
		body {
			font-family: "lucida Grande", Verdana;
			font-size: 12px;
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			font-size: 12px;
			font-weight: normal;
			margin: 0;
		}

		ul,
		li {
			list-style: none;
		}

		input,
		textarea,
		a {
			outline: none;
		}

		form,
		body,
		ul,
		li {
			margin: 0;
			padding: 0;
		}

		select,
		body,
		textarea {
			background: #fff;
			font-size: 12px;
		}

		select {
			font-weight: normal;
			font-size: 12px;
			font-family: Tahoma;
			line-height: 20px;
		}

		textarea {
			width: 540px;
			border: 1px solid #718da6;
			padding: 3px;
			font-family: "lucida Grande", Verdana;
		}

		img {
			border: none
		}

		body {
			padding: 0 30px;
		}

		a {
			text-decoration: none;
			cursor: pointer;
			outline: none;
		}

		a:hover {
			text-decoration: underline;
		}

		a,
		a:link,
		a:visited,
		li.fs a.fdleft:hover,
		li.fd_mg a.fdleft:hover {
			color: #1e5494;
		}

		a.btn_blue {
			display: inline-block;
			_overflow: hidden;
			padding: 6px 25px;
			margin: 0;
			font-size: 14px;
			font-weight: bold;
			text-align: center;
			border-radius: 3px;
		}

		a.btn_blue:focus,
		a.btn_red:focus,
		a.btn_gray:focus {
			border-color: #93d4fc;
			box-shadow: 0 0 5px #60caff;
		}

		a.btn_blue:active,
		a.btn_red:active,
		a.btn_gray:active {
			outline: none;
		}

		a.btn_blue {
			border: 1px solid #0d659b;
			color: #fff;
			color: #fff !important;
			background-color: #238aca;
			background: -moz-linear-gradient(top, #238aca, #0074bc);
			background: -webkit-linear-gradient(top, #238aca, #0074bc);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#238aca', endColorstr='#0074bc');
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#238aca', endColorstr='#0074bc')";
		}

		a.btn_blue:hover {
			text-decoration: none;
			background-color: #238aca;
			background: -moz-linear-gradient(top, #2a96d8, #0169a9);
			background: -webkit-linear-gradient(top, #2a96d8, #0169a9);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a96d8', endColorstr='#0169a9');
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a96d8', endColorstr='#0169a9')";
		}

		a.btn_blue:active {
			background-color: #238aca;
			background: -moz-linear-gradient(top, #0074bc, #238aca);
			background: -webkit-linear-gradient(top, #0074bc, #238aca);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0074bc', endColorstr='#238aca');
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0074bc', endColorstr='#238aca')";
		}

		.hide {
			visibility: hidden;
		}

		/* remind_block 带icon的消息提示块 */
		.remind_block {
			overflow: hidden;
		}

		.remind_block .remind_icon {
			float: left;
			margin-right: 10px;
			width: 32px;
			height: 32px;
			background: url(https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/newicon/prompt3bcbca.png) no-repeat;
		}

		.remind_block .remind_content {
			overflow: hidden;
			*zoom: 1;
		}

		.remind_block .remind_title {
			margin-bottom: 10px;
			padding-top: 3px;
			_margin-top: 4px;
			font-weight: bold;
			font-size: 20px;
			font-family: "Microsoft YaHei", "lucida Grande", Verdana;
		}

		.remind_block .remind_detail {
			line-height: 1.5;
			font-size: 14px;
			color: #535353;
		}

		.remind_block.notitle .remind_content {
			padding-top: 8px;
		}

		.error .remind_icon {
			background-position: -256px top;
		}

		.error .remind_title {
			color: #cc0000;
		}

		.warning .remind_icon {
			background-position: -64px 0;
		}

		.warning .remind_title {
			color: #d68300;
		}

		/* layout */
		.container {
			max-width: 640px;
			margin: 0 auto;
			padding-top: 25px;
		}

		.header {
			margin-bottom: 5px;
		}

		.footer {
			margin-top: 18px;
			text-align: center;
			color: #a0a0a0;
			font-size: 10px;
		}

		.content {
			border: 1px solid #bbb;
			box-shadow: 0 0 3px #d4d4d4;
		}

		.c-container {
			padding: 30px;
		}

		.c-footer {
			padding: 10px 15px;
			background: #f1f1f1;
			border-top: 1px solid #bbb;
			overflow: hidden;
			*zoom: 1;
		}

		.c-footer-a1,
		.c-footer-a2,
		.c-footer-a3 {
			float: left;
		}

		.c-footer-a2 {
			margin: 8px 0 0 15px;
		}

		/* page */
		.safety-detail {
			font-size: 12px;
			margin-top: 10px;
			padding-bottom: 60px;
			-webkit-transition: padding 0.2s ease-in;
			-moz: padding 0.2s ease-in;
			transition: padding 0.2s ease-in;
		}

		.safety-detail.show .safety-icon-arrow {
			background-position: right top;
			-webkit-transform: rotate(180deg);
			-moz-transform: rotate(180deg);
			transform: rotate(180deg);
		}

		@media screen and (-webkit-min-device-pixel-ratio:0) {
			.safety-detail.show .safety-icon-arrow {
				background-position: right -18px;
			}
		}

		@-moz-document url-prefix() {
			.safety-detail.show .safety-icon-arrow {
				background-position: right -18px;
			}
		}

		.safety-detail.show .safety-detail-txt {
			/*visibility:visible;*/
			height: 60px;
		}

		.safety-icon-arrow {
			display: inline-block;
			*display: inline;
			*zoom: 1;
			width: 12px;
			height: 12px;
			margin: 0 0 2px 4px;
			*margin: 2px 0 0 4px;
			line-height: 12px;
			vertical-align: middle;
			background: url(https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/safety_arrow513f4c.png) no-repeat right -18px;
			-webkit-transform: rotate(0deg);
			-webkit-transition: -webkit-transform .3s ease-in;
			-moz-transform: rorate(0deg);
			-moz-transition: -moz-transform .3s ease-in;
			transform: rotate(0deg);
			transition: transform .3s ease-in;
		}

		.safety-detail-txt {
			margin-top: 6px;
			line-height: 20px;
			color: #a0a0a0;
			/*visibility:hidden;*/
			height: 0;
			overflow: hidden;
			-webkit-transition: height 0.2s ease-in;
			-moz: height 0.2s ease-in;
			transition: height 0.2s ease-in;
		}

		.safety-url {
			margin-bottom: 15px;
			padding-bottom: 15px;
			border-bottom: 1px solid #dfdfdf;
			word-wrap: break-word;
			word-break: break-all;
		}

		.ico_Avira {
			display: inline-block;
			width: 12px;
			height: 13px;
			_font-size: 12px;
			margin: 0 2px -2px 0;
			background: url(https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/newicon/mail4788ca.png) scroll -48px -208px no-repeat;
			background-image: -webkit-image-set(url(https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/newicon/mail4788ca.png) 1x, url(https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/newicon/mail@2X3bcbca.png) 2x);
		}

		@media only screen and (-webkit-min-device-pixel-ratio: 2),
		only screen and (min-device-pixel-ratio: 2) {
			.remind_block .remind_icon {
				background-image: -webkit-image-set(url(https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/newicon/prompt3bcbca.png) 1x, url(https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/newicon/prompt@2X3bcbca.png) 2x);
			}
		}

		.show {
			padding-bottom: 0;
		}

		@media (max-width: 420px) {
			.remind_icon {
				display: none;
			}
		}
	</style>
</head>

<body>
	<div class="container">
		<!--<div class="header">
		<img width="92" height="31" src="https://rescdn.qqmail.com/zh_CN/htmledition/images/webp/safety_logo513f4c.png" />
	</div>-->
		<div class="content">
			<div class="c-container warning">
				<div id="remind_block" class="remind_block"> <span class="remind_icon"></span>
					<div class="remind_content">
						<div class="remind_title">您将要访问:</div>
						<div class="remind_detail">
							<div class="safety-url">
								<?=$link_head?>
							</div>请注意!我们无法确认该网页是否安全,它可能包含未知的安全隐患。
							<div id="detail_container" class="safety-detail">
								<div><a id="detail_toggle" class="safety-detail-action" href="jаvascript:;">详细信息<span
											class="safety-icon-arrow"></span></a>
								</div>
								<div class="safety-detail-txt">
									我们无法确认该网页是否安全,它可能包含未知的安全隐患,或未知链接。为了保护安全,请不要在该网页输入您的密码、密保资料等信息。
									<br /> <a href="<?=$link_head?>">我认为这是安全网页</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="c-footer"> <a href="<?=$link_head?>" rel="nofollow" class="c-footer-a1 btn_blue">继续访问</a><a
					class="c-footer-a2" onclick="closeURLWindow()">关闭网页</a>
			</div>
		</div>
		<div class="footer">&copy;&nbsp;2016&nbsp;-&nbsp;2024&nbsp;Dabenshi&nbsp;Inc.&nbsp;All&nbsp;Rights&nbsp;Reserved
		</div>
	</div>
	<script type="text/jаvascript">
		function myHtmlDecode(_asStr) {
			return _asStr && _asStr.replace ? (_asStr.replace(/&nbsp;/gi, " ").replace(/&lt;/gi, "<").replace(/&gt;/gi,
				">")
				.replace(/&amp;/gi, "&").replace(/&quot;/gi, "\"").replace(/&#39;/gi, "'")) : _asStr;
		}

		function report(result) {
			(new Image).src = (
				'' +
				result);
		}

		function goUrl(type) {
			report(type == 1 ? 0 : 1);
			var sUrl = myHtmlDecode('');
			if (sUrl && !/^(http|https):\/\//ig.test(sUrl)) {
				sUrl = ["http://", sUrl].join("");
			}
			setTimeout(function () {
				window.location.replace(sUrl)
			}, 50);
		}

		function closeURLWindow() {
			report(2);
			setTimeout(function () {
				window.close();
			}, 80);
		}

		function goSafe() {
			report(9);
			setTimeout(function () {
				window.open('http://pc.qq.com/cgi-bin/jump?oid=6000196');
			}, 50);
		}
		window.onload = function () {
			report(10);
			var detailContainer = document.getElementById("detail_container");
			var detailToggle = document.getElementById("detail_toggle");
			var container = document.getElementById("remind_block");
			var containerClassName = "safety-detail";
			if (detailToggle) {
				detailToggle.onclick = function () {

					var offsetHeight = container.offsetHeight;
					if (offsetHeight) {
						container.style.height = container.offsetHeight + 'px';
					}

					if (detailContainer.className.indexOf("show") > -1) {
						detailContainer.className = containerClassName;
					} else {
						detailContainer.className = containerClassName + " show";
					}
				}
			}
		}
	</script>
</body>

</html>

写在最后,可能会有人问了,在哪里能看到这个页面?答:在需要跳转时会展现这个页面,比如点击评论区的用户名会进行链接跳转。当然了与本站有友情链接的小伙伴不会被“拦截提示”,统统放行😉

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-03-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
WordPress纯代码外链跳转效果的3款样式免费分享
前面给大家讲了WordPress怎么利用纯代码实现WordPress的外链跳转效果,今天给大家分享几款跳转样式。
于飞云计算
2019/06/26
1.7K0
WordPress纯代码外链跳转效果的3款样式免费分享
简约商务风格登录页H5【源码】
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Login Form</title> <style type="text/css"> .btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333
小黑同学
2020/11/24
5130
纯CSS设计按钮
完全兼容不支持css3的浏览器,若不兼容css3,则显示没有渐变和阴影的普通按钮。
Petterp
2022/02/09
1.1K0
酷炫的progressbar(上限可大于100%)
引用 <link rel="stylesheet" type="text/css" href="./index.css"> <div id="progress"></div> <script type
lonelydawn
2018/02/09
1K0
酷炫的progressbar(上限可大于100%)
CSS好看的按钮
好看的按钮 <style> .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BO
欢醉
2018/01/22
2.6K0
【解疑答惑】css中经常被忽略的代码陷阱
css大家都认为是很简单东西,但是是代码就有让人头疼的时候,只是多少的问题,伴着小编走过的路,在前端多少也滚了一些坑,今天为了方便后来者,把收集到的东西跟大家分享一下,有需要的朋友可以当作参考,希望对各位盟友有帮助: 一. css 2.x code 1. 文字换行 /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单词断行*/ word-break:break-all; 2. 两
程序员互动联盟
2018/03/13
6950
WordPress如何添加GO域名安全跳转教程
出于优化 SEO,或是出于加强网站安全又或许用户体验,很多博客都给文章中的外部链接加上了个二次跳转,本站也添加了GO跳转,因为这样可以给访问你网站的用户加强一下安全意识。
七辰
2023/10/05
8750
css 常用代码分享
3. 去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框
用户7705674
2021/09/22
9800
WordPress网站如何实现一键复制(附JS代码)
WordPress网站添加一键复制指定内容,方法其实很简单,给大家分享一个通过JS代码实现一键复制指定内容的教程。
主机教程网2bcd.com
2022/09/03
2.3K0
60个非常实用的CSS代码片段,千万要收藏好了!
如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:
winty
2020/06/22
1.6K0
60个非常实用的CSS代码片段,千万要收藏好了!
安全跳转页面·重制版
原本的安全跳转页面糟糕的一塌糊涂,因为当时水平有限,所以只能在别人的基础上修改,导致很多地方都不兼容,比如最简单的fancybox我都没有办法排除,会导致无法点击图片进行放大查看,除此之外无法排除友链页面,也无法排除友情链接的跳转卡片,兼容性也很差,群友想要使用我也没法提供解决方案,很是头疼,所以经过整整一个月的酝酿,我胡汉三又回来啦!此次重构大大简化了代码结构,并解决了前面的问题,为了测试稳定性,我还特意悄悄地上线了六天,好像也没人提出什么bug(也有可能是我的人气太少了呜呜呜),这才正式写出该重制版教程,给予需要的朋友以启发。
柳神
2024/05/30
1.1K0
安全跳转页面·重制版
7b2美化-首页添加导航会员区块
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
小狐狸说事
2022/11/17
8380
【推荐收藏】10 个最佳实践来让你的CSS代码更加优雅
首先,决定是否真的需要使用 CSS 框架。现在,有许多替代轻量级健壮(robust)框架的方法。通常,你不需要使用框架中的所有选择器,所以你的包中会包含死代码(dead code)。
用户3806669
2021/07/06
5910
【推荐收藏】10 个最佳实践来让你的CSS代码更加优雅
CSS-背景渐变的兼容写法
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
xing.org1^
2018/05/17
1.9K0
纯JS写一个用苹果序列号查询生产信息的小工具
苹果手机是目前比较火或者说是一直很火的手机,但是和人一样,人火是非多,东西也是,所以我们买苹果手机的时候都喜欢查询一下是什么时间出的,什么地方出的,但是奈何还要看很多的资料,登录这里那里去查询,有的更恶心的,还要你关注什么微信号才给你说,我也是一个果粉,所以我查看了一下苹果手机序列号的规则,决定做一个小的工具,可以直接查询手机的生产地和具体时间。今天我们就一起做一个!
何处锦绣不灰堆
2020/05/29
1.4K0
纯JS写一个用苹果序列号查询生产信息的小工具
分享一个自用emlog手机底部导航加样式代码
看到很多朋友都要这个手机端底部导航索性就分享了,这玩意其实我也不是不舍得发,是懒得而已 这玩意我都是扣别人的所以这个东西自己扣就行了,如果你不会扣那我赶紧我分享出来你也不会用。
用户8099761
2023/05/11
7920
菜鸡博客开……开……开源了!
因为很多人找我要过博皮源码,所以本宝宝经过深思熟虑,最终决定把自己的源码分享给大家!
attack
2018/09/21
3K0
原生JS实现目录滚动特效
分享一个用原生JS实现的文字滚动效果,这种效果通常用在网页中一些局部展示信息,如新闻、动态、充值记录等,效果如下:
越陌度阡
2020/11/26
34.9K0
原生JS实现目录滚动特效
SpringBoot入门建站全系列(八)集成模板引擎(thymeleaf)渲染页面
本文不讲前后端分离,先讲下模板引擎,Springboot支持很多模板引擎,thymeleaf算是比较好用的一种。
品茗IT
2019/08/09
2.1K0
30+有用的CSS代码片段
在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档。除了那些解决常见的恼人的问题外,也包含了一些解决新问题的新技术。 1.垂直对齐 如果你之前遇到过这个问题,你就应该知道它是多么的烦人,幸运的是,现在你可以使用CSS3变换来解决这个问题: .vc{ position: relative; top: 50%; -webkit-transform: transl
前朝楚水
2018/04/02
1K0
相关推荐
WordPress纯代码外链跳转效果的3款样式免费分享
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验