公告:极客时间特别赞助199元礼包:技术专栏专享优惠,以及硅谷&BAT等100+公司的架构演进技术大会实录观看权限>>>

利用空白gif图片,实现数据上报,数据埋点

前言

利用空白gif图片,实现数据上报,数据埋点。开发中经常需要统计页面点击,曝光,包括一些数据埋点。当然,埋点数据上报的方式有很多,下面介绍纯css的方式和一句话js方式。

纯css方式

纯css方式实现数据上报很简单。原理就是利用css属性,但是弊端也比较明显,就是点击只能加载一次。例如如下代码,实现跟踪botton1和botton2的点击事件

封装一个原生js的ajax请求,支持IE9CORS跨域请求

前言

关于纯js的ajax请求,我之前有文章写过,https://www.haorooms.com/post/js_ajax_chun, 关于CORS跨域资源共享,我也有文章写过,https://www.haorooms.com/post/cors_requestheaders, 但是在IE8和IE9中,cors跨域是无效的。针对这个,其实IE有个另类的CORS请求,仅仅在IE8和IE9中存在,IE10就废弃了,假如你要兼容IE8和IE9,那么这个属性就用到了。

IE8和IE9的 XDomainRequest

在IE中存在一个已经废弃了的属性XDomainRequest,这个属性在IE8和IE9中运行良好。

方法如下:

xSwitch调试和代理线上代码及h5判断小程序ua

前言

介绍一款同事推荐的谷歌插件。即装即用,很方便。应用场景蛮多,可以把线上代码代理到本地,类似fiddler。也可以将线上请求数据代理到本地。就是本地测试环境没有数据的话,可以代理线上环境的数据。

不翻墙安装谷歌插件

一般公司都会有自己的googleCDN,程序员很多也都有翻墙软件。假如你没有翻墙,打不开谷歌应用商店,没有问题。我介绍一下不翻墙安装谷歌插件的方法。

1、去谷歌插件网,例如Extfans、Crx4Chrome、Chromecj,下载CRX文件

2、直接将下载好的CRX文件拖拽到谷歌浏览器中就可以了,或者浏览器输入chrome://extensions,或者依次点击 Chrome 中的「菜单 – 更多工具 – 扩展程序」,打开开发者模式,添加就可以了。

css固定宽高和位置内部元素布局

前言

说不上什么小技巧吧,之前用过,发现这个布局对于单行元素来说,没有什么问题,因为我的需求就是单行元素,不换行来说的。类似这样的需求,位置和宽高固定,元素在固定宽高的位置里面的垂直方向的布局和水平方向的布局方式。

如下图: