关于检测到网站是微信打开，提醒复制地址到浏览器中打开或者用浏览器打开 [ 2.0 版本 ]

lovelilili 2020-09-16 10:57:44 23700次浏览 3条评论 2 1 0

有时候为了防止网站被腾讯屏蔽，我们检测到通过微信或者QQ自带浏览器打开我们的网站需要个提醒页面，提醒用户用其他浏览器或者复制地址到其他浏览器中打开。类型如下界面：
QQ截图20200916105050.png

我的实现思路是新建个BaseController extends Controller，其他类不直接extends Controller而是继承这个BaseController。

<?php


namespace frontend\controllers;

use yii\web\Controller;

class BaseController extends Controller
{

    public function beforeAction($action)
    {
        if (parent::beforeAction($action)) {
            $agent = \Yii::$app->request->getUserAgent();
            if (strpos($agent, 'QQ/') || strpos($agent, 'MicroMessenger') !== false) {
                //$this->redirect(Url::toRoute('site/browser'))->send();
                echo $this->renderPartial('@app/views/site/browser');
                return false;
            } else {
                return true;
            }
        }
        return false;
    }


}

视图文件代码如下：

<?php

/* @var $this \yii\web\View */
/* @var $content string */

use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
use yii\widgets\Breadcrumbs;
use frontend\assets\AppAsset;
use common\widgets\Alert;

//AppAsset::register($this);

$this->registerCssFile('@web/css/browser.css');
$this->registerCssFile('@web/css/layer.css');

$this->registerJsFile('https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js',['position'=>\yii\web\View::POS_HEAD]);
$this->registerJsFile('@web/js/layer.js',['position'=>\yii\web\View::POS_HEAD]);
$this->registerJsFile('@web/js/clipboard.js',['position'=>\yii\web\View::POS_HEAD]);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
    <meta charset="UTF-8">
    <title>使用浏览器打开</title>
    <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">
    <?php $this->head() ?>

</head>
<body>
<?php $this->beginBody() ?>
<div class="top-bar-guidance">
    <p>点击右上角<img src="//gw.alicdn.com/tfs/TB1xwiUNpXXXXaIXXXXXXXXXXXX-55-55.png" class="icon-safari"> <span id="openm">Safari打开</span></p>
    <p>可以继续浏览本站哦~</p>
</div>
<a style="display: none;" href="" id="vurl" rel="noreferrer"></a>
<div id="browser">
    <p>避免微信和QQ屏蔽本站网址，请理解支持！</p>
</div>
<div class="app-download-tip">
    <span class="guidance-desc">点击右上角或复制网址自行打开</span>
</div>
<a data-clipboard-text="<?php echo Yii::$app->request->hostInfo.Yii::$app->request->getUrl(); ?>" class="app-download-btn">点此复制本站网址</a>
<script type="text/javascript">
    new ClipboardJS(".app-download-btn");
    $(".app-download-btn").click(function() {
        layer.tips("复制成功，么么哒", ".app-download-btn", {
            tips: [3, "rgb(38,111,250)"],
            time:500
        });})
</script>

<script>
    function openu(u){
        document.getElementById("vurl").href= u;
        document.getElementById("vurl").click();
    }
    var url = window.location.href;
    if(navigator.userAgent.indexOf("QQ/")> -1){
        openu("ucbrowser://"+url);
        openu("mttbrowser://url="+url);
        openu("baiduboxapp://browse?url="+url);
        openu("googlechrome://browse?url="+url);
        openu("mibrowser:"+url);
        openu("taobao://"+url.split("://")[1]);
        openu("alipays://platformapi/startapp?appId=20000067&url="+url);
        $("html").on("click",function(){
            openu("ucbrowser://"+url);
            openu("mttbrowser://url="+url);
            openu("baiduboxapp://browse?url="+url);
            openu("googlechrome://browse?url="+url);
            openu("mibrowser:"+url);
            openu("taobao://"+url.split("://")[1]);
            openu("alipays://platformapi/startapp?appId=20000067&url="+url);
        });
    }else if(navigator.userAgent.indexOf("MicroMessenger") > -1){
        if(navigator.userAgent.indexOf("Android") > -1){
            var iframe = document.createElement("iframe");
            iframe.style.display = "none";
            document.body.appendChild(iframe);
        }else{

        }
    }
</script>

<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>

browser.css代码如下：

body,html{width:100%;height:100%}
*{margin:0;padding:0}
body{background-color:#fff}
#browser img{
    width:50px;
}
#browser{
    margin: 0px 10px;
    text-align:center;
}
#contens{
    font-weight: bold;
    margin:-285px 0px 10px;
    text-align:center;
    font-size:20px;
    margin-bottom: 125px;
}
.top-bar-guidance{font-size:15px;color:#fff;height:60%;line-height:1.8;padding-left:20px;padding-top:20px;background: url('../img/TB1eSZaNFXXXXb.XXXXXXXXXXXX-750-234.png') center top/contain no-repeat}
.top-bar-guidance .icon-safari{width:25px;height:25px;vertical-align:middle;margin:0 .2em}
.app-download-tip{margin:0 auto;width:290px;text-align:center;font-size:15px;color:#2466f4;background: url('../img/TB1xwiUNpXXXXaIXXXXXXXXXXXX-55-55.png') left center/auto 15px repeat-x}
.app-download-tip .guidance-desc{background-color:#fff;padding:0 5px}
.app-download-btn{display:block;width:214px;height:40px;line-height:40px;margin:18px auto 0 auto;text-align:center;font-size:18px;color:#2466f4;border-radius:20px;border:.5px #2466f4 solid;text-decoration:none}

其他的css和js文件自行查找。

有没有更好更简单的实现方法？欢迎讨论。

觉得很赞

共 3 条评论

默认排序

发表评论

您需要登录后才可以评论。登录 | 立即注册
lovelilili
见习主管

lovelilili

注册时间：2019-07-04
最后登录：2021-12-01
在线时长：10小时6分
  • 粉丝1
  • 金钱40
  • 威望10
  • 积分240
私信

热门教程