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中:last选择器用法实例
Dec 30 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
详解React路由传参方法汇总记录
Nov 29 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
详解Vue之计算属性
2020/06/20 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
Python实现求解一元二次方程的方法示例
2018/06/20 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
对python中Json与object转化的方法详解
2018/12/31 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
Python识别处理照片中的条形码
2020/11/16 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
意大利在线药房:Farmacia Loreto Gallo
2019/08/09 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
九州传奇上机题
2014/07/10 面试题
行政管理专业推荐信
2013/11/02 职场文书
集体生日活动方案
2014/08/18 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
实习协议书范本
2014/09/25 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
质检员岗位职责范本
2015/04/07 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技