伪造 微信 此网页有 shuodahua.com 提供

最近 查看朋友圈 发的文章时,发现带弹出广告的网页 也提示 有 mp.weixin.qq.com 提供,猜测可能是使用了CSS的 position:fixed实现。闲来无事,自己闭门又造了个轮子。 苹果手机中的效果如下:

代码纯 html+css 实现,比较简单,直接上代码:


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
    <meta charset="utf-8">
    <style>
    body {
        background: #0099EC;
    }

    .wechat_from {
        position: fixed;
        background: #303133;
        top: 0;
        left: 0;
        right: 0;
        /*防止 下拉太长 显示 蓝色背景*/
        height: 300px;
        color: #7A7B7D;
        padding: 10px 0;
        font-size: 12px;
    }

    .body {
        background: #0099EC;
        color: #FFF;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 20px 15px;
        /*防止 上拉 显示 wechat_bg*/
        min-height: 800px;
    }
    </style>
</head>

<body>
    <div class="wechat_from">
        <center>此网页由 shuodahua.com 提供</center>
    </div>
    <div class="body" id="body">
        <h1>下拉试试</h1>
        <p>您访问的是 miaoqiyuan.cn </p>
        <p>下拉显示 由 shuodahua.com 提供 </p>
    </div>
    <script>
    /*
     * 在微信内部打开,并且是 安卓 系统,则通过 监听 touch 事件
     * 为啥苹果不用?咱写的这个不如微信原生的体验好
     */
    if (/micromessenger/gi.test(navigator.userAgent) && /android/gi.test(navigator.userAgent)) {
        var $body = document.getElementById('body');
        $body.addEventListener('touchstart', function(event) {
            event.preventDefault();
            event.target.dataY = event.touches[0].pageY;
        });
        $body.addEventListener('touchmove', function(event) {
            event.preventDefault();
            var offsetY = (event.touches[0].pageY - event.target.dataY) / 2;
            console.log(event.touches[0].pageY - event.target.dataY);
            if (offsetY < 300) {
                event.target.style.top = offsetY + 'px';
            }
        });
        $body.addEventListener('touchend', function(event) {
            event.preventDefault();
            event.target.style.top = '0px';
        });
    }
    </script>
</body>

</html>


测试安卓版无效,如果后期解决了,会更新此文。

现在已经支持安卓版本,安卓版本效果如下:

测试地址:http://www.miaoqiyuan.cn/products/wechat.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注