JS前端广告拦截实现原理解析


Posted in Javascript onFebruary 17, 2020

这篇文章主要介绍了JS前端广告拦截实现原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

主流的浏览器,默认都开启了广告过滤,这对于用户(浏览者)来说,不但加快了访问网页的速度,而且也避免了勿点一些垃圾色情的东西,可以说绿色了网络环境。

第一、对于正常的广告拦截前端开发需要注意的是:

在请求图片与js文件、接口、文件内容最好不要包含ad、guanggao等关键词,可能被拦截

我们可以用一个请求来判断浏览器有没有开启广告拦截,如果我们需要插入广告,可以提示用户关闭广告拦截

<script src="http://demo.3water.com/adview_pic_cpc_cpm_cpa_guanggao_gg_ads_300x250.js" type="text/javascript"></script>
/*这个js文件的内容为var killads = true;*/
<script type="text/javascript"> 
if (typeof(killads)=='undefined'){alert('广告被过滤');} 
</script>

第二、浏览器对window.opne()的拦截,我们可以通过var x =window.open(url);然后判断x == undefined来判断新窗口是否被拦截。

(一)、 一般情况下,如果在js中调用window.open()函数去打开一个新tab页,浏览器会进行拦截,认为打开的是一个广告页。

(二)、所以如果不想让浏览器拦截,可以将这个“函数”改为用户点击时触发,这样浏览器就认为是用户想访问这个页面,而不是你直接弹出给用户。

(三)、即使是用户点击事件,如果在一次事件里调用多次window.open()函数,则只有第一次被当作正常打开,之后的还是会被当作广告页。

(四)、如果在点击事件里有ajax调用,window.open()在回调函数里执行,则浏览器仍然认为是js调用并当作广告拦截。除非ajax设置为“同步”模式。也可以用下面的方法解决

var newWin = window.open(); 
$.ajax({ 
  url:xxx, 
  success: function(data){ 
    newWin.location = data.url; 
  } 
});

(五)、其他场景:

有的下载功能是这样实现的,当用户点击某个按钮后,在后台生成一个地址返回给前端,前端在请求的回调方法中,通过window.open()打开这个链接

由于前端需要给后台发送异步请求,所以window.open()也会被拦截

可行的方法是,在回调之后,生成一个<a>标签,且href设置为下载地址,然后触发这个<a>标签的点击事件,注意:<a>标签一定要加一个download属性,否则还是会被拦截

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
javascript动态创建链接的方法
May 13 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
javascript作用域链(Scope Chain)用法实例解析
Nov 30 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 #Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 #Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 #Javascript
Vue的双向数据绑定实现原理解析
Feb 17 #Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 #Javascript
javascript异常处理实现原理详解
Feb 17 #Javascript
Vue+webpack实现懒加载过程解析
Feb 17 #Javascript
You might like
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
PHP编程风格规范分享
2014/01/15 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
python如何调用百度识图api
2020/09/29 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
简短大学毕业感言
2014/01/18 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
办公室岗位职责
2014/02/12 职场文书
聚美优品的广告词
2014/03/14 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
芙蓉镇观后感
2015/06/10 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers