无限

腾讯QQ防洪跳转页面源码
前言在QQ中发布网址,有时会因为一些原因(包括但不限于自己搞事、恶意举报、云误判等)而导致网址被贴上“危险”的红色...
扫描右侧二维码阅读全文
25
2019/02

腾讯QQ防洪跳转页面源码

版式来源于网络,代码逻辑和格式已进行优化。

前言

在QQ中发布网址,有时会因为一些原因(包括但不限于自己搞事、恶意举报、云误判等)而导致网址被贴上“危险”的红色标签,或是进入后显示“停止访问”。这对于网站的用户访问效果显然是十分不友好的。
Luckily,我们暂时还有对策:防 () 跳转。

主体部分

先看一下预览图:
请输入图片描述

这个跳转有三部分实现,第一部分为传统的meta重定向,but在QQ中作用不大;第二部分是对QQ的一个Api调用,一定情况下是可以成功的;最后一部分则是自动跳转不能成功时,最下方浏览器图标可能能够帮助你,这一部分的原理是各浏览器的Scheme协议,当然如果设备中没有安装对应的浏览器那么也是无效的。

看起来形势并不那么乐观,所以它的有效性如何呢?
事实上,即使在QQ中未能跳转,它也起到了“提示用户点击右上角使用其他浏览器”的功能,在其他浏览器中,重定向一般并没有什么特殊限制,也就不必担心不友好的用户体验了。

出于礼貌,这里粘贴已整理好的index.html如下(查看部署指导和完整源程序可跳过此部分):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>请使用浏览器打开</title>
        <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta name="format-detection" content="telephone=no">
        <meta content="false" name="twcClient" id="twcClient">
        <script src="https://open.mobile.qq.com/sdk/qqapi.js?_bid=152"></script>
        <script type="text/javascript"> mqq.ui.openUrl({ target: 2,url: "https://www.wuxian.gq/"}); </script>
        <style type="text/css">
        .loader {
            width: 320px;
            margin: 50px auto 70px;
            position: relative;
        }
        .loader .loading-1 {
            margin:0px auto;
            position: relative;
            width: 70%;
            height: 10px;
            border: 1px solid #69d2e7;
            border-radius: 10px;
            animation: turn 4s linear 1.75s infinite;
        }
        .loader .loading-1:before {
            content: "";
            display: block;
            position: absolute;
            width: 0%;
            height: 100%;
            background: #69d2e7;
            box-shadow: 10px 0px 15px 0px #69d2e7;
            animation: load 2s linear infinite;
        }
        .loader .loading-2 {
            width: 100%;
            position: absolute;
            top: 20px;
            color: #69d2e7;
            font-size: 22px;
            text-align: center;
            animation: bounce 2s  linear infinite;
        }
        @keyframes load {
            0% {
                width: 0%;
            }
            87.5%, 100% {
                width: 100%;
            }
        }
        @keyframes turn {
            0% {
                transform: rotateY(0deg);
            }
            6.25%, 50% {
                transform: rotateY(180deg);
            }
            56.25%, 100% {
                transform: rotateY(360deg);
            }
        }
        @keyframes bounce {
            0%,100% {
                top: 10px;
            }
            12.5% {
                top: 30px;
            }
        }
        footer img{
        width:50px;
        
        }
        footer{
            text-align:center;
            margin-bottom:40px;
            margin-top:60%;
        }
        h5{
            text-align:center;
        }
        </style>
        <meta http-equiv="refresh" content="0.5;url=mttbrowser://url=https://www.wuxian.gq/">
    </head>
    <body>
        <div class="htmleaf-container">
            <header class="htmleaf-header">
                <span>温馨提示</span>
            </header>
            <div class="demo">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="loader">
                                <div class="loading-1"></div>
                                <div class="loading-2">因QQ内置浏览器协议问题<br>访问需要跳转<br>如果不能正常跳转<br>请点击右上角使用其他浏览器</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <h5>点击下方已安装的浏览器图标直接跳转</h5>
            <a href="mttbrowser://url=https://www.wuxian.gq/"><img src="img/mtt.png"></a>
            <a href="googlechrome://browse?url=https://www.wuxian.gq/"><img src="img/chrome.png"></a>
            <a href="ucweb://https://www.wuxian.gq/"><img src="img/UCMobile.png"></a>
        </footer>
    </body>
</html>

源程序下载

提取码:tcty

部署指导

解压后得到文件夹cssimg以及两个文件index.htmlindex_preview.html
其中index_preview.html是预览用页面,已经注释了自动跳转代码便于调试,若没有定制需求请无视该文件。
修改index.html文件,将重定向的地址指向你的目标网址:

  • 14行,https://www.wuxian.gq/改为你想要跳转的网址;
  • 89行,同上,注意其余内容例如0.5;url=mttbrowser://url=不要改变(0.5是延时,如果你很清楚的话也可以改);
  • 111行,同上;
  • 112行,同上;
  • 113行,同上。

有效率的修改方法:Ctrl+F调出查找窗口,选择替换选项(或通过菜单打开替换对话框),查找https://www.wuxian.gq/字符串,全部替换为目标网址。

完成后,你需要一个腾讯QQ认定“不危险”的域名,将修改后的源代码上传至对应位置即可。

本方法的实现需要一个没红的域名,旨在通过没红的次要域名来保护主要域名,或是为已经被认定危险的域名绕过不友好的提示。

免责声明:防洪不是长久之计,应当从规范自身行为做起,切勿用于非法用途。

最后修改:2019 年 02 月 26 日 04 : 44 PM

发表评论