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 相关文章推荐
javascript 面向对象编程基础:继承
Aug 21 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
js调试工具Console命令详解
Oct 21 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
Openlayers实现图形绘制
Sep 28 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
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
jquery动态添加option示例
2013/12/30 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
星球大战与Python之间的那些事
2016/01/07 Python
python flask实现分页效果
2017/06/27 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
班级团队活动方案
2014/08/14 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
聘用合同范本
2015/09/21 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA
python通过新建环境安装tfx的问题
2022/05/20 Python