来源:https://juejin.im/entry/588b44a08fd9c544813ed5b3 一.背景 用户点击浏览器工具栏中的后退按钮,或者移动设备上的返回键时,或者JS执行history.go(-1);时,浏览器会在当前窗口“打开”历史纪录中的前一个页面.不同的浏览器在“打开”前一个页面的表现上并不统一,这和浏览器的实现以及页面本身的设置都有关系. 在移动端HTML5浏览器和webview中,“后退到前一个页面”意味着:前一个页面的html/js/css等静态资源的请求(甚至是aj

免责声明 本文章所提到的技术仅用于学习用途,禁止使用本文章的任何技术进行发起网络攻击.非法利用等网络犯罪行为,一切信息禁止用于任何非法用途.若读者利用文章所提到的技术实施违法犯罪行为,其责任一概由读者自行承担,与作者无关. 0x01 前言 研究飞猪旅行HTML5端sign签名过程,以复刻sign签名过程为手段,以查询酒店价格为目标,以学习技术要点.思路以及如何防范为宗旨,展开对飞猪H5端API接口sign签名的研究. 0x02 寻突破口 捕获目标API请求数据包 使用浏览器F12开发者工具开启设

最近在做H5端UI自动化测试,其中遇到了一个棘手问题就是密码控件,因为密码控件的按钮每次都是随机不一样的,没法固定去点击输入密码.密码的输入框是div不是input,所以没法用send_keys()这个方法.输入的密码都是经过加密后传给后台的,所以没法直接传值.各种途径都被堵死,宝宝心里苦啊.想来想去只能模拟人去点击输入密码,但是按键每次位置不一样,是个难题,于是想了一个办法就是识别按键上的数字,然后再去点击,接下来说一下实现的思路: 1.看下图我们输入密码的页面,所看到的每个数字,都是一个小图

2016年6月29日补充: 最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑.也包括与这篇文章相关的. 首先我们应该知道使用h5新提供的属性getUserMedia这个属性,是可以调取系统的摄像头进行拍照或者是摄像的,但是兼容性支持的不好,所以当我们需要获取系统的多媒体权限时我们都不会采用这个属性. 使用标签我们可以间接的呼起系统选择文件的窗口,来读取系统文件.但是在WebView中,因为安卓权限的问题,我们是没办法直接获取读取文件这个操作的.而在原生的浏览器

来自一个需求的总结: 在微信公众号中根据地图上的marker和label,或者搜索结果点击调起地图APP进行导航. 一开始是使用百度地图进行开发,后面转腾讯是因为微信不允许不是自家或者合作方的APP在微信自带浏览器中唤起.(这里吐槽一下微信,这么搞算垄断吗?还有腾讯地图有多渣心里没点B数吗?用户使用量就是一个很好的证明!) 首先: 百度地图Marker打点及label并添加对应点击事件 给百度地图添加了maker,label及对应的点击事件,如果需要创建多个marker和label:从第二行创建

