无头浏览器(Headless browser)指没有用户图形界面的(GUI)的浏览器,目前广泛运用于web爬虫和自动化测试中。随着反爬虫和反反爬虫对抗技术的升级,越来越多的爬虫开始使用无头浏览器伪装成正常用户绕过反爬虫策略。
我们如何区分这些无头浏览器和正常浏览器?从Server Side分析用户行为进行检测是一劳永逸的方法,但成本和难度都很大。
不过通过无头浏览器的一些特性。我们也可以从从Client Side找出一些不同来。下面以醉受欢迎的PhantomJS(2.x版本)为例,介绍一些识别的方法,对于其他的无头浏览器,如Slimer JS这些方法也可以参考
Category Archives: JavaScript
原生JS实现JQuery中的hasClass()、addClass()、removeClass()方法
原生JS实现JQuery中的hasClass()、addClass()、removeClass()方法
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function hasClass(ele, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length === 0) return false; // 当cls没有参数时,返回false return new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' '); } function addClass(ele, cls) { if (!hasClass(ele, cls)) { ele.className = ele.className === '' ? cls : ele.className + ' ' + cls; } } function removeClass(ele, cls) { if (hasClass(ele, cls)) { var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' '; while (newClass.indexOf(' ' + cls + ' ') >= 0) { newClass = newClass.replace(' ' + cls + ' ', ' '); } ele.className = newClass.replace(/^\s+|\s+$/g, ''); } } |
ckplayer.js SyntaxError: unterminated regular expression literal
最近做织梦系统做的网站的前端开发,网站首页要做成视频列表形式的,点击后直接全屏播放,之后视频自动顺序播放。前端使用了CKplayer,先期是在本地测试,完成后到移植到真实环境时怎么弄JS控制台都会报错,ckplayer.js SyntaxError: unterminated regular expression literal
改来查去的,最后测试结果就是此织梦系统是GBK的,生成的页面编码当然也就是GBK的了,我把页面编码改为utf-8后,一切正常。
所以,当ckplayer.js报错:SyntaxError: unterminated regular expression literal时,查看页面编码是否为utf-8,如果不是,则改编码后测试。如果还是报错,那再研究其它原因。
JS中的this,construtor,prototype
construtor和prototype
constructor是一个对象的属性,这个属性存在在此对象的prototype中, 指向此对象的构造函数。分析这句话
- constructor是一个对象属性。
- constructor在prototype中
- constructor指向构造函数 Continue reading
JS随机数、JS随机整数
JS随机数、JS随机整数
0 1 2 3 4 5 |
function myRandom(n, m) { var random = Math.floor(Math.random()*(m-n+1)+n); return random; } console.log(myRandom(100, 200)); |
JavaScript中的call、apply、bind方法的异同
js中的call(), apply()和bind()是Function.prototype下的方法,都是用于改变函数运行时上下文,最终的返回值是你调用的方法的返回值,若该方法没有返回值,则返回undefined。这几个方法很好地体现了js函数式语言特性,在js中几乎每一次编写函数式语言风格的代码,都离不开call和apply,能够熟练运用它们,是真正成为一名jser程序员的重要一步。 Continue reading
div resize事件 | jquery 监听div大小变化函数
div resize事件 | jquery 监听div大小变化函数
监听div大小变化的jquery扩展,通过这个函数扩展jquery,使div也具有和窗口一样的resize功能。 Continue reading
layUI+Vue示例
layUI+Vue+vue-resource示例 Continue reading
关于开发Google+以及Facebook第三方登录
简述
最近项目中有关于第三方授权登陆的需求,第三方Facebook以及Google +登录。
正好这几天把这个需求做得差不多了,收个尾,作为一个这方面之前基本从未涉及的小白,总结下开发流程以及过程中遇到的一些问题。希望能对大家有所帮助。
基本上,目前互联网上的涉及到第三方登录采用的都为OAuth认证方式,相关原理以及实现方法相关的可以网上搜索查看。不过涉及到Facebook以及Google +的登陆,最大的问题是这两个网站在墙外,想FQ找资料比较费劲,奈何国内这方面的资料也不是很齐全,翻到的官方的文档又全是英文的,阅读无能~
第三方登陆简单可以分为以下几个步骤,分别是:获得第三方登陆许可认证;根据规范添加页面登录样式和js实现,跳转到第三方登陆页面登陆并获取授权后,返回原指定页面(或请求);后台对登录信息进行校验,并获取对应第三方登陆用户的信息;将第三方用户信息与本系统用户进行关联。
下面就以上几个步骤的一些关键信息,或者说是我开发当中遇到的问题做一下简要的记录。因为Facebook以及Google +第三方登陆都采用的是Auth2技术,因此只会在具体实现不同的地方单独说明。理解有误的地方,或者是没有说全的地方,还请各位谅解~ Continue reading
原生JS复制文本到手机剪切板
复制文本到剪切板,兼容PC与WAP,复制文本到手机剪切板,兼容电脑与手机移动设备
方法一:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<button type="button" id="copyText">点我复制</button> <script> // 复制到剪切板 function copy(str){ var save = function (e){ e.clipboardData.setData('text/plain',str);//clipboardData对象 e.preventDefault();//阻止默认行为 }; document.addEventListener('copy',save); return document.execCommand("copy");//使文档处于可编辑状态,否则无效 } document.getElementById('copyText').addEventListener('click',function(ev){ copy(ev.target.innerText) // 复制的内容为“点我复制” }); </script> |
方法二:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<button type="button" id="copyText">点我复制</button> <script> // 复制到剪切板 function copy(str){ var save = function (e){ e.clipboardData.setData('text/plain',str);//clipboardData对象 e.preventDefault();//阻止默认行为 }; document.addEventListener('copy',save); return document.execCommand("copy");//使文档处于可编辑状态,否则无效 } document.getElementById('copyText').addEventListener('click',function(ev){ copy('想复制什么就复制什么') // 复制的内容为“想复制什么就复制什么” }); </script> |