借鉴QQ邮箱URL跳转页面

Dabenshi

发布于 2024-04-03 09:30:58

2110

发布于 2024-04-03 09:30:58

文章被收录于专栏：Dabenshi

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

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

<?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 删除

background