h5端的uni-app项目 需求:uni-app h5端跳转到底部导航栏的时候使用方法uni.switchTab跳转刷新页面更新数据 百度的方法如下: uni.switchTab({ url: '/pages/index/main', success: function (e) { var page = getCurrentPages().pop(); console.log('page',page) if (page == undefined || page == null) return;

之前有个需求,由于H5端不支持TCPSocket通信,于是中间搭了个安卓框架作为通信的介质,在开发中遇到一个问题,当后端传一个比较大的数据上来时,一条完整的数据会没有规矩的分成若干个包,每条数据可能不存在完整的包头包尾.所以我想了一个用缓存数据的方法来对数据进行拼包. 后端会对每一串数据添加包头(十六进制02)和包尾(十六进制03)进行上报,分包后的数据解析后会有四种情况: 1.  包头*********包尾 或 包头*******包尾包头*******包尾 2.  包头******* 3. 

H5 端 rem 适配方案与 viewport 适配 rem rem 是 CSS3 新增的一个相对单位(root em,根 em) 只根据当前页面 HTML 页面的 font-size 设置,如果根目录的 font-size 为 18px,则 1rem=18px 媒体查询设置 @media screen and (min-width: 320px) { html { font-size: 32px; } } @media screen and (min-width: 375px) { html

之前使用taro,版本号1.2.11 会有这样的问题,如下:gitHub找解决的,看到大佬们说更新一下版本就好了,果然更新后,此问题解决OK了. 当然,坑是走不完的,版本也更新挺快的,想着把taro和taro-ui更新到最新版本,小程序端启动正常,H5运行报错:Object(...) is not a function ......... 大佬们说有的依赖没有下成功,于是不聪明的我,果然又重新装了(其实装了好几次,,哈哈........) cnpm install -g @tarojs/cli

最近在开发项目的时候,遇到一个需求,需要移动端实现放大查看图片的功能,然后我就在网上搜索了一下资料,看到了photoswipe这个插件,后来试了试,确实挺好用的,它可以实现手势放大缩小查看图片,左右滑动切换图片以及上下滑动关闭大图.现在简单分享一下. 需要购买阿里云产品的,可以点击此链接购买,有红包优惠哦: https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07 一.需要引入的css和js文件. 页面中需

这个是一个不知道什么鬼的东西,按照他需求改的,我也不知道对不对...看介绍说是h5把,我这个是用那个插件photoswipe的实现的 demo包地址: https://files-cdn.cnblogs.com/files/maoye520/Chat.rar 练练手而已,有问题欢迎留言讨论.

最近在写uni-app项目,项目打包部署到服务器后,搞了好一会一直打开是空白页,原来自己有几个地方疏忽了,现把步骤整理一下: 第1步:编辑配置 mainifest.json 文件 tip:运行的基础路径,我的是reads路径,那么服务器上 要新建一个reads文件夹(如下图) 第2步:点击HBuilderX顶部菜单发行,选择网站-h5手机版 第3步:弹出框提示填写 网站标题和网站域名,然后点击发行 第4步:控制台可以看到编译成功 第5步:可以看到unpackage下的h5文件夹,把里面的stat

例如我现在的项目运行在 http://localhost:8080,而我有个接口是 https://service.picasso.adesk.com/v1/wallpaper/album,发起请求就会出现跨域问题,以下是解决方法 首先找到 manifest.json 这个文件,在项目目录的src文件夹下,添加 "h5" 节点 1 "h5": { 2 "devServer": { 3 "port": 8080, 4 "

firefox一直提示让浏览器记住密码会有安全问题,但是一直未曾关注过到底是什么安全问题. 国庆节回家后发生的一件小事,让我深刻认识到让浏览器记住密码有多么不安全. 事情的起因是这样,家里wifi信号不好,然后打算换个路由器增强wifi信号范围. 由于是宽带拨号上网,需要对应的宽带号和密码,安装宽带的时间比较久远了,尝试了所有可能的账号名和密码均无果,拨打10000号也提示人工忙无法接通 百度后,登入了路由器管理界面,看到了宽带号,但是密码是点点点的加密样式,抱着侥幸的心理,将密码栏的输入框 t

找到项目的根目录下的pages.json文件,添加一下内容,可以去掉对应页面的导航栏 附上代码 "app-plus":{ "titleNView": false }

1.由于后端的限制,上传图片到服务器只能的一张一张传2.显示图片预览是本地的图片3.根据服务器返回的结果拿到相应的路径保存到提交评论的接口中4.删除的时候,需要删除对应的路径,不要把删除的提交到评论的接口中 A.comment-detail.js var status = common.getQueryStr("status"); var subsId = common.getQueryStr("subsId"); var isList = common.getQu

1.upload.js (function($) { $.extend($.fn, { images : new Array(), initImages:function (images) { $.each(images,function (index,value) { $(this).images.push(value); var $img = $('<div><div class="try-report-add thumb"><img class=&q

// app下载提示 if (!sessionStorage.getItem("appDownloadTipClosed") && isAndroidOrIphone() && !isYrhApp()) { $("#appDownloadTip").removeClass("mui-hidden"); $("#appDownloadTip .media-ops").on("click&

知乎大佬的代码: 作者:独夜行 链接:https://www.zhihu.com/question/40511430/answer/166467343 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. (function() { if (!window.history.pushState || !document.dispatchEvent) return; var href = location.href; var flag = true; var voidFn

概念:所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码解析的差异,造成页面显示效果不统一的情况. 1>不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大.解决方案:css里 *{margin:0;padding:0;} 2>块属性标签同时设置了横向margin值和float属性后,在ie6显示的横向margin比设置的大一倍问题症状:常见症状是ie6中后面的一块被顶到下一行碰到频率:90%(稍微复杂点的页

<p class="plan" :style="'width:' + unit"></p>