文档章节

微信浏览器模拟"此网页由 weixin.qq.com 提供"

开源中国精彩人物
 开源中国精彩人物
发布于 2017/09/07 13:19
字数 397
阅读 21
收藏 0

前几天无意中发现一个分享流量的微信网页在下拉时显示"此网页由 weixin.qq.com 提供",点击分享按钮时显示的地址是另外一个,原来是网页下来显示xxx提供的位置造假了,觉得挺有意思,然后自己实现了一个简易版本的。 下面的html在微信浏览器中访问将有类似的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style>
        body {

            /* position: fixed; */
            top: 0;
            bottom: 0;
            overflow-y: hidden;
            padding: 0 !important;
            margin: 0 !important;

            /*为了兼容普通PC的浏览器*/
            /* height: 100%;
            
             */
        }


        .container {
            height: 100vh;
            overflow: scroll;
            background-color: #333333;
            transition: 0s all;
            position: 'relative';
        }

        .content {
            background: #fff;
            height: 100vh;
            width: 100vw;
            z-index: 100;
            position: absolute;
            top: 0;
        }

        .come_from {
            z-index: 1;
            position: absolute;
            top: 3px;
            left: 0;
            right: 0;
        }

        .come_from p {
            font-size: 12px;
            color: #dddddd;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="come_from">
            <p>此网页由 weixin.qq.com 提供</p>
        </div>
        <div class="content">
        </div>
    </div>
    <script type="text/javascript">
        var lastY = 0;//手势触摸中最后一次clipentY
        var lastTop = 0; //显示 from div的高度 通过content的top值实现
        //禁用body的手势事件 
        $('body').on('touchmove touchstart', function (event) {
            event.preventDefault();
        });
        //内容窗口增加手势事件
        $('.content').on('touchstart', function (event) {
            lastY = 0;
            lastTop = 0;
        });
        $('.content').on('touchmove', function (event) {
            var touch = event.touches[event.touches.length - 1];
            var content = $('.content');
            if (lastTop == 0) {
                lastTop = parseFloat(content.css('top').replace('px', ''));
            }
            if (lastY) {
                var offset = touch.clientY - lastY;
                lastY = touch.clientY;
                if (lastTop + offset < 80 && lastTop + offset > -80) {
                    lastTop = lastTop + offset;
                    content.css({ 'transition': '0s all', 'top': lastTop });
                }
            } else {
                lastY = touch.clientY;
            }
        });
        $('.content').on('touchend', function (e) {
            //松手时将top置0
            $('.content').css({ 'transition': '1s all', 'top': 0 });
        })
    </script>
</body>

</html>

© 著作权归作者所有

共有 人打赏支持
开源中国精彩人物
粉丝 3
博文 4
码字总数 987
作品 0
青岛
程序员
微信扫描二维码登录网页的原理

1.微信扫描二维码登录网页过程 [电脑] 打开 http://wx.qq.com,得到二维码; [手机] 手机登录微信,点开扫一扫,扫描PC端二维码,并且扫描成功; [电脑] 手机扫描成功后,提示“登录网页版微...

w-rain
2016/02/17
984
2
域名被封(微信)后的思索

作者:汪娇娇 时间:2017年11月23日 一、先说下微信屏蔽域名的分类吧,大致分为以下3种: 1、域名被微信封杀,显示的是链接无法访问; 2、域名被微信拦截,是跟淘宝一样,如需浏览,请长按网...

娇娇jojojo
2017/12/26
23
0
神奇的微信 这个是怎么实现的

http://weixin.qq.com/cgi-bin/regrank?fun=showpage&t=wx100million 用手机扫描这个二维码 网页上会显示你的微信信息 这是怎么实现的...

匿名t3a
2012/03/31
1K
11
小伙伴们,C语言学习调查问卷来啦

亲爱的小伙伴们,大家好啊~~~ 为了给大家在我的微信公众号:C语言编程技术分享 http://weixin.qq.com/r/mkmguCDEan0VrWTb9xyI (二维码自动识别) 上提供更好的C语言编程学习的资料,希望您...

石家的鱼
2017/11/01
0
0
移动端 Web 网页调试技巧

原文出处: 盛瀚钦 本文主要列举了调试本地网页、查看测试环境网页的各种方法,涵盖了PC、iPad、移动端的调试技巧。 本文的不足之处在于,小溪里暂时还没有找到调试位于微信中和安卓各国产浏...

刘星石
2016/04/19
57
0

没有更多内容

加载失败,请刷新页面

加载更多

如何在Java中生成比特币钱包地址

让我们通过学习比特币(Bitcoin)如何实施该技术的各个方面来工作,好吗?该技术包括以下几个方面: 比特币地址bitcoin address是用来发送和接收比特币的。 交易transaction是比特币从一个地...

geek12345
9分钟前
0
0
面试必备Linux基础知识

学习Linux之前,我们先来简单的认识一下操作系统。 一 从认识操作系统开始 1.1 操作系统简介 我通过以下四点介绍什么操作系统: 操作系统(Operation System,简称OS)是管理计算机硬件与软件...

小小明童鞋
9分钟前
2
0
SpringBoot基础教程3-1-3 Quartz定时任务单点持久化

1 概述 实际项目中,复杂的定时任务都会结合持久化,动态改变定时任务状态,本文将介绍基于Quartz的定时任务单点持久化方式,通过RESTful风格,演示定时任务的CRUD,最后使用Swagger测试。 ...

Mkeeper
26分钟前
3
0
Android入门—文件目录解析

AndroidManifest.xml 是每个android程序中必须的文件,它位于整个项目的根目录。我们每天都在使用这个文件,往里面配置程序运行所必要的组件,权限,以及一些相关信息。但是对于这个文件,我...

haoyuehong
29分钟前
5
0
IDEA中Maven打包时如何跳过测试

方法1:直接使用IDEA提供的方式 Maven命令栏的工具栏有下图中的图标,上面就写着 Skip Tests 按下图标后,如下图,test就不可用了 直接使用package命令即可。 方法2:自己编辑maven命令 进入...

karma123
42分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部