文档章节

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

开源中国精彩人物
 开源中国精彩人物
发布于 2017/09/07 13:19
字数 397
阅读 16
收藏 0
点赞 0
评论 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 ⋅ 2

域名被封(微信)后的思索

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

娇娇jojojo ⋅ 2017/12/26 ⋅ 0

神奇的微信 这个是怎么实现的

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

匿名t3a ⋅ 2012/03/31 ⋅ 11

小伙伴们,C语言学习调查问卷来啦

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

石家的鱼 ⋅ 2017/11/01 ⋅ 0

移动端 Web 网页调试技巧

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

刘星石 ⋅ 2016/04/19 ⋅ 0

数据采集(六):scrapy爬取搜狗微信新闻+selenium模拟鼠标点击

scrapy框架解析 scrapy是一个流行的爬虫框架,为什么要用它呢?前面我们已经通过xpath或beautifulsoup实现了爬虫,scrapy又有什么不同?我在初步理解了这个框架之后,感觉它很灵活,很强大。...

czl389 ⋅ 2017/08/01 ⋅ 0

微信公众号开发工具汇总

前阵子写了篇入坑指南,介绍了下开发微信公众号的基本流程。最近又捣鼓了一阵,发现这开发工具的选择对于提高开发效率真是有莫大的帮助,所谓“只要工具选得好,月底奖金跑不了”。今天得空,...

郗南枫 ⋅ 2017/09/25 ⋅ 0

手把手教你扩展个人微信号(1)

现在的日常生活已经离不开微信,难免会生出微信有没有什么API可以使用的想法。 那样就可以拿自己微信做个消息聚合、写个vote什么的,可以显然没有这种东西。 不过还好,有网页版微信不就等于...

LittleCoder ⋅ 2016/05/18 ⋅ 5

微信跳一跳小游戏快速上分

toJump 用网页玩微信跳一跳小游戏 安装 安装 Node.js 使用方法 预先设置 安卓 1.打开安卓手机的usb调试模式并授权连接的电脑 如果是小米手机,在USB调试下方有打开允许模拟点击 其他需要模拟...

小k博客 ⋅ 01/05 ⋅ 0

微信跳一跳小游戏上分秘籍代码

toJump 用网页玩微信跳一跳小游戏 安装 安装 Node.js 使用方法 预先设置 安卓 1.打开安卓手机的usb调试模式并授权连接的电脑 如果是小米手机,在USB调试下方有打开允许模拟点击 其他需要模拟...

小k博客 ⋅ 01/03 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

VS2015配置并运行汇编(一步一步照图做)【vs2017的链接在最后】

x64: TITLE Add and Subtract (AddSub.asm) ; This program adds and subtracts 32-bit integers. ; Last update: 2/1/02 ;.MODEL flat,stdcall x64 not su......

simpower ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

你真的明白RPC 吗?一起来探究 RPC 的实质

你真的明白RPC 吗?一起来探究 RPC 的实质 不论你是科班出身还是半路转行,这么优秀的你一定上过小学语文,那么对扩句和缩句你一定不陌生。缩句就是去除各种修饰提炼出一句话的核心,而不失基...

AI9o後 ⋅ 昨天 ⋅ 0

z-index设置失效?

今天碰到了一个问题,就是在给li设置提示框的时候,有用到遮罩效果,本来想把对应的出现在最顶层,可是不管将li设置的z-index值设为多大,li都没有出现在遮罩层之上。 我在网上查了z-index设...

IrisHunag ⋅ 昨天 ⋅ 0

CyclicBarrier、CountDownLatch以及Semaphore使用及其原理分析

CyclicBarrier、CountDownLatch以及Semaphore是Java并发包中几个常用的并发组件,这几个组件特点是功能相识很容易混淆。首先我们分别介绍这几个组件的功能然后再通过实例分析和源码分析其中设...

申文波 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